JavaScript Switch Menü

[mi-schi]

Hallo,

ich sitze schon eine Weile daran, dass folgende Menü so mit JavaScript zu bearbeiten, dass es zu einem Switch-Menü wie diese hier werden:
Dynamic Drive DHTML Scripts- Switch Menu
Dynamic Drive DHTML Scripts- Switch Menu II

Das Menü:

<ul id="menue">
    <li><a href="http://www.loessnitzgymnasium-radebeul.de/startseite/">Startseite</a>
</li>
    <li><a href="http://www.loessnitzgymnasium-radebeul.de/">Aktuelles</a>
    <ul>
        <li><a href="http://www.loessnitzgymnasium-radebeul.de/gapp-neuigkeiten/">GAPP Neuigkeiten</a>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/vertretungsplan/">Vertretungsplan</a>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/klausurplan/">Klausurplan</a>
        </li>
    </ul>
</li>
    <li><a href="http://www.loessnitzgymnasium-radebeul.de/termine/">Termine</a>
</li>
    <li><a href="http://www.loessnitzgymnasium-radebeul.de/ueber-die-schule/">über die Schule</a>
    <ul>
        <li><a href="http://www.loessnitzgymnasium-radebeul.de/geschichte/">Geschichte</a>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/leitbild/">Leitbild</a>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/schulprogramm/">Schulprogramm</a>
        <ul>
            <li><a href="http://www.loessnitzgymnasium-radebeul.de/studienarbeit/">Studienarbeit</a></li>
            <li><a href="http://www.loessnitzgymnasium-radebeul.de/gapp/">GAPP</a></li>
        </ul>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/unterrichtszeiten/">Unterrichtszeiten</a>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/faecher/">Fächer</a>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/ag/">AG</a>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/impressionen/">Impressionen</a>
        </li>
    </ul>
</li>

    <li><a href="http://www.loessnitzgymnasium-radebeul.de/lehrer/">Lehrer</a>
    <ul>
        <li><a href="http://www.loessnitzgymnasium-radebeul.de/downloads/">downloads</a>
        </li>

        <li><a href="http://www.loessnitzgymnasium-radebeul.de/lehrer-zitate/">Lehrer-Zitate</a>
        </li>
    </ul>

</li>
    <li><a href="http://www.loessnitzgymnasium-radebeul.de/eltern/">Eltern</a>
</li>
    <li><a href="http://www.loessnitzgymnasium-radebeul.de/foerderverein/">Förderverein</a>
</li>
    <li><a href="http://www.loessnitzgymnasium-radebeul.de/gaestebuch/">Gästebuch</a>
</li>
    <li><a href="http://www.loessnitzgymnasium-radebeul.de/sitemap-suche/">Sitemap/Suche</a>
</li>

    <li><a href="http://www.loessnitzgymnasium-radebeul.de/impressum/">Impressum</a>
</li>
</ul>

Meine Zwei Versuche:

window.onload = menue;
function menue() {
  for (var i = 0; i < document.getElementById('menue').getElementsByTagName("ul").length; i++) {
    document.getElementById('menue').getElementsByTagName('ul')[i].style.display = "none";
  }
document.getElementById('menue').getElementsByTagName("li")[1].onmouseover = over;
document.getElementById('menue').getElementsByTagName("li")[1].onmouseout = out;
document.getElementById('text').innerHTML = document.getElementById('menue').getElementsByTagName("li")[1].getElementsByTagName('li')[2].offsetHeight;
}
function over() {
  for (var i = 0; i < document.getElementById('menue').getElementsByTagName("li")[1].getElementsByTagName("ul").length; i++) {
    document.getElementById('menue').getElementsByTagName("li")[1].getElementsByTagName('ul')[i].style.display = "block";
  }
}
function out() {
  for (var i = 0; i < document.getElementById('menue').getElementsByTagName("li")[1].getElementsByTagName("ul").length; i++) {
    document.getElementById('menue').getElementsByTagName("li")[1].getElementsByTagName('ul')[i].style.display = "none";
  }
}

window.onload = menue;
function menue() {
  for (var i = 0; i < document.getElementById('menue').getElementsByTagName("ul").length; i++) {
    document.getElementById('menue').getElementsByTagName('ul')[i].style.display = "none";
  }
document.getElementById('menue').onmouseover = over;
document.getElementById('menue').onmouseout = out;
}
function over() {
  for (var i = 0; i < document.getElementById('menue').getElementsByTagName("ul").length; i++) {
    document.getElementById('menue').getElementsByTagName('ul')[i].style.display = "inline";
  }
}
function out() {
  for (var i = 0; i < document.getElementById('menue').getElementsByTagName("ul").length; i++) {
    document.getElementById('menue').getElementsByTagName('ul')[i].style.display = "none";
  }
}

Ich bekomme es aber einfach nicht hin. Wenn man auf eine Hauptseite klickt, soll eigentlich ein Cookie erstellt werden, dass soll dann wieder ausgelesen werden und wenn ein bestimmter Werte drin steht, dann sollen die Untermenüs herausfahren. Wenn man wieder auf eine Hauptseite klickt, dann sollen die Unterpunkte der Hauptseite wieder hochfahren und verschwinden.
Wer kein JavaScript aktiviert hat, soll das Menü komplett angezeigt bekommen.
Kann mir jemand helfen?

 

[morl]

