Vertikales TMENU
Beispiel
TS
marks.MENU = HMENU marks.MENU { 1 = TMENU 1 { expAll = 1 wrap = <ul id="nav">|</ul> noBlur = 1 NO = 1 NO.wrapItemAndSub = <li>|</li> IFSUB = 1 IFSUB.wrapItemAndSub = <li class="menuparent">|</li> ACTIFSUB < .IFSUB } 2 < .1 2.wrap = <ul>|</ul> 3 < .2 4 < .2 }
CSS
body { font-family: verdana, arial, helvetica, serif; font-size: 62.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.menuparent { background: transparent url(arrow.gif) right center no-repeat; } ul#nav li.menuparent:hover, ul#nav li.over { background-color: #f9f9f9; } ul#nav li a:hover { color: #E2144A; }
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;




