info@netz-gaenger.de       📞 +49 151 / 28859057

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.

Hat dir mein Beitrag geholfen?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Letzte Version vom 5. Juli 2016 von Netzgänger

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.