Responsive Design Menü (mit purem CSS) für WordPress

15. August 2015

Zum Responsive Design gehört immer auch ein Menü, das sich auf mobilen Endgeräten gut bedienen lässt. Dafür gibt es eine Vielzahl an Möglichkeiten, das so genannte „Three Line Menu“ ist eine der populärsten.

Three Line? Hamburger? Häh?!?

_{So oder so ähnlich sieht es meist aus. Ein „Three Line“- oder auch „Hamburger“-Menü.}

Kürzlich musste ich ein Menü für eine Webseite entwickeln, die, natürlich, auf Responsive Webdesign mit WordPress setzt. Soweit keine große Sache, das Menü sollte in der mobilen Ansicht eines der bekannten „Three Line“ Menüs sein. Diese Menüs werden oft auch „Hamburger Menü“ genannt, weil die geläufige Darstellung dafür, drei horizontale Striche, an einen Burgerpatty zwischen zwei Brotscheiben erinnert. Und angesichts der drei Striche sollte auch klar sein, woher der Name „Three Line Menu“ stammt.

Three Line Menüs gibt es in einer Vielzahl von Varianten. Einige sind „off-screen“ oder auch „off-canvas“, d.h. sie schieben sich von der Seite oder oben her ins Bild, andere tauchen einfach aus dem Nichts auf, bzw. klappen sich unter dem entsprechenden Icon auf. Mittlerweile gehen einige Designer/Entwickler auch dazu über, die Navigation ihrer Seite komplett über solch ein Menü abzubilden und verzichten auf eine klassische Menüleiste.

Ein Beispiel dafür wäre das „Skilt“-Theme, das ich kürzlich bei einem anderen Projekt integrierte. Dort sehen wir ein Three Line Menü in der Off-Screen-Variante. flomei.de und beyond-print.de haben übrigens auch Three Line Menüs in den entsprechenden Ansichten integriert. Einfach mal ausprobieren.

Three Line? Kein Problem, das geht mit jQuery!

Erschreckenderweise setzt eine große Anzahl der Entwickler auf jQuery als Mittel der Wahl, um ein entsprechendes Menü zu kreieren. Vermeintliche Vorteile sind „kein zusätzliches Markup“, dynamische Klassenzuweisung oder die Generierung von benötigtem Markup (also zusätzlichem HTML-Code – welch Ironie) on the fly.

Ich lass „das geht mit jQuery“ nicht grundsätzlich gelten, weil wir kein jQuery für diese Funktionalität benötigen, mit CSS bekommen wir das genau so gut hin. Sieht aber im Code nicht so „fancy“ aus und man kann sich nicht irgendwo aufschreiben, dass man das mit jQuery erledigt hätte (klingt für den Kunden immer wichtig!). Mehr und mehr sieht man, dass diese JavaScript-Bibliothek als Allzweckwaffe eingesetzt wird, obwohl sie das nicht sollte. Es gibt sinnvolle Anwendungszwecke dafür und dort kann man es nutzen, aber man sollte nicht die eigene Unzulänglichkeit in HTML/CSS damit ausgleichen.

In diesem Anwendungsfall kann man sicher darüber streiten, ob solche Funktionalität nicht sinnvollerweise durch eine Programmiersprache bereitgestellt wird. Was jetzt kommt, sprengt nämlich den Rahmen dessen, was semantisch sauber ist. Es wird aber von allen aktuellen (auch mobilen) Browsern unterstützt und ermöglicht uns, jQuery komplett außen vor zu lassen, wenn wir das wollen.

Three Line nur mit CSS? Machbar!

Wenn man also keinen JavaScript-Zauber einsetzen will, wie macht man das Ganze denn dann nun? Und das noch in WordPress?

Dafür braucht man drei Zutaten:

• Eine Navigationsstruktur, die auf Listen basiert (und von einem div-Element umschlossen ist). Davor ein Label und eine Checkbox.
• Eine gute Hand voll CSS-Styles, um eine schöne Responsive- und eine Non-Responsive-Darstellung zu erreichen.
• Den „Checkbox-Hack“, um die Grenzen des klassisch Machbaren etwas zu erweitern.

