Vertikales Menü mit GMENU in Ebene 1
Dieses Menü ist vorerst nur valide gemäß xhtml Trans 1.0
Beispiel
TS
marks.MENU = HMENU marks.MENU { special = directory special.value = 158 entryLevel = 1 1=GMENU 1 { wrap = <ul id="nav">|</ul> expAll = 1 noBlur = 1 NO = 1 NO { allWrap = <li>|</li> transparentBackground = 1 XY=135,24 10=TEXT 10 { text.field=title offset=1,20 fontColor=#000E31 fontFile=fileadmin/fonts/madfont.ttf fontSize=11 } } ACT <.NO ACT.10.fontColor = red IFSUB <.NO IFSUB.allWrap = <li class="menuparent">| IFSUB.5 = IMAGE IFSUB.5.file = fileadmin/listmenu/right_gmenu_no.gif ACTIFSUB <.IFSUB ACTIFSUB.5.file = fileadmin/listmenu/right_gmenu_act.gif ACTIFSUB.10.fontColor = red RO <.NO RO.10.fontColor = blue ACTRO <.RO ACTIFSUBRO <.RO ACTIFSUBRO.5 = IMAGE ACTIFSUBRO.5.file = fileadmin/listmenu/right_gmenu_actifsubro.gif IFSUBRO <.ACTIFSUBRO } 2 = TMENU 2 { wrap = <ul>|</ul></li> expAll = 1 noBlur = 1 NO = 1 NO.allWrap = <li>|</li> ACT <.NO ACT.allWrap = <li class="nav2act> |</li> IFSUB = 1 IFSUB.allWrap = <li class="menuparent">| ACTIFSUB = 1 ACTIFSUB.allWrap = <li class="menuparent">| } 3 <.2 }
CSS
body { font-family: verdana, arial, helvetica, serif; font-size: 82.5%; color: black; background: white; } ul#nav, ul#nav ul { margin: 0; padding: 0; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; background: #fff; /* IE6 Bug */ color: black; font-size: 100%; } ul#nav li { position: relative; list-style: none; } ul#nav li a { display: block; text-decoration: none; color: #777; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul#nav li { float: left; height: 1%; } * html ul#nav li a { height: 1%; } /* End */ ul#nav ul { position: absolute; display: none; left: 149px; /* Set 1px less than menu width */ top: 0; } ul#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ ul#nav li:hover ul ul, ul#nav li:hover ul ul ul, ul#nav li.over ul ul, ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */ ul#nav li:hover ul, ul#nav li li:hover ul, ul#nav li li li:hover ul, ul#nav li.over ul, ul#nav li li.over ul, ul#nav li li li.over ul { display: block; } /* The magic */ ul#nav li ul li.menuparent { background: transparent url(right_gmenu_2.gif) right center no-repeat; } ul#nav li.menuparent:hover, ul#nav li.over { background-color: #f9f9f9; } ul#nav li a:hover { color: #E2144A; } .nav2act { font-weight: bold; background:pink; } ul#nav li ul li a { padding:5px 0px; padding-left:10px; } ul#nav li ul li a:hover { xbackground:#eee; }
JavaScript
function IEHoverPseudo() { var navItems = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<navItems.length; i++) { if(navItems[i].className == "menuparent") { navItems[i].onmouseover=function() { this.className += " over"; } navItems[i].onmouseout=function() { this.className = "menuparent"; } } } } window.onload = IEHoverPseudo;