Ich hab hier mal was für dich, habs allerdings nur im Firefox getestet.
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JS-Menu</title>
 </head>
 <body>
  <ul id="menu">
   <li><a href="http://www.loessnitzgymnasium-radebeul.de/startseite/">Startseite</a></li>
   <li>
    <a href="http://www.loessnitzgymnasium-radebeul.de/">Aktuelles</a>
    <ul>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/gapp-neuigkeiten/">GAPP Neuigkeiten</a></li>			
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/vertretungsplan/">Vertretungsplan</a></li> 
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/klausurplan/">Klausurplan</a></li>
    </ul>
   </li>
   <li><a href="http://www.loessnitzgymnasium-radebeul.de/termine/">Termine</a></li>
   <li>
    <a href="http://www.loessnitzgymnasium-radebeul.de/ueber-die-schule/">über die Schule</a>
    <ul>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/geschichte/">Geschichte</a></li>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/leitbild/">Leitbild</a></li>
     <li>
      <a href="http://www.loessnitzgymnasium-radebeul.de/schulprogramm/">Schulprogramm</a>
      <ul>
       <li><a href="http://www.loessnitzgymnasium-radebeul.de/studienarbeit/">Studienarbeit</a></li>
       <li><a href="http://www.loessnitzgymnasium-radebeul.de/gapp/">GAPP</a></li>
      </ul>
     </li>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/unterrichtszeiten/">Unterrichtszeiten</a></li>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/faecher/">Fächer</a></li>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/ag/">AG</a></li>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/impressionen/">Impressionen</a></li>
    </ul>
   </li>
   <li>
    <a href="http://www.loessnitzgymnasium-radebeul.de/lehrer/">Lehrer</a>
    <ul>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/downloads/">downloads</a></li>
     <li><a href="http://www.loessnitzgymnasium-radebeul.de/lehrer-zitate/">Lehrer-Zitate</a></li>
    </ul>
   </li>
   <li><a href="http://www.loessnitzgymnasium-radebeul.de/eltern/">Eltern</a></li>
   <li><a href="http://www.loessnitzgymnasium-radebeul.de/foerderverein/">Förderverein</a></li>
   <li><a href="http://www.loessnitzgymnasium-radebeul.de/gaestebuch/">Gästebuch</a></li>
   <li><a href="http://www.loessnitzgymnasium-radebeul.de/sitemap-suche/">Sitemap/Suche</a></li>
   <li><a href="http://www.loessnitzgymnasium-radebeul.de/impressum/">Impressum</a></li>
  </ul>
 </body>
</html>

JAVASCRIPT:

/**
 * Wait untill the document is completely loaded to start modifying the menu.
 * Maybe it's better to put this code directly after the menu to prevent a
 * "flickering" menu.
 */
window.onload = function() {
  // initialize cookie data array...
  if (!document.cookie) {
    var cookie_data = new Array();
  }
  // ...or retrieve data from cookie
  else {
    var cookie_data = document.cookie.split(/,/);
  }
  // get menu ul-element
  var menu = document.getElementById('menu');
  // get all li elements contained in menu
  var menu_items = menu.getElementsByTagName('li');
  // loop through all menu li-items
  for (var i = 0; i < menu_items.length; i++) {
    // save/load menu item state
    cookie_data[i] = cookie_data[i] ? cookie_data[i] : 'hidden';
    // get link
    var link = menu_items[i].getElementsByTagName('a')[0];
    // get submenu ul-element
    var submenu = menu_items[i].getElementsByTagName('ul');
    // abort if there is no submenu ul-element
    if (!submenu || submenu.length < 1 || !submenu[0]) {
      continue;
    }
    // add click event to link
    link.onclick = toggleSubmenu;
    // replace link uri
    link.href = '#';
    // set ids for further use in click handler function
    link.id = 'trigger_' + i;
    submenu[0].id = 'submenu_' + i;
    // show the submenu...
    if (cookie_data[i] == 'visible') {
      submenu[0].style.display = 'block';
    }
    // ...or hide the submenu
    else {
      submenu[0].style.display = 'none';
    }
  }
  // create cookie and assign cookie data
  if (!document.cookie) {
    document.cookie = cookie_data.toString();
  }
}
/**
 * Click handler for each triggering link of the menu
 *
 * @ return boolean
 */
function toggleSubmenu() {
  // exract submenu id from triggering link
  var id = parseInt(this.id.replace(/trigger_/, ''));
  // get submenu ul-element
  var submenu = document.getElementById('submenu_' + id);
  // abort if there is no submenu
  if (!submenu) {
    return false;
  }
  // retrieve cookie data
  var cookie_data = document.cookie.split(/,/);
  // toggle submenu visibility and update cookie data
  if (submenu.style.display == 'none') {
    submenu.style.display = 'block';
    cookie_data[id] = 'visible';
  } else {
    submenu.style.display = 'none';
    cookie_data[id] = 'hidden';
  }
  // assign modified cookie data
  document.cookie = cookie_data.toString();
  return false;
}

Du kannst den JavaScript-Code in eine externe Datei auslagern um das ganze lesbarer zu halten. Besser wäre es vielleicht du kapselst die Initialisierung nicht als anonyme Funktion in den onLoad-Event des Dokumentes sondern in eine ganz normale Funktion. Den Aufruf dieser Funktion platzierst du direkt nach dem schliessenden ul-Tag im Dokument. Somit wirkt das Menü nicht unruhig wenn die einzelnen Menüpunkte ein- bzw. ausgeblendet werden.