Drop-Down-Menüs sind beliebt, weil man damit die Links zu ›tiefen‹ Seiten auf wenig Platz gut unterbringen kann und die Leser sich nicht erst durch den Navigationsbaum hangeln müssen, bis sie zur gesuchten Seite finden.

Das fertige Drop-Down-Menü

Beispiele dafür gibt es genug, Wordpress-PlugIns ebenfalls. Ich will hier an einem Beispiel zeigen, wie man so ein plugin-generiertes DropDown-Menü in ein mit dem Framework Thesis realisierten Blog einbaut – ohne im Quelltext von Thesis rumfummeln zu müssen.

Suckerfish zwar ist sehr beliebt, ich habe mich hier aber für das auf dem Ultimate-CSS-only-Menü von Stu Nichols basierende PlugIn von Zackdesign entschieden, weil es ohne Javascript auskommt.

Die Installation des PlugIns funktioniert so wie immer. Nach dem Download entpackt man das ZIP-Archiv, lädt die PlugIn-Datei nach Anleitung in das PlugIn-Verzeichnis auf den Server und aktiviert das PlugIn im Admin-Bereich von Wordpress. Zusätzlich kopiert man den kompletten Inhalt der beigepackten Datei menu.css in die Datei custom.css von Thesis und lädt sie ebenfalls auf den Server (Verzeichnis custom im Thesis-Ordner.

Bei normalen Themes würde man jetzt wie in der Anleitung des PlugIns beschrieben den PHP-Schnipsel

<?php wp_css_dropdownmenu(); ?>

an der Stelle in den Quelldateien einfügen, an der man das Menü später haben will. Bei Thesis geht es etwas anders, nämlich über die ausgelagerte Datei custom_functions.php, die ebenfalls im Verzeichnis custom von Thesis liegt.

Dort knipst man zunächst mal mit der Zeile

remove_action('thesis_hook_before_header', 'thesis_nav_menu');

die vorhandene Navigationsleiste aus. Und mit der Zeile

add_action('thesis_hook_before_header', 'wp_css_dropdownmenu');

schaltet man die neue Drop-Down-Navigation an der selben Stelle an. Und das war’s dann auch schon.

Wer die Navigationsleiste lieber unter dem Header statt darüber hat, der verwendet den Thesis-Hook thesis_hook_after_header

add_action('thesis_hook_after_header', 'wp_css_dropdownmenu');

Thesis rockt! Get Thesis · Live Demo

{ 0 comments }