Horizontales Menü
Beispiel
Beispiel (Gosaunet)
TS
marks.MENU = HMENU marks.MENU { special = directory special.value = 850 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
#nav, #nav ul { float: left; width: 86em; list-style: none; line-height: 1em; background: white; color: #000; font-weight: bold; padding: 0; border: solid #eda; border-width: 1px 0; margin: 0 0 1em 0; } #nav a { display: block; width: 10em; color: #7C6240; text-decoration: none; padding: 0.25em 0em; } #nav a.menuparent { background: url(arrow.gif) no-repeat 90% 40%; } #nav li { float: left; padding: 0; width: 10em; } #nav li ul { position: absolute; left: -999em; height: auto; width: 14em; font-weight: normal; border-width: 0.25em; margin: 0; } #nav li li { width: 14em } #nav li ul a { width: 14em; padding-left: 1em; } #nav li ul ul { margin: -1.75em 0 0 14em; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { background: #eda; color: white; }
JS
sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);




