ypMenu (ypSlideOutMenu) in Typo3 - typo3-tutorials.org

Author:

Kein Author vorhanden

Author E-Mail:

Keine E-Mail vorhanden

Eingetragen:

14.10.2005 - 15:37

Quelle:

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

Klicks:

4416

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

Kommentarfunktion derzeit deaktiviert!

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