Frage stellen
Wer sich schon einmal mit Jquery beschäftigt hat, weiß um die Vorzüge dieses Javascript-Frameworks. Die Bibliothek bietet bereits viele optimierte Methoden zur dynamischen Webseiten-Gestaltung für die eigene Homepage.
Heute zeige ich, wie Ihr mit einfachen Mitteln und ein wenig Programmiererfahrung ein einfaches Ausklappmenu erstellen könnt. Es bleibt Euch natürlich überlassen dieses noch zu verfeinern und weiter zu entwickeln.
Ein dynamisches Ausklapp-Menu könnt Ihr Euch auf dieser Seite zum Thema Deckenleuchten anschauen.
-Hier klappt das Menu auseinander und es erscheinen die einzelnen Menupunkte.-
An Hand eines lauffähigen Beispielcodes demonstriere ich nun ein simples Aufklappmenu.
Als erstes erstellen wir die HTML-Elemente
<ul class=”dyn_menu”>
<li>
<span class=”dyn_menu_head”>Ueberschrift 1 (hier klicken)</span>
<ul>
<li>Testeintrag2</li>
<li>Testeintrag3</li>
<li>Testeintrag4</li>
</ul>
</li>
</ul>
<ul class=”dyn_menu”>
<li>
<span class=”dyn_menu_head”>Ueberschrift 2 (hier klicken)</span>
<ul>
<li>Testeintrag2</li>
<li>Testeintrag3</li>
<li>Testeintrag4</li>
</ul>
</li>
</ul>
<ul class=”dyn_menu”>
<li>
<span class=”dyn_menu_head”>Ueberschrift 3 (hier klicken)</span>
<ul>
<li>Testeintrag2</li>
<li>Testeintrag3</li>
<li>Testeintrag4</li>
</ul>
</li>
</ul>
Hierzu verwende ich verschachtelte UL-Tags.
Wichtig hierbei ist, dass wir dem Eltern-UL-Tag die CSS Klasse „dyn_menu“ zuordnen, diese dient uns später zur eindeutigen Referenzierung. Es können so viele dyn_menu-Ul-Elemente erstellt werden, wie es benötigt wird.
Als nächstes definiere ich im Li-Tag ein Span-Tag, welches die Menu-Überschrift beinhaltet. Das Span-Tag dient mir als Event-Handler-Element für meine spätere Event-Handler-Zuweisung mit Jquery.
Nun muss noch das innere UL-Menu anlegen, dieses Menu wird später auf und zu geklappt.
Anschließend verändere ich mit Hilfe von CSS noch das Aussehen des Span-Tags in dem ich dem Cursor-Attribut den wert „pointer“ zuweise. Somit entsteht für den User der Eindruck, es würde sich um etwas Anklickbares, also um link handeln.
<style type=”text/css”>
.dyn_menu li span{ cursor:pointer; }
</style>
Jetzt kommen wir zur eigentlichen Sache der Jquery-Programmierung.
Hierzu ist es unbedingt notwendig, dass Ihr Euch die Jquery-Bibliothek downloadet und auf Eure Webseite einbindet. Die Jquery-Biblitohek findet Ihr auf der offiziellen Homepage von Jquery.
Nun bindet Ihr die Bibliothek wie folgt ein:
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
Jetzt können wir auf alle Methoden von Jquery zugreifen. Nun definieren wir mit Jquery, was mit unserem Menu eigentlich passieren soll.
<script language=”JavaScript”>
<!–
$(document).ready(function() {
$(”.dyn_menu li ul”).css( ‘display’,'none’);
$(”.dyn_menu li span”).click(function () {
$(this).parent().children(”ul”).slideToggle(”slow”);
});
});
//–>
</script>
Als erstes sehen wir die Zeile
$(”.dyn_menu li ul”).css( ‘display’,'none’);
diese bewirkt, dass unsere Menupunkte mit Hilfe von CSS erst einmal ausgeblendet wird. Dies hat den Sinn, dass wenn Javascript deaktiviert sein sollte, der User trotzdem ein bereits ausgeklapptes Menu vorfindet.
Als nächstes kommen die Zeilen
$(”.dyn_menu li span”).click(function () {
$(this).parent().children(”ul”).slideToggle(”slow”);
});
Hier greifen wir nun mit dem Separator „.dyn_menu li span“ auf unseren Span-Tag-Objekt zu, und weisen dem Click-Event folgende anonyme Funktion zu.
$(this).parent().children(”ul”).slideToggle(”slow”);
Mit „$(this)“ beziehen wir uns auf unser Span-Tag-Objekt anschließend rufen wir die Methode parent() auf. Diese bewirkt, dass wir uns nun auf das Elternelement beziehen, in unserem Fall auf das Li-Tag. Von dort aus beziehen wir uns wiederum auf das Child-Element UL, und weisen diesem die die slideToggle-Methode zu. Diese bewirkt, dass sich das UL-Tag, also unser Menu, auf und zu klappt.
Hier steht noch einmal der komplette lauffähige Code:
