Responsive menu’s voor Genesis

Het Genesis Framework heeft standaard niet zo’n elegante oplossing voor de navigatie op kleine schermen. De menu’s zijn daarop niet erg gebruiksvriendelijk. WordPress Twenty Twelve en Twenty Thirteen themes hebben hiervoor een betere oplossing.

Ik ga op zoek naar een gebruiksvriendelijk oplossing voor menu’s met veel hoofd- en submenu-items op kleine schermen. zoals dat van de iPhone.

Bij grote menu’s wordt het in Genesis op een klein scherm erg onoverzichtelijk. En zeker wanneer er ook nog een “service-menu” in de header zit, zoals bij mijn project, de website van het IJburg College.

IJburg College: 4 menu's

De website van het IJburg College heeft 4 menu’s. De twee menu’s in de zijbalken verschuiven in het responsive design op een klein beeldscherm naar onder, ze verschijnen onder de content in de middelste kolom. Het servicemenu (in de header) en het hoofdmenu komen onder elkaar, boven de content. Dit staat rommelig omdat beide menu’s niet op één regel passen.

Het standaard menu van Genesis

Bovendien is het hoofdmenu een groot menu, met veel submenu-items. Het “uitvouwen” gaat niet goed op een klein scherm, daar is te weinig ruimte voor.

Om het nog ingewikkelder te maken wil het IJburg College dat op kleine schermen het hoofdmenu en het deelscholenmenu boven de content komen, en de andere menu’s onder de content. Kortom, een leuke uitdaging voor de CSS-knutselaar  😉

Eerst maar ens kijken of het wiel mischien al is uitgevonden. Mijn zoektocht in Google levert me de volgende links op:

Responsive Navigation Patterns

Een overzicht van 7 manieren om responsive menu’s te maken, met werkende voorbeelden, voor- en nadelen. Op deze pagina staat ook een link naar complex navigation patterns for responsive design. Dit kan later nog van pas komen.

Adventures in Responsive Navigation

Een overzicht van 8 manieren om responsive menu’s te maken, met voor- en nadelen, met van elke manier een demo.

Lees eventueel eerst: My Experience with Navigation in Responsive Design.

De oplossingen die mij aanspreken:

Footer Navigation

“Placing your navigation menu at the bottom of your site forces your visitors to first look at your site before deciding where to go next.
I believe this to be one of the best ways to deal with navigation in responsive design. If your desktop navigation sits up top, then when you get to a certain breakpoint in your design, the menu becomes just one button (a pattern that we see all the time in responsive navigation) and this button is linked to the id of the mobile navigation that sits at the bottom of your page. It’s basically an anchor to that place on your page.
On the desktop version, the mobile navigation at the bottom of your page is hidden. Once you hit the magical breakpoint, it appears and the menu up top is hidden.

This is such a simple method, but it seems to be pretty effective. The advantages to this is the simplicity in code. It requires no JavaScript to work. Where it might pose the biggest problem, however is the fact that you must maintain two menus. If you are using a CMS and can dynamically generate each menu, then you’ve got it made. Otherwise, you are burdened with the chore of maintaining two menus. Also, this method requires less work if your navigation doesn’t have any sub-nav (drop-downs).”

Menu Overlay (Simple Toggle Method)

Mooie oplossing, maar dit werkt niet goed met grote menu’s

Multi-Toggle Menu

“The concept is really simple – once you get to a certain breakpoint, the menu is “opened” via javascript (although not totally necessary) and the user is presented with an accordion type navigation. jQuery probably popularized this layout pattern with it’s UI library.
Overall, I love this navigation pattern because it’s scalable, user-friendly, and easy to implement.”

Voordeel: geschikt voor grote menu’s.

The Off Canvas Page Slide

Mooie oplossing, lijkt niet zo moeilijk, maar alleen geschikt voor menu met weinig sub-items.

Een minder geschikte oplossing vind ik:

Select menu

Zie How To Build a Collapsible Responsive Menu for Genesis: “I think that once a user is on a tablet or smart-phone, it’s not natural for them to have to think about how to navigate a website. Training them to look for a select box is not intuitive.”

Een Select menu is bedoeld voor gebruik in formulieren, niet voor navigatie van een website.

Kan het met een plugin?

Het makkelijkst en snelst is natuurlijk om naar een plugin te zoeken. Ik vind er enkele:

1. Responsive Select Menu

  • Deze maakt een “select” menu.
  • Niet specifiek voor Genesis.
  • Werkt met het standaard WP menu.
  • De demo werkt niet goed: als je op home klikt zie je de sub-items maar kun je niet naar andere hoofditems.
  • Volgens de maker is deze plugin compatible met UberMenu.

2. Royal Responsive Menu

  • Deze maakt een “select” menu.
  • Niet specifiek voor Genesis.
  • Werkt met het standaard WP menu.
  • Demo: simpel, niet echt mooi, maar het werkt wel.