Die erste unserer Zutaten liefert uns WordPress relativ komfortabel. Dazu nehme ich im Kern wp_nav_menu(); und übergebe die ID des entsprechenden Menüs. Label und Checkbox muss ich von Hand erzeugen, aber das ist alles, was ich an zusätzlichem Markup habe (nimm das, jQuery-Ansatz!).

<nav class="main-nav clearfix">
   <label id="menutoggle" for="togglemenu">☰</label>
   <input type="checkbox" id="togglemenu">
   <?php wp_nav_menu('main-menu'); ?>
</nav>

Das erzeugt nun zunächst eine wenig ansprechende, unformatierte, unsortierte Liste in HTML. Darauf wenden wir nun erst einmal das Standard-CSS für die Desktop-Ansicht an (oder auch andersrum, ganz wie man entwickelt), formatieren die Listenelemente, blenden Label und Checkbox aus.

Apropos Label. Was ist das für ein HTML-Code da? Das sind drei horizontale Striche in Unicode, sozusagen „das Erkennungszeichen“ des Three Line Menüs. css-tricks.com hat einen Artikel dazu, wie man das erzeugen kann, ich mag die Variante mit dem Unicode-Zeichen am liebsten.

Im nächsten Schritt erzeugen wir das CSS für die Responsive Ansicht, d.h. die Ansicht, die ab einer gewissen Bildschirmgröße aktiviert wird.

Dabei blenden wir Label und Checkbox ein, verschieben die Checkbox ins Nirvana unseres Browserbereiches und nutzen, dass das Label auch weiterhin damit verknüpft bleibt. Klicken wir nun auf den Bereich des Labels aktivieren wir damit die Checkbox und können darüber via eines CSS-Selektors andere Elemente ansprechen. Das nennt man dann Checkbox-Hack, weil man den :checked-Status der Checkbox kreativ für etwas anderes nutzt.

Unsere Listenelemente formatieren wir so, dass sie sich untereinander blockartig aufreihen und damit wie ein ausklappbares Menü aussehen. Idealerweise erhöhen wir auch die Schriftgröße und Abstände, damit man die Elemente auch vernünftig treffen kann. Google bezieht solche Werte in seine Bemessung der Nutzerfreundlichkeit einer Seite, und damit wohl auch ins Ranking in seiner Suchmaschine, ein.

Ich habe den ganzen Code in einem Codepen-Beispiel hinterlegt, damit ihr ihn euch anschauen und damit rumexperimentieren könnt.

Die Checkbox-Hack-Magie findet in Zeile 85 statt. Hier wird der „Sibling Selector“ aus CSS3 genutzt, um das Objekt zu addressieren, dass auf ein bestimmtes Element folgt. In unserem Beispiel das div-Element mit unserem Menü, das im HTML-DOM direkt auf eine Checkbox folgt. So können wir mit nur einem Menü und zwei zusätzlichen Elementen sehr komfortabel ein responsives Menü schaffen, das wir beliebig gestalten können.

Fazit

Den Checkbox-Hack können wir hier, in allen aktuellen Browsern funktionsfähig, anstelle von JavaScript/jQuery nutzen.

Macht das Sinn oder gibt es einen guten Grund auf jQuery setzen? Wie realisiert ihr entsprechende Menüs? Auch mit dieser Methode, mit einem fertigen Plugin, einem anderen Codeschnipsel? Und wo habt ihr besonders schicke Three Line Menüs schon in der Praxis gesehen?

<a href=“http://amzn.to/2jN1yRz“ target=“_blank“>diesen Link benutzen,</a> um bei Amazon einzukaufen, mir etwas von <a href=“https://www.amazon.de/registry/wishlist/47WBLQYIEDBS“ target=“_blank“>meinem Amazon Wunschzettel</a> schenken oder <a href=“http://paypal.me/flomeipunktde/2“ target=“_blank“>eine Leberkässemmel finanzieren.</a>

Kategorie : Webentwicklung
Schlagworte: menü / Responsive Design / Wordpress
Teilen: Facebook / twitter / LinkedIn / XING / WhatsApp / E-Mail
RSS-Feed aller Blogbeiträge

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