Menüpunkte bei Klick ausfahren nicht bei Mouseover

[jhonnybravo]

Hallo zusammen!

Habe auf folgender Webseite ein Menü verbaut, welches ich von einer früheren Webseite von mir übernommen habe.

http://marc.messagemode.com/template/index.html

Wie im Betrteff genannt, hätte ich nun gerne, dass sich die Unterpunkte im Menü zu "RIKI" und "CQM" erst beim Klick auf den Menüpunkt öffnen. Nicht wie es jetzt der Fall ist, bei Mouseover. Die Unterpunkte sollen dann aufgeklappt bleiben, bis man einen anderen Menüpunkt auswählt/anklickt.

Stehe leider an dieser Stelle etwas auf dem Schlauch und weiß nicht so recht, wie ich das bewerkstelligen soll.

Wäre schön, wenn mal einer kurz drüber schauen könnte und mir einen Denkanstoß oder Tipp gibt, wie ich dies umsetze.

Vorab vielen Dank für die Hilfe!!

Gruß Jhonny

 

[Maik]

Hi,

wenn die Submenüs beim Anklicken eines Menüpunktes eingeblendet, und beim weiteren Anklicken eines anderen Menüpunktes wieder ausgeblendet werden sollen, ist hierfür Javascript erforderlich, da sich dies mit der Formatierungssprache CSS nicht browserübergreifend umsetzen lässt.

Einen möglichen technischen Lösungsansatz zum Ein- und Ausblenden per Klick kannst du dir in Stu Nicholls' Demo http://www.stunicholls.com/menu/click_through.html anschauen - die Ausrichtung / Positionierung der Submenüs ist in diesem Beispiel nur eine Frage der CSS-Positionierung.

Das Thema verschiebe ich damit ins JS-Forum.

mfg Maik

 

[jhonnybravo]

Ja klar, an falscher Stelle gepostet. Sorry!

Das JavaScript, welches bei mir das Menü auf und zu klappt, sieht wie folgt aus:

<script type="text/javascript"><!--//--><![CDATA[//><!--

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);

//--><!]]></script>

Ich hatte mir jetzt gedacht, ich könnte einfach "sfEls[i].onmouseover" in ".onclick" umwandeln und es funktioniert. Aber das wäre ja auch zu einfach gewesen.

Gibts ne Möglichkeit wie ich das hier in diesem Code schnell umändern kann, oder muss ich jetzt tatsächlich mein ganzes Menü neu aufziehen

Gruß Jhonny

 

[Maik]

Das Javascript, das du da verwendest, ist lediglich dem IE <7 (also IE5.x & IE6) gewidmet, da er die allgemeine :hover-Pseudoklasse (-> li:hover) nicht interpretiert, mit der die Submenüs beim Überfahren des Menüpunktes eingeblendet werden - siehe hierzu den ALA-Artikel Suckerfish Dropdowns.

Von daher wirst du schon ein komplett anderes Script einsetzen müssen, wie es z.B. in meinem verlinkten Demo zum Einsatz kommt.

mfg Maik