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

Beliebte Artikel

Wie gut ist HostPress, der spezialisierte WP Hoster?

Als WordPress-Entwickler habe ich viel mit Hostern zu tun. Hier liest du meine Erfahrungen zu HostPress und warum ich jetzt selber in einigen Projekten auf den Hosting-Anbieter setze.

Die besten Webhoster im Vergleich

Als WordPress Entwickler kenne ich alle guten Hoster. Hier zeige ich dir die besten WP Hoster und welcher für dich Sinn macht.

Muss WordPress gewartet werden?

Müssen WordPress Sites gewartet werden? Braucht es die regelmäßigen Updates oder kann man sich den Aufwand sparen? Das erkläre ich hier.

Die besten WP Security Plugins

WordPress solltest du immer absichern. Dafür gibt es diverse Plugins, die dich bei den Securitymaßnahmen unterstützen. Meine Empfehlungen.

Die besten Plugins für Auto-Übersetzung

Hier zeige ich dir 4 Plugins, die es ermöglichen WordPress automatisch zu übersetzen. Von wirklich gut bis wirklich schlecht ist alles dabei.

Die besten Plugins für Mehrsprachigkeit

Mit diesen 5 Plugins kannst du WordPress ganz einfach selber mehrsprachig einrichten. Multi-Language Fähigkeit in WP nachrüsten.

Bildnachweise: Freepik - Flaticon

Kommentare

Schreibe einen Kommentar

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