✔ Horizontales Dropdown Menü

[Maik]

Weiß jemand wie ich den Oberpunkt markiert lasse, sodass der grüne Rahmen stehen bleibt, auch wenn ich mit der Maus die Dropdown runterfahre.

#naviEP li a:hover, #naviEP li:hover a, #pillmenu li a#active_menu-nav {
	background: transparent url(../images/t_menu_hover_small.png) no-repeat top left;	
}

Oder wie kann ich nun realisieren, dass sich die Dropdown nicht sofort öffnet, sondern erst nach einer kurzen Verzöferung, brauch ich dazu unbedingt Javascript?

Jo, die Formatierungssprache stellt nunmal keine Mittel für zeitverzögerte Aktionen bereit.

mfg Maik

 

[fschwarz]

Und kann man das irgendwie kombinieren? Was ist dafür nötig? Ja Javascript irgendwie in der Index einbinden...aber gibts für sowas irgendwie ein Codeschnipsel ?

 

[Maik]

http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout

Ein gebrauchsfertiger Codeschnipsel ist mir da nicht bekannt.

Da wirst du wohl selbst Hand anlegen, und dir eine entsprechende Funktion schreiben müssen.

mfg Maik

 

[Maik]

Im Javascript-Forum sollte sich hierzu auch das eine oder andere Code-Beispiel finden lassen.

mfg Maik

 

[Maik]

Im Javascript-Forum sollte sich hierzu auch das eine oder andere Code-Beispiel finden lassen.

Und, schon die Suche gestartet, und was gefunden?

Ich hab jetzt auf die Schnelle mit dem Suchbegriff "setTimeout()" das hier ausgegraben: http://www.tutorials.de/forum/javascript-ajax/352835-jquery-menue-nach-1-sekunde-oeffnen.html, sowie http://www.tutorials.de/forum/javascript-ajax/348090-drop-down-menue-zeitverzoegert-anzeigen.html

mfg Maik

 

[fschwarz]

So ich bins nochmal...ich hab lange gesucht, aber irgendwie komme ich ned drauf. Immer wenn ich auf ein Oberpunkt mit der Maus gehe, dann klaptt sich das Menü mit den Unterpunkten auf. Wähle ich jetzt nun eines dieser Unterpunkte und klicke es an, geht es auch. Nur wenn ich dann nochmal das Menü aufklappe, dann wird eine komische Grafik über den aktiven Menüunterpunkt gelegt, ich möchte aber nur, dass der eine andere Schriftfarbe bekommt.
Wie gehe ich vor ? Hier nochmal der Link und eine Grafik dazu: http://fs.works.iwsystems.de/index.php?option=com_content&view=article&id=49&Itemid=86
In dem Beispiel im Menü: Leistung -->Beratung

 

[Maik]

Hi,

wenn dir in deinem eigenen und selbsterstellten Stylesheet der Überblick abhanden gekommen ist, die Ursache der unerwünschten Formatierung zu lokalisieren, ist dir hierbei Firebug behilflich, wie auch bei anderen analytischen Fragen.

Verantwortlich ist der nachfolgende Deklarationsblock, da du den ID-Bezeichner #active_menu in der Hauptmenü-, als auch in der Untermenüebene verwendest, was in dieser Form nicht den Regeln entspricht, da er im Dokumentbaum nur einmalig vergeben werden darf - siehe hierzu die entsprechende HTML-Attributreferenz http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name.

Gleiches gilt in diesem Zusammenhang für den ID-Bezeichner #sub deiner einzelnen Submenüs.

#naviEP li a#active_menu, #naviEP li a#active_menu:hover {
	background: transparent url(../images/t_menu_bg_small.png) no-repeat top left;
}

Wie du vorgehst?

Besagten ID-Bezeichner des aktuell geöffneten Links in der Submenüebene durch einen anders lautenden ersetzen, damit obige Regel vom Browser dort nicht mehr angewendet wird, und für diesen die gewünschte Formatierung definieren - fertitsch.

mfg Maik

 

[fschwarz]

Aha... z.B. so

#naviEP li a#active_menu2, #naviEP li a#active_menu2:hover {
	background: transparent url(../images/t_menu_bg_small.png) no-repeat top left;
}

Dann wird der Grafikfehler nicht mehr angezeigt, allerdings verschwindet dann auch wieder die Umrandung des aktiven Oberpunkts, die ja eigentlich noch da bleiben soll...

 

[Maik]

Naja, die bestehende Regelmenge kannst / sollst du weiterhin für die obere Menüebene nutzen, und unter Verwendung eines anders lautenden ID-Bezeichner eine weitere definieren, die für den aktiven Menüpunkt im Untermenü gilt, und besagtes Hintergrundbild nicht enthält.

<div id="naviEP">
    <ul id="nav" class="dropdown dropdown-horizontal">
        <li><a href="#">Obermenüpunkt</a></li>
        <li><a href="#" id="active_topMenu">Aktiver Obermenüpunkt</a>
            <ul>
                <li><a href="#">Untermenüpunkt</a></li>
                <li><a href="#" id="active_subMenu">Aktiver Untermenüpunkt</a></li>
            </ul>
        </li>
    </ul>
</div>

/* Obere Menüebene */
#naviEP ul#nav li a#active_topMenu, #naviEP ul#nav li a#active_topMenu:hover {
	background: transparent url(../images/t_menu_bg_small.png) no-repeat top left;
}
/* Untere Menüebene */
#naviEP ul#nav li ul li a#active_subMenu, #naviEP ul#nav li ul li a#active_subMenu:hover {
	color: #ffff00;
}

mfg Maik