Archiv für die Kategorie „Tutorials“

Dynamisches Ausklapp-Menu mit Jquery

Donnerstag, 20. Mai 2010

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 anschauen.

dynamisches Ausklappmenu

-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

Clevere CSS Navigationen

Dienstag, 27. Oktober 2009

Einer der wichtigsten Teile einer Website ist sicherlich die Navigation und diese ist meistens auch am aufwendigsten zu erstellen. Deshalb ist es besonders wichtig ein übersichtliches und semantisch sauber programmiertes Menü zu erstellen, welches die eine einfache Navigation ermöglicht und den Besucher schnell zu dem gewünschten Ziel führt. Eine Möglichkeit, die Stylesheets bieten sind Listen (UL / LI) um solche Menüs zu erstellen. Hier sind ein paar Beispiele:

Magix: CSS Dropdown Menü

Magix Navi
Magix verfügt über eine große Anzahl von Links und verpackt diese in einer optisch sehr ansprechenden und logisch aufgebauten Drop-Down-Navigation. Die fünf Oberkategorien zeigen jeweils verschiedene Unterkategorien, welche alle mit einem Hover-Effekt versehen sind. Dieser Effekt zeigt eindeutig wo man sich befindet und erleichtert so die Navigation.