3. MeanMenu

  • Dit is geen plugin maar jQuery
  • Deze maakt een hamburger-menu dat uitvouwt als je op het “hamburger”-icoontje klikt.
  • De submenu’s zijn apart uitvouwbaar als je er op klikt.
  • Demo: mooi, maar het uitvouwen van de submenu’s werkt alleen als je op het + symbooltje klikt, niet als je klikt op het menu-item.

4. Ubermenu

  • Betaalde WordPress plugin, $16.
  • Demo: heel mooi, heeft heel veel stijlen, maar ik las later ergens dat deze je website onnodig zwaar en traag kan maken.
  • Voor mij iets te vel toeters en bellen en teveel “vorm”.

Dus toch maar zelf doen dan?

Voor Genesis vond ik de volgende handleidingen:

1. How To Build a Collapsible Responsive Menu for Genesis

Deze heb ik eerst uitgeprobeerd op mijn eigen website. Na klikken op het “hamburger”-icoontje krijg je nog steeds hetzelfde rommelige menu: bij meer dan 3 items worden het meerdere regels en gecentreerd, dit staat niet mooi. Een keer extra klikken levert je dus eigenlijk niet veel op… Hieronder zie je hoe het menu er uit ziet vóór en na klikken op het “hamburger” icoontje.

Alva Design menu voor klikkenAlva Design menu na klikken

In CSS (bij de media queries) kan ik de stijl natuurlijk aanpassen voor dit menu, zodat op kleine schermen de items niet naast maar onder elkaar komen en 100% breed worden.

2. How to add a mobile responsive menu to your Genesis WordPress website

Uitleg voor een footer anker menu.
Spreekt mij aan vanwege de eenvoud.
Maar werkt dit ook met meerdere menu’s?
Kun je met CSS het gewenste uitvouw-effect bereiken?

3. Create a Responsive Mobile Menu for the Genesis Framework

Dit is een goede en duidelijke uitleg hoe je dit doet in Genesis. Nadeel: je moet een nieuw menu maken voor mobile. Bij een groot menu, zoals voor het IJburg College, is dit veel werk.
Gelukkig geeft Brad Potter meerdere oplossingen:

  • Voor het bestaande hoofdmenu
  • Voor het header menu (is bij het IJburg College het service menu)
  • Voor een eventueel secondary menu (dit zou bij het IJburg College het deelscholen-menu kunnen zijn)

Demo.

Mijn oplossing

Hoofdmenu

Ik begin met het hoofdmenu en volg precies de stappen op  uit Create a Responsive Mobile Menu from the Primary Navigation Menu for the Genesis Framework. Makkie! De CSS heb ik nog een beetje aangepast zodat het beter bij mijn thema past. Hieronder zie je het hoofdmenu dicht- en uitgeklapt.

hoofdmenu hamburgerhoofdmenu uitgeklapt

Deelscholen menu

Dit is in de desktop versie een custom menu in een widget in de sidebar. Ik kan dit menu OOK aanwijzen als secondary navigation en deze verbergen op grote schermen (in de media queries op display: none zetten).

  1. Ik wijs het deelscholen menu (ook) aan als secondary navigation*.
  2. Voor grote schermen zet ik de secondary navigation op display: none.
  3. Voor kleine schermen zet ik de widget in de sidebar op display: none.

* Let op: door het aanwijzen van dit menu als secondary menu verandert de naam van dit menu in de HTML code. De naam was bij mij “menu-deelscholen” en is nu “menu-secondary-navigation-1”. In de CSS moet ik dit even aanpassen om het menu de gewenste opmaakstijl te laten behouden.

Nu alle stappen uit Create a Responsive Mobile Menu from the Secondary Navigation Menu for the Genesis Framework. Ook een makkie! De CSS heb ik wederom een beetje aangepast.

hoofemenu en deelscholen-menu

Het service menu

In de desktop versie staat dit custom menu in een widget in de header.

  1. Ik maak een extra widget aan in de secundaire sidebar met dit servicemenu, voor kleine schermen. Dit menu komt dan onder de content.
  2. Voor kleine schermen verberg ik het servicemenu in de header (display: none;) en toon ik het service menu in de sidebar (display: block;)

Het Featured menu

Dit is voor mobiele surfers niet zo belangrijk, omdat deze links ook via de andere menu’s bereikbaar zijn. Voor kleine schermen laat ik het staan en dan komt het onder de content. Ik zou het ook kunnen verbergen (met display: none;)

Klaar!

Dat was het. Zo kun je elke website dus gebruiksvriendelijker maken voor mobiele surfers door de menu’s aan te passen en /of op een andere plek te laten verschijnen.

Je kunt het resultaat bekijken op de website van het IJburg College. Veel succes ermee!

Wil je reageren?

Graag!
Je kunt hier een berichtje achterlaten. Het is noodzakelijk daarvoor je naam en emailadres in te vullen. Het emailadres zal nooit openbaar worden gemaakt.
Na goedkeuring door WP-bieb zal je bericht op de website verschijnen.

*