Horizontales Untermenü in WordPress erstellen

Dropdown Menüs kennt jeder und sind relativ einfach mit CSS zu lösen. Manchmal möchte man aber auch gerne ein feststehendes horizontales Untermenü verwenden. Wie das geht, zeige ich in diesem Artikel.

Horizontales Untermenü in WordPress erstellen

Was ist ein horizontales Untermenü?

Ein horizontales Untermenü wird direkt unter dem Hauptmenü angezeigt. In der folgenden Lösung bleibt dieses bestehen, solange man sich in der entsprechenden Hauptkategorie bewegt.

Wie erstellt man ein horizontales Untermenü in WordPress?

Ich könnte euch jetzt den Code von vorne bis hinten erklären. Da das aber lange dauern würde und sowieso nur Leute mit CSS-Kenntnissen nach solchen Lösungen suchen sollten, lass ich das an dieser Stelle einfach.

In der Theme-CSS-Datei legt man zum Beispiel folgende Definitionen an:

#mainmenu {margin: 9px 0 0 -10px;}
#mainmenu a {text-align: left; }
#mainmenu ul li.active > a {}
#mainmenu ul {list-style: none;}
#mainmenu li {float: left; padding: 0 12px 10px; height: 20px; line-height: 29px;}
#mainmenu > ul li:hover > ul {display: block; width: 100%;}
#mainmenu > ul > li > ul {padding-top: 1px;}
#mainmenu > ul > li ul { position: absolute; top: 30px; left: 0; width: 180px; width: 100%;}
#mainmenu > ul > li ul li { line-height: 150%;float: left;}
#mainmenu > ul > li ul a {display: block; padding: 6px 15px;}
#mainmenu > ul > li > ul > li ul {left: 220px; top: 0; padding-left: 1px;} 
#mainmenu { position: relative; }
#mainmenu ul ul { position: absolute; top: 2em; left: 0; }
.sub-menu {display: none;}
.current-menu-item > .sub-menu {display: block;}
.current-menu-parent > .sub-menu {display: block;}

Damit diese CSS-Definitionen auch greifen, habe ich folgenden Menüaufruf in der header.php des Themes verwendet:

<div id="mainmenu">
<?php
if (has_nav_menu( 'header' )) {
//Menu anzeigen
wp_nav_menu( array('menu' => 'header', 'items_wrap' => '<ul id="hauptmenu">%3$s</ul>' ));
}
?>
</div>

Fazit: Optisch lässt sich dieses Menü natürlich beliebig gestalten. Wer ein solches stehendes Menü nutzen möchte, sollte mit der genannten Lösung aber einen sehr guten Einstiegspunkt haben.

Letzte Version vom 5. Juli 2016 von Netzgänger
Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt