ypMenu (ypSlideOutMenu) in Typo3

Author:

Kein Author vorhanden

Author E-Mail:

Keine E-Mail vorhanden

Eingetragen:

14.10.2005 - 15:37

Quelle:

http://steinhauer-gmbh.net/_tm...

Klicks:

3770

ypMenu (ypSlideOutMenu) in Typo3
(ypMenu ist ein Menu wie es auf der Seite hier oben ist)

Dateien (copyright haben die jeweiligen Ersteller):
- ypMenu.php ( per includeLibs in Typo3 einbinden )
- ypSlideOutMenus.js ( im header laden )
- ypMenu.css ( in eure CSS-datei übernehmen oder im header mitladen )

Typo3: externes Template ( temp.ypMenu ) -> Setup

   0: config.no_cache = 1
   1: page.includeLibs.ypMenu = fileadmin/scripts/ypMenu/ypMenu.php
   2: page.headerData.11 = TEXT
   3: page.headerData.11.value ( 
   4: <script type="text/javascript" 
   5: src="fileadmin/scripts/ypMenu/ypSlideOutMenus.js" 
   6: language="JavaScript"></script> 
   7: )
   8: temp.ypMenu.special = directory
   9: # 57 ist die ID der root-page - siehe screenshot
  10: temp.ypMenu.special.value = 57
  11: temp.ypMenu = HMENU
  12: temp.ypMenu {
  13:   1 = GMENU
  14:   1 {
  15:     IProcFunc = user_menu->firstLevel
  16:     expAll = 1
  17:     wrap = |
  18:     NO = 1
  19:     NO {
  20:       wrap = |
  21:       XY = [50.w]+20, 31
  22:       30 = IMAGE
  23:       30.file = fileadmin/scripts/ypMenu/menu_bg2.gif
  24:       50 = TEXT
  25:       50 {
  26:         text.field = title
  27:         fontSize = 10
  28:         fontFile = fileadmin/templates/fonts/verdana.ttf
  29:         fontColor = #222222
  30:         offset = 10,20
  31:         niceText = 0
  32:         transparentBackground = 1
  33:       }
  34:       100 = || IMAGE
  35:       100.file = fileadmin/scripts/ypMenu/menu_space.gif
  36:     }
  37:      
  38:     IFSUB < temp.ypMenu.1.NO
  39:     IFSUB = 1
  40:      
  41:     RO < temp.ypMenu.1.NO
  42:     RO = 1
  43:     RO {
  44:       backColor = #DDDDDD
  45:       30 >
  46:     }
  47:      
  48:     IFSUBRO < temp.ypMenu.1.NO
  49:     IFSUBRO = 1
  50:     IFSUBRO {
  51:       backColor = #DDDDDD
  52:       30 >
  53:     }
  54:   }    
  55:    
  56:   2 = TMENU
  57:   2 {
  58:     IProcFunc = user_menu->secondLevel
  59:     expAll = 1
  60:     NO.linkWrap = <li>|</li>
  61:   }
  62:    
  63:   3 = TMENU
  64:   3 {
  65:     IProcFunc = user_menu->thirdLevel
  66:     expAll = 1
  67:     NO.linkWrap = <li>|</li>
  68:   }
  69:    
  70:   4 = TMENU
  71:   4 {
  72:     IProcFunc = user_menu->fourthLevel
  73:     expAll = 1
  74:     NO.linkWrap = <li>|</li>
  75:   }
  76: }
  77: 
  78: temp.user_menu = USER
  79: temp.user_menu.userFunc = user_menu->menuEnd

Hier koennen Sie sich den Quellcode kopieren.

config.no_cache = 1
page.includeLibs.ypMenu = fileadmin/scripts/ypMenu/ypMenu.php
page.headerData.11 = TEXT
page.headerData.11.value ( 
<script type="text/javascript" src="fileadmin/scripts/ypMenu/ypSlideOutMenus.js" language="JavaScript"></script> 
)
temp.ypMenu.special = directory
# 57 ist die ID der root-page - siehe screenshot
temp.ypMenu.special.value = 57
temp.ypMenu = HMENU
temp.ypMenu {
     1 = GMENU
     1 {
          IProcFunc = user_menu->firstLevel
          expAll = 1
          wrap = |
          NO = 1
          NO {
               wrap = |
               XY = [50.w]+20, 31
               30 = IMAGE
               30.file = fileadmin/scripts/ypMenu/menu_bg2.gif
               50 = TEXT
               50 {
                    text.field = title
                    fontSize = 10
                    fontFile = fileadmin/templates/fonts/verdana.ttf
                    fontColor = #222222
                    offset = 10,20
                    niceText = 0
                    transparentBackground = 1
               }
               100 = || IMAGE
               100.file = fileadmin/scripts/ypMenu/menu_space.gif
          }

IFSUB < temp.ypMenu.1.NO
          IFSUB = 1

RO < temp.ypMenu.1.NO
          RO = 1
          RO {
               backColor = #DDDDDD
               30 >
          }

IFSUBRO < temp.ypMenu.1.NO
          IFSUBRO = 1
          IFSUBRO {
               backColor = #DDDDDD
               30 >
          }
     }

2 = TMENU
     2 {
          IProcFunc = user_menu->secondLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }

3 = TMENU
     3 {
          IProcFunc = user_menu->thirdLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }

4 = TMENU
     4 {
          IProcFunc = user_menu->fourthLevel
          expAll = 1
          NO.linkWrap = <li>|</li>
     }
}

