Responsive navigatiemenu

25 maart 2016 | Simplefly

Tegenwoordig hebben we veel verschillende schermformaten: desktop, laptop, tablet en smartphone. Omdat responsive websites zich aanpassen aan elke schermgrootte, is het de ideale oplossing om voor elk schermformaat een optimale beleving te creëren.

Het optimale ontwerp hangt af van verschillende zaken: bijvoorbeeld hoeveel menu-items je hebt en of iconen gebruikt. Uiteraard moet het ook gebruiksvriendelijk zijn. Dat is soms een uitdaging!

Er zijn veel verschillende oplossingen. De juiste oplossing is voor elke situatie weer anders.

Laten we samen een aantal toepassingen bekijken.

1. Maak het menu kleiner

1http://fico.lensco.be/

Voor een programmeur is deze oplossing gemakkelijk te realiseren, het is immers een kleine versie van het desktopmenu. Deze oplossing is erg beperkt, omdat het alleen werkt met weinig (4-5) items en dus niet goed uit te breiden is. Daarbij worden de items soms te klein voor touchscreens.

2. Slide/Side panel menu

http://plugins.adchsm.me/slidebars/

plugin-jquery-responsive-06

 

 

 

 

 

 

 

 

 

 

 

3. Je kunt de menu-items in blokken veranderen

5http://www.regent-college.edu/

Dit is een mooi voorbeeld, maar hier lopen we tegen hetzelfde probleem aan: je kunt niet meer dan 5-6 items gebruiken.

4. Responsive Nav – Slidedown Menu

http://responsive-nav.com/

Dit is een mooi, intuïtief voorbeeld van een goed responsive menu en in veel gevallen de meest logische.

Responsive Nav — Responsive Navigation Plugin

 

5. Footer anchor

http://builtwithmomentum.com/6 copy

Ik denk dat dit vooral een mooie oplossing is voor een webshop. Het menu blijft altijd zichtbaar onderaan de pagina, zodat de gebruiker de weg niet kwijtraakt.

6. Toggle menu

http://www.starbucks.com/

Starbucks The Best Coffee Makers and Cold Brew Coffee

Deze methode lijkt op 4, alleen blijft de knop op dezelfde positie en verandert deze in een kruis. De content wordt omlaag geduwd met een vloeiend animatie. Dit maakt deze oplossing elegant en eenvoudig.

7. Multi level drop down menu

http://tympanus.net/Development/ResponsiveMultiLevelMenu/

Deze toepassing is de klassieke dropdown, maar gemaakt voor een menu met sub-items. Dit kan handig zijn voor websites met diepere navigatielagen (bijv. een webshop) en is daarom gebruiksvriendelijker.

menu_susy