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