Responsives Navigationsmenü automatisch erstellen lassen
Nachdem ich lange nix mehr zu meinem Lieblings-Blogsystem WordPress geschrieben habe, gibt es heute mal wieder einen Praxistipp für die Theme-Entwickler unter euch.
Ein kleiner aber praktischer Codeschnipsel um automatisch aus einem WordPress-Menü eine Dropdown-Liste zu erzeugen, die dann als Navigation in einem responsiven Design genutzt werden kann.
Auf eine Einführung zum Thema Responsive Design verzichte ich an dieser Stelle, wer nicht weiß was das ist, und warum er das vielleicht haben will, der kann sich über den entsprechenden Wikipedia-Artikel einen schnellen Eindruck von dem Konzept verschaffen.
Wenn man eine einfach zu bedienende responsive Navigation erstellen möchte, dann halte ich Dropdown-Listen dafür sehr geeignet. Das Konzept dieses Elements ist jedem Nutzer vertraut, wird auf entsprechenden Ausgabegeräten vernünftig, aber zugegebenermaßen nur bedingt anpassbar, angezeigt und erfordert für uns Entwickler wenig Aufwand.
Die Seite „Essener Ruhrperlen“ nutzt dieses Konzept beispielsweise, um eine durchaus größere Anzahl an Navigationselementen übersichtlich abzubilden. Das geht natürlich auf klein gezogenen Browser-Fenstern auf Desktop-Systemen aber auch auf Tablets oder Smartphones, wie die Screenshots zeigen.
Anzeige des Menüs in einem verkleinerten Browser-Fenster.
Anzeige auf einem Smartphone.
Kommen wir zum relativ übersichtlichen Code.
<div class="mobile_navi">
<select style="display: none; opacity: 0;" onChange="self.location=this.options[this.selectedIndex].value">
<option value="#">Gehe zu...</option>
<?php
$menu_items = wp_get_nav_menu_items(212);
foreach((array)$menu_items as $key => $menu_item )
{
$ancestor = $menu_item->post_parent;
$title = $menu_item->title;
while($ancestor != 0)
{
$title = '-- '.$title;
$ancestor = get_post($ancestor)->post_parent;
}
$url = $menu_item->url;
$menu_list .= '<option value="' . $url . '">' . $title . '</option>';
}
echo $menu_list;
?>
</select>
</div>
Zunächst erstellen wir ein HTML-Grundgerüst, das dann die Elemente aufnimmt. Wie ihr das div bezeichnet bleibt natürlich euch überlassen, wichtig ist nur, dass ihr das sauber über CSS ansprechen könnt, um es ein- und auszublenden.
Denn erstellen wir den Rumpf der select-Liste, es bietet sich an, dass ihr das erstmal versteckt, ich erledige das über eine Inline-Styleanweisung, wie man sehen kann. Bei entsprechender Fenstergröße blende ich dann die normale Navigation über ein media query aus und die mobile Navigation ein.
Der einzeilige JavaScript-Code im „onChange“-Event des select-Elements sorgt dafür, dass die entsprechende Seite aufgerufen wird, wenn man ein Menüelement auswählt. Mehr ist in diesem Fall auch nicht zu erledigen, was die Anwendung sehr einfach macht.
Das kleine PHP-Script füllt dann die Liste mit den Elementen aus dem Menü, das in Zeile 8 angegeben wurde. Da kann, wie hier im Beispiel, die ID eines Menüs angegeben werden, laut Dokumentation kann aber auch der Name des Menüs oder der „Slug“ (kurzer Anzeigename) des Menüs angegeben werden.
Unterelemente eines Menüpunktes erhalten vor dem Namen jeweils ein „– “ hinzugefügt, siehe Zeile 16. Das kann man natürlich gestalten wie man möchte, zum Beispiel nur durch Leerzeichen oder einen kleinen Pfeil oder was auch immer.
Der Link wird automatisch im „value“-Attribut des Listenelementes abgelegt und über die bereits angesprochene JavaScript-Funktion genutzt.
Am Ende wird das select-Element natürlich noch sauber geschlossen, das div ebenfalls und das Menü ist einsatzbereit.
Viel Spaß damit!
Wer noch nicht genug WordPress hat, der findet in meinem Blog noch einige andere Artikel dazu.
[show_articles keyword=WordPress num=10]
Über mich
Ich bin gelernter Mediengestalter, studierter Druck- und Medientechniker und leidenschaftlicher Tüftler und Bastler.
Beruflich beschäftige ich mich mit der digitalen Transformation von Unternehmen, sowie der Automatisierung von Unternehmensprozessen, in der Druck- und Medienbranche. Mehr dazu findet sich im Lebenslauf.
Privat interessieren mich Kaffee(maschinen), Themen rund um Webentwicklung, das Internet im Allgemeinen und Speziellen und vieles, vieles mehr.
Ich freue mich auf Feedback per E-Mail unter kontakt@flomei.de, einen Euro für die Kaffeekasse oder etwas von meiner Amazon Wunschliste.