navigation – DevOps Blog noll.nrw

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.