Einfaches Drop-Down Menü mit jQuery

Wer denkt, dass man für eine Drop-Down Navigation ein großes jQuery Plugin braucht, der liegt falsch. Ein solches Menü lässt sich nämlich mit weniger als 10 Zeilen JavaScript-Code realisieren. Zwar ist dafür erst einmal nur eine Ebene möglich, aber es soll ja einfach und schnell gehen.

Demo

Der HTML-Code

Am Anfang steht der HTML-Code. Erklären muss ich dazu hoffentlich nichts. Der größte Teil ist langweilige Schreibarbeit.

View Code XML

<div id="nav">
    <ul>
	    <li><a href="index.html">Home</a></li>
	    <li>
	        <a href="aktuelles.html">Aktuelles</a>
                <ul>
	            <li><a href="news.html">News</a></li>
	            <li><a href="veranstaltungen.html">Veranstaltungen</a></li>
	            <li><a href="archiv.html">Newsarchiv</a></li>
                </ul>
            </li>
	    <li>
	        <a href="m3.html">Menüpunkt 3</a>
                <ul>
	            <li><a href="u1.html">Unterpunkt 1</a></li>
	            <li><a href="u2.html">Unterpunkt 2</a></li>
	            <li><a href="u3.html">Unterpunkt 3</a></li>
	            <li><a href="u4.html">Unterpunkt 4</a></li>
	            <li><a href="u5.html">Unterpunkt 5</a></li>
            </ul>
        </li>
    </ul>
</div>

Der CSS-Code

Ob ihr es nun glaub oder nicht, aber jetzt kommt der schwierigste Teil der Drop-Down Navigation. Bis man hier das gewünschte Aussehen erreicht hat, vergeht schon ein wenig Zeit, aber das wäre bei jedem anderen Plugin auch nicht anders.

View Code CSS

#nav {}
#nav ul{ list-style-type:none; margin:0; padding:0; }
#nav li { float:left; padding:0; margin:0;}
#nav li a { width:150px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; }
#nav li a:hover { color:#f00; }
#nav ul ul { display:none; position:absolute; z-index:999; }
#nav li li { float:none; }
#nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0; }
* html li li { display:inline; } /* IE6 Bugfix... */

Der JavaScript-Code

So, und hier beginnt der magische Teil.

View Code JAVASCRIPT

$(document).ready(function() {
	$("#nav li:has(ul)").hover(function(){
		$(this).find("ul").slideDown();
	}, function(){
		$(this).find("ul").hide();
	});
});

Durch das Hover-Event, das wir dem li-Tags zuweisen, haben wir zwei Funktionen, die erst beim Mouseover und beim Mouseout ausgeführt werden. Der Unterschied zu den normalen Mouseover und Mouseout Events ist, dass die zweite Funktion erst ausgeführt wird, wenn die erste beendet ist. So entstehen keine merkwürdigen Effekte, wenn die Mouse zu schnell bewegt wird.
Vorher sollte im Head natürlich jQuery eingebunden werden:

View Code XML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Und das war’s auch schon. Kein großes Plugin, keine große Konfiguration, dafür ist der Code schnell eingebunden und es funktioniert in jedem bekannten Browser.

UPDATE 27.05.2011: Funktioniert nun auch im IE6 und IE7.

13 Kommentare zu “Einfaches Drop-Down Menü mit jQuery”

Hey,.. thanks für das Script. Funktioniert eigentlich top, allerdings,.. und wie sollte es auch anders sein, funktioniert es nich im IE(9)

Any Idears!?

Vielen Dank für diese super schlichte Lösung. So kann man das Menü einfach von Grund auf und nach eigenem Geschmack gestalten.

Doch, bei mir fuktioniert es auch im IE 9… Denke aber, dass es Probleme mit den Vorgägerversionen gibt.

Ich meine, man könnte auch die Div- Box weglassen, und direkt die folgende ul formatieren wie die Div-Box. Dem entsprechen die CsS und das Script bearbeiten.

es funktioniert, leider kann ich den untermenüpunkten bei hover bzw. mouseover weder hintergrundfarbe noch -bild zuweisen, z.b.
#nav li li a:hover { background-color: #ddd; } klappt irgendwie nicht.

Hallo!
Schaff ich es mit diesem Menü noch eine dritte Ebene zu erstellen??

Mfg, Christina

Wenn irgendein Schnickschnack bei deaktiviertem Javascript nicht funktioniert, ist das ja noch zu verkraften. Aber eine Navigation sollte immer funktionieren, was dieses Script leider nicht tut.

LG Harry

Zur Vermeidung von offen bleibenden Submenüs bei schneller Mausbewegung fügt man vor dem hide() noch einen stop() ein:
…
$(this).find(„ul“).stop(true,true).hide();
…

Ich finde das script gut. Man findet einenEinstieg in di Menuesteuerung. Harrys Meckerei kann ich nicht nachvollziehen. Wenn ein Code auf Java Script basiert, sollte das auch zugelassen werden. Bringe ein besseres Beispiel. Vielleicht nur mi CSs oder serverbasiert mit PHP.
Danke für den Denkabstoss

ZUR INFO:
wer das ganze unter WordPress verwenden möchte ändert die erste Zeile wie folgt:

jQuery(document).ready(function($){

sonst kommt das script sich mit WordPress in die Quere… 😉

Ein sehr schönes Menü!
Wir bekomme ich es hin, das es vertikal angeordnet wird? Also das Hauptmenü und die Untermenüs dann danaben geöffnet werden?

Ich habe einges versucht, aber dann verschiebt sich das Menü komplett. Hat jemand einen Rat?

Wenn man versucht, das div irgendwo absolut zu platzieren, geht die ganze Funktionalität flöten.

Wow vielen dank.
Hat Super geklappt. Genau das wonach ich gesucht habe!

Der HTML-Code

Der CSS-Code

Der JavaScript-Code

13 Kommentare zu “Einfaches Drop-Down Menü mit jQuery”

Schreibe einen Kommentar