temp.user_menu = USER
temp.user_menu.userFunc = user_menu->menuEnd

externes_template

Ich habe vieles - wie auch das ypMenu - aus meinem MainTemplate in externe Templates ausgelagert, damits im MainTemplate übersichtlich bleibt! Deshalb kommt auch nur wenig TS in das MainTemplate(externes Template einbinden)

Typo3: MainTemplate der root-page -> Setup

   0: page = PAGE
   1: page.typeNum = 0
   2: page.stylesheet = fileadmin/templates/style2/class.css
   3: page.10 = TEMPLATE
   4: page.10{
   5:   template = FILE
   6:   template.file = fileadmin/templates/style2/template.htm
   7:   workOnSubpart = DOKUMENT
   8:    
   9:   marks.MENU = COA
  10:   marks.MENU {
  11:     10 < temp.ypMenu
  12:     20 < temp.user_menu
  13:   }
  14: }

Hier koennen Sie sich den Quellcode kopieren.

maintemplate

Das dazugehörige XHTML-template ist natürlich nur als Beispiel/Vorlage gedacht!

HTML-template ( fileadmin/templates/style2/template.htm )

0:    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
1:    
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2:    
<html xmlns="http://www.w3.org/1999/xhtml">
3:    
<head>
4:    
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5:    
</head>
6:    
<body>
7:    
<!-- ###DOKUMENT###-->
8:    
<div id="cRoot">
9:    
     <div id="cBanner"></div>
10:    
     <div id="cHeader"></div>
11:    
     <div id="cMenu">###MENU###</div>
12:    
     <div id="cPfad"></div>
13:    
     <div id="cInhalt">###INHALT###</div>
14:    
     <div id="cFunktion"></div>
15:    
     <div style="clear:both;height:1px;overflow:hidden;"></div>
16:    
     <div id="cFooter"></div>
17:    
</div>
18:    
<!-- ###DOKUMENT### -->
19:    
</body>
20:    
</html>

Hier koennen Sie sich den Quellcode kopieren.

Im CSS-Teil kann man im grunde >alles< dem eigenen design anpassen, ich habe aber erstmal nur die relevantesten eigenschaften blau markiert. Ausserdem ist die class "cMenu" nur ein Beispiel für einen DIV-container in dem der MENU-marker steht.

CSS-code ( fileadmin/templates/style2/class.css ) für das ypMenu und für den DIV mit der ID cMenu

0:    #cMenu {
1:    
     height:31px;
2:    
     width: 708px;
3:    
     margin-left:1px;
4:    
     margin-bottom:1px;
5:    
     background: #FFFFFF url(menu_bg.gif) repeat-x top left;
6:    
     position:relative; /* wichtige angabe, sonst taucht das slideMenu an falscher Position auf */
7:    
}
8:    

9:    
/*
10:    
###################
11:    
# ypMenu Styles #
12:    
###################
13:    
*/
14:    
.mmContent {
15:    
     /* nrmale schrift definieren */
16:    
     font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
17:    
}
18:    

19:    
.mmContent ul {
20:    
     margin: 0px; padding: 0px;
21:    
     list-style: none;
22:    
     z-index:2;
23:    
     position:relative;
24:    
     left:0px; top:0px;
25:    
}
26:    
.mmContent li {
27:    
     padding: 0px; margin: 0px;
28:    
}
29:    

30:    
.menuBackground {
31:    
     position:absolute;
32:    
     left:0px; top:0px;
33:    
     z-index:1;
34:    
}
35:    

36:    
.mmContent li a {
37:    
     /* Links bzw. die slideMenÃ&frac14;-Elemente definieren */
38:    
     display: block;
39:    
     color: #222222;
40:    
     font-weight:normal;
41:    
     font-size: 12px;
42:    
     font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
43:    
     width: 150px;
44:    
     padding: 5px;
45:    
     text-decoration: none;
46:    
     border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenÃ&frac14;Elementen */
47:    
}
48:    

49:    
* html .mmContent li a {
50:    
     width: 160px;
51:    
     width: 160px;
52:    
}
53:    

