Eine bestehende Website sollte auf mobile Nutzerfreundlichkeit umgestellt werden. Das bisherige Menu musste hierfür umgestellt werden…
Vorarbeit
WordPress Menü
Zunächst muss in WordPress ein Menü erstellt werden (falls noch nicht vorhanden).
Evtl. macht es Sinn in der mobilen Version das Menü tiefer zu staffeln. Unterseiten direkter greifbar zu machen.
Styling Angaben
In meinem Fall wollte ich die Oberseite und Unterseiten angezeigt bekommen.
Styling Angaben hierzu: WordPress_Menu-Styling
Mobile Darstellung
Für die mobile Darstellung einfach das Plugin WP Responsive Menu installieren.
Danach erscheint ein Menupunkt WPR Menu.
Die Einstellungen sind ziemlich selbsterklärend.
Das Plugin erzeugt eine zusätzliche ausklappbare Menu-Struktur. Das vorhandene Menu muss deshalb für die mobile Darstellung ausgeblendet werden. In meinem Beispiel:
@media only screen and (min-width: 320px) and (max-width: 759px) {
<strong>nav ul { display: none; }</strong>
Der Code setzt voraus, dass das Menu so eingebunden wurde:
<nav id="nav-main">
<?php wp_nav_menu(array('theme_location' => 'main')); ?>
</nav>
Andernfalls statt „nav ul
„, „menu ul
“ oder dergleichen.
Ergebnis
Die Umsetzung ist zu sehen auf der Website Alvernmedia.com
Browser Fenster verkleinern zum Testen
Noch kein Kommentar, Füge deine Stimme unten hinzu!