Navigation

[Gerold Kumpfhuber]

Hallo!

Ich suche eine Javascript Lösung für einen Navigationsbaum. Mit onMouseOver soll ein Untermenü aufscheinen das verschiedene Links enthält die bei onMouseOver wiederum ein Untermenü aufscheinen lassen. Wer hat diesbezüglich ein brauchbares Gerüst.

Vielen Dank und Liebe Grüße aus Wien
Gerold

[Klaus Bolwin]

Hallo!

Ich suche eine Javascript Lösung für einen Navigationsbaum. Mit onMouseOver soll ein Untermenü aufscheinen das verschiedene Links enthält die bei onMouseOver wiederum ein Untermenü aufscheinen lassen. Wer hat diesbezüglich ein brauchbares Gerüst.

Vielen Dank und Liebe Grüße aus Wien
Gerold

Zunächst der HTML-Teil, es handelt sich um einen Menue-(Haupt)link und ein div welches das Submenue enthält. alles ist wiederum in einem div enthalten:

<div id="m6" onmouseover="changeMenu(this,'block');" onmouseout="if (document.all)
       {if (!this.contains(event.toElement)) changeMenu(this,'none');}

else if (document.getElementById)
       {if (!containsNN6(this, event.relatedTarget)) changeMenu(this,'none');}">

<a class="menu" href="./kontakt.shtml" onmouseover="changeImg(this,'./pics/k2.gif')"
onmouseout="changeImg(this,'./pics/k1.gif')" title=""><img src="pics/k1.gif" alt="" />
Kontakt</a><br />

<div class="submenu">
      <a class="menu" href="./feedback.shtml" onmouseover="changeImg(this,'./pics/k2.gif')"
      onmouseout="changeImg(this,'./pics/k1.gif')" title="Feedback-Formular"><img src="pics/k1.gif" alt="" />
      Kontaktformular</a><br />

<a class="menu" href="./gastb.shtml" onmouseover="changeImg(this,'./pics/k2.gif')"
      onmouseout="changeImg(this,'./pics/k1.gif')" title="Zum Gästebuch"><img src="pics/k1.gif" alt="" />
      Gästebuch</a><br />

<a class="menu" href="mailto:[e-mail]" onmouseover="changeImg(this,'./pics/k2.gif')"
      onmouseout="changeImg(this,'./pics/k1.gif')" title=""><img src="pics/k1.gif" alt="" />
      E-mail client</a><br />

</div></div>

Nun der Javascript Teil:

old = document.URL;

function changeImg(element,image)
{
if (element!=old) element.firstChild.src = image;
}

function containsNN6 (container, containee)
         {
         var isParent = false;
         do {
         if ((isParent = container == containee))
         break;
         containee = containee.parentNode;
         }
         while (containee != null);
         return isParent;
         }

function changeMenu(element,wert)
         {
         element.lastChild.style.display = wert;
         }

[Gerold Kumpfhuber]

Lieber Klaus,

vielen Dank und Liebe Grüße aus Wien

Gerold

[Susanne]

Hallo Klaus,

Dein Script gefällt mir auch sehr gut - war gerade ebenfalls auf der Suche nach so etwas. Ich habe es mit entsprechenden images getestet und auch ein stylesheet für die <divs> angebunden. Allerdings.... wo müßte ich was im javascript-Teil anpassen, damit die Navigation auch im Netscape 7 auf- und zuklappt?

Viele Grüße aus dem Ruhrpott
Susanne