Heute folgt quasi eine Fortsetzung des CSS-Tutorials „horizontales Menü erstellen“ von letzter Woche. Mithilfe von JQuery erweitern wir das horizontale Navigationsmenü mit einer Dropdown-Funktion. Dadurch wird es möglich Untermenüs in unser vorhandenes Menü einzufügen, die bei Bewegung der Maus über einen Navigationseintrag eingeblendet werden.

Um die Funktionalität von JQuery auf der eigenen Seite nutzen zu können, muss man JQuery in seinem HTML Dokument integrieren. Am besten geschieht dies, indem man folgende Zeile in den Header Bereich des Dokuments einfügt:**

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Hierbei nutzt ihr die Google-API, die es erlaubt die Javascript Bibliothek JQuery extern auf eure Seite zu laden. Dadurch muss man nicht mehr die Bibliothek auf den eigenen Server hochladen. Dies kann man alternativ natürlich ebenfalls tun, das würde dann etwa so aussehen:

<script src="js/jquery.min.js"></script>

Dieser Code setzt voraus, dass die minifizierte JQuery Datei im ‚js‘ Verzeichnis eures Webservers installiert ist. Ist die Javascript-Bibliothek erst einmal geladen, kann man damit zahlreiche schöne Effekte realisieren. In diesem Tutorial könnt Ihr euch nun ansehen, wie JQuery einen Dropdown Effekt erzeugen kann.

Das Styling der Navigationsleiste beruht weiterhin auf CSS, wobei ich für die horizontale Darstellung dieses Navigationsmenüs den CSS-Befehl ‚float‘ genutzt habe. Für weitere Informationen dieses sehr nützlichen CSS Features empfehle ich euch folgende Tutorials:

Eine eher theoretische, aber äußerst nützliche Einführung bietet Christopher Stein in seinem Video-Tutorial.

Flame Div gibt in seinem Tutorial einen praktischen Einstieg in der Arbeit mit ‚float‘,