54:    
/* */
55:    
.mmContent li a:link { background: #EAED65; color: #222222; font-size: 12px; }
56:    
.mmContent li a:visited { background: #EAED65; color: #222222; font-size: 12px; }
57:    

58:    
.mmContent li a:hover{ background: #FFFF99; color: #222222; font-size: 12px; }
59:    
.mmContent li a:active { background: #EAED65; color: #222222; font-size: 12px; }
60:    

61:    
.mmContent li a.submenu {
62:    
background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }
63:    
.mmContent li a.submenu:hover {
64:    
background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }
65:    

66:    
/*
67:    
##########################################
68:    
# ypMenu Styles for our belove IE 5.01 #
69:    
##########################################
70:    
*/
71:    

72:    
.mmContentb {
73:    
     font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
74:    
}
75:    

76:    
.mmContentb ul {
77:    
     margin: 0px; padding: 0px;
78:    
     list-style: none;
79:    
     z-index:2;
80:    
     position:relative;
81:    
     left:0px; top:0px;
82:    
}
83:    
.mmContentb li {
84:    
     padding: 0px; margin: 0px;
85:    
}
86:    

87:    
.menuBackground {
88:    
     position:absolute;
89:    
     left:0px; top:0px;
90:    
     z-index:1;
91:    
}
92:    

93:    
.mmContentb li a {
94:    
     /* Links bzw. die slideMenÃ&frac14;-Elemente definieren */
95:    
     display: block;
96:    
     width: 150px;
97:    
     padding: 5px;
98:    
     color: #222222;
99:    
     font-weight: normal;
100:    
     font-size: 12px;
101:    
     font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
102:    
     text-decoration: none;
103:    
     border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenÃ&frac14;Elementen */
104:    
}
105:    

106:    
* html .mmContentb li a {
107:    
     width: 160px;
108:    
     width: 160px;
109:    
}
110:    

111:    
.mmContentb li a:link { background: #EAED65; color: #222222;}
112:    
.mmContentb li a:visited { background: #EAED65; color: #222222;}
113:    

114:    
.mmContentb li a:hover{ background: #FFFF99; color: #222222;}
115:    
.mmContentb li a:active { background: #EAED65; color: #222222;}
116:    

117:    
.mmContentb li a.submenu {
118:    
     background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
119:    
     font-size: 12px;
120:    
}
121:    
.mmContentb li a.submenu:hover {
122:    
     background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
123:    
     font-size: 12px;
124:    
}

Hier koennen Sie sich den Quellcode kopieren.

#cMenu {
     height:31px;
     width: 708px;
     margin-left:1px;
     margin-bottom:1px;
     background: #FFFFFF url(menu_bg.gif) repeat-x top left;
     position:relative; /* wichtige angabe, sonst taucht das slideMenu an falscher Position auf */
}

/*
###################
# ypMenu Styles #
###################
*/
.mmContent {
     /* nrmale schrift definieren */
     font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
}

.mmContent ul {
     margin: 0px; padding: 0px;
     list-style: none;
     z-index:2;
     position:relative;
     left:0px; top:0px;
}
.mmContent li {
     padding: 0px; margin: 0px;
}

.menuBackground {
     position:absolute;
     left:0px; top:0px;
     z-index:1;
}

.mmContent li a {
     /* Links bzw. die slideMenü-Elemente definieren */
     display: block;
     color: #222222;
     font-weight:normal;
     font-size: 12px;
     font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
     width: 150px;
     padding: 5px;
     text-decoration: none;
     border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenüElementen */
}

* html .mmContent li a {
     width: 160px;
     width: 160px;
}

/* */
.mmContent li a:link { background: #EAED65; color: #222222; font-size: 12px; }
.mmContent li a:visited { background: #EAED65; color: #222222; font-size: 12px; }

.mmContent li a:hover{ background: #FFFF99; color: #222222; font-size: 12px; }
.mmContent li a:active { background: #EAED65; color: #222222; font-size: 12px; }

.mmContent li a.submenu {
background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }
.mmContent li a.submenu:hover {
background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center; }

/*
##########################################
# ypMenu Styles for our belove IE 5.01 #
##########################################
*/

.mmContentb {
     font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
}

.mmContentb ul {
     margin: 0px; padding: 0px;
     list-style: none;
     z-index:2;
     position:relative;
     left:0px; top:0px;
}
.mmContentb li {
     padding: 0px; margin: 0px;
}

.menuBackground {
     position:absolute;
     left:0px; top:0px;
     z-index:1;
}

.mmContentb li a {
     /* Links bzw. die slideMenü-Elemente definieren */
     display: block;
     width: 150px;
     padding: 5px;
     color: #222222;
     font-weight: normal;
     font-size: 12px;
     font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular;
     text-decoration: none;
     border-bottom: solid 1px #CCCCCC; /* der rand zwischen den MenüElementen */
}

* html .mmContentb li a {
     width: 160px;
     width: 160px;
}

.mmContentb li a:link { background: #EAED65; color: #222222;}
.mmContentb li a:visited { background: #EAED65; color: #222222;}

.mmContentb li a:hover{ background: #FFFF99; color: #222222;}
.mmContentb li a:active { background: #EAED65; color: #222222;}

.mmContentb li a.submenu {
     background: #EAED65 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
     font-size: 12px;
}
.mmContentb li a.submenu:hover {
     background: #FFFF99 url(fileadmin/scripts/ypMenu/pfeil.gif) no-repeat right center;
     font-size: 12px;
}

In der ypMenu.php wird man noch ein paar kleinigkeiten anpassen müssen...

ypMenu.php anpassen...


				  
					0:  
					
<?php
// vertikale fixierung des slideMenu's - relativ zum gecenterten DIV oder TD

var $offsetY = 31; 

// horizontale fixierung des slideMenu's - relativ zum  gecenterten DIV oder TD

var $offsetX = 0; 

// breite des sublevel elements

var $sublevelWidth = 160;

// höhe des sublevel elements 

var $sublevelHeight = 25; 



// padding-abstand rechts und links

var $padding = 5; 

// schriftgröße

var $fontSize = 11; 

// bricht Zeile nach X(14) Zeichen um

var $breakpoint = 14; 

// padding-abstand oben und unten

var $secPadding = 16; 



// font-datei wird fürs berechnen des zeilenumbruchs benötigt

var $fontFile = 'fileadmin/templates/fonts/verdana.ttf'; 

#transparente PNG datei, behebt transparenz-fehler 

#beim Mac IE 5 und Opera - die PNG-Transparenz 

#sollte die gleiche sein wie die der 

#CSS-FILTER-eigenschaft: alpha(opacity)

var $transBg = 'fileadmin/scripts/ypMenu/menu_bg.png'; 
?>


				  					

							1:  
						  

							2:  
						  

							3:  
						  

							4:  
						  

							5:  
						  

							6:  
						  

							7:  
						  

							8:  
						  

							9:  
						  

							10:  
						  

							11:  
						  

							12:  
						  

							13:  
						  

							14:  
						  

							15:  
						  

							16:  
						  

							17:  
						  

							18:  
						  

							19:  
						  

							20:  
						  

							21:  
						  

							22:  
						  

							23:  
						  

							24:  
						  

							25:  
						  

							26:

Hier koennen Sie sich den Quellcode kopieren.

...viel Spass mit dem Menü :)

Ergebnis: Kein Ergebnis vorhanden

Zum Eingabeformular

Jan

02.12.2007 20:07 Uhr

Warum bekomm ich das skript nicht zum laufen???

was ist hier bitte alles falsch?

hat jemand ne ahnung oder hat es schonmal jemand zu laufen gebracht?

Jan

26.11.2007 13:49 Uhr

Funktioniert das hier jetzt oder nicht?

oder hat jemand ein Link von einen Tutorial wo es funktioniert?

Andreas

16.03.2007 19:34 Uhr

Ok ich habs: hatte den aufruf von temp.user_menu.userFunc = user_menu->menuEnd vergessen zuzuweisen.

Andreas

12.03.2007 17:50 Uhr

Hmm... bei mir will das nicht.
Die Dateien (php, css und js) wurden erfolgreich eingebunden, die erste Menue-Ebene wird dargestellt, wenn ich aber einen Menuepunkt hovere der Unerpunkte hat, so bekomme ich im JS-Debugger von FireBug:

ypSlideOutMenus.js line 115 (bzw. 136 gleicher Fehler)
obj has no properties:
if (obj.container) {

...und die Unterpunkte wollen einfach nicht aufklappen, was auch Sinn macht bei dem Fehler, denn so wird "showMenu" ja nicht aufgerufen.

Jemand eine Idee woran das liegen könnte?
Oben auf dieser Seite steht "(ypMenu ist ein Menu wie es auf der Seite hier oben ist)" das trift wohl nicht zu, oder? Auf http://ypslideoutmenus.sourceforge.net/demo/index.html kann man sehen wie die Unterpunkte aufklappen sollten.

Chris

26.12.2006 12:29 Uhr

hallo

funktioniert das ypmenu auch unter typo3 4.0 ?

Alex

05.10.2006 14:21 Uhr

Schade, dass auch hier die Links zu den Dateien nicht funzen - suche schon wie wild :(

mavo

Last 5 Tutorials
1.	Condition mit be_use ...
2.	CLI - Das neue Comma ...
3.	eID Mechanismus
4.	CLI (Shell) Scripte
5.	Spam Protection - Sc ...

TYPO3 Chat hosted by kj187kj.

ypMenu (ypSlideOutMenu) in Typo3