CSS-Menü mit JavaScript unterstützen

[Jeena Paradies]

Hallo,

Hi, ich komm nicht so ganz mit deinem Script zurecht und hab jetzt auch nicht wirklich die Zeit dafür, aber ich hatte das gleiche mal mit dieser funktion ein bischen anders gelöst:

function navi() {  
 if(document.getElementById("navi")) {  
  var li = document.getElementById("navi").getElementsByTagName("li");  
  for(var i=0; i<li.length; i++) {  
   li[i].onmouseover = function() {  
    var those = this;  
    if(typeof those.timeout === "undefined") those.timeout = false;  
    clearTimeout(those.timeout);  
    those.timeout = setTimeout( function() {  
     if(those.className.search('(^|\\s)show(\\s|$)') === -1) those.className += " show";  
    }, 100 );  
   }  
   li[i].onmouseout = function() {  
    var those = this;  
    if(typeof those.timeout === "undefined") those.timeout = false;  
    clearTimeout(those.timeout);  
    those.timeout = setTimeout( function() {  
     those.className = those.className.replace(new RegExp('(^|\\s)show(\\s|$)'), RegExp.$1+RegExp.$2);  
    }, 400 );  
   }  
   li[i].onfocus = li[i].onmouseover;  
   li[i].onblur = li[i].onmouseout;  
  }  
 }  
}

Der HTML-Code dazu sieht so aus:

<div id="navi">
 <ul>
  <li><a href="#">foo</a></li>
  <li><a href="#">bar</a>
   <ul>
    <li><a href="#">baz</a></li>
   </ul>
</div>

Das kann aber auch beliebig tief verschachtelt werden.

ich mache das dann so, dass ich dann mit CSS alles ab dem zweiten Level mit display: none; verstecke, aber wenn es die klasse "show" hat, dann zeige ich es (entsprechen positioniert) dennoch an.

Man könnte das jetzt dann so bauen, dass man das genau so auch mit puren CSS baut und die Klasse "show" genau so anwendet wie :hover, dieses aber bei eingeschaltetem JavaScript unterdrückt.

Jeena