Je komt ze steeds vaker tegen, vooral op tablets en smartphones: de zogenaamde hamburger dropdown menu’s. In deze tutorial leg ik stap voor stap uit hoe je zo’n menu maakt.
Onderstaand artikel dateert uit 2014 en is in de huidige tijd niet meer relevant. Als je nu nog een thema of pagebuilder gebruikt die niet standaard een hamburger menu op mobiel toont wordt het de hoogste tijd om te switchen 😉
In dit artikel lees je:
- Dat je ook de SlickNav plugin kunt gebruiken
- Dat je als eerste een button moet maken in Photoshop
- Welke jQuery code je in de <head> moet zetten
- Welke CSS code je moet toevoegen
- Dat je vanuit usability oogpunt beter geen dropdown menu kunt gebruiken in de desktop weergave
Een responsive website
Om te beginnen ga ik ervan uit dat je al een responsive website hebt en dat je weet hoe CSS media queries werken. Als dat niet het geval is kun je beter eerst dit artikel over responsive webdesign lezen.
De afbeelding hiernaast is een screenshot van www.djgezocht.nl, een door mij gebouwde website waarop deze techniek is toegepast. Neem deze website er even bij om te kijken hoe het werkt (verklein je browservenster om de responsive werking te zien). Overigens werken alle mijn eigen WordPress thema’s ook met deze techniek.
De SlickNav plugin
Toen ik deze tutorial schreef kende ik de SlickNav plugin nog niet, en het installeren van die plugin is een stuk makkelijker dan deze methode 😉 Mocht je toch zelf willen knutselen kun je uiteraard deze tutorial volgen, maar anders raad ik je aan de SlickNav plugin te gebruiken.
Stap 1 : maak een “menu” button in Photoshop
Om te beginnen maak je in Photoshop (of een ander grafisch programma) een button met de tekst “menu”, met links daarnaast drie horizontale strepen onder elkaar (de zogenaamde hamburger). De “menu” afbeelding van onze voorbeeldsite is hierboven met een rood kader aangegeven en is uiteraard vormgegeven in de stijl van het normale menu. Ik noem deze button menu.png.
Je kunt eventueel ook een hamburger icoontje maken met CSS maar persoonlijk vind ik een afbeelding makkelijker in dit geval.
Stap 2 : de jQuery code in de <head> zetten
De dropdown techniek voor je responsive menu wordt verzorgd door een stukje jQuery / javascript. Dit script kun je het beste net voor de </head> tag plaatsen.
<script type=”text/javascript”>
jQuery(document).ready(function($){
/* prepend menu icon */
$(‘#nav-wrap’).prepend(‘<div id=”menu-icon”></div>’);
/* toggle nav */
$(“#menu-icon”).on(“click”, function(){
$(“#nav”).slideToggle();
$(this).toggleClass(“active”);
});
});
</script>
Met de eerste regel laad je de jquery bibliotheek. Deze mag maar 1 keer per pagina geladen worden, dus als je dit al gedaan hebt voor een ander script moet je deze regel weglaten.
Stap 3 : de jQuery code aanpassen
Als je de bovenstaande code zo tussen je <head> tags plakt zal hij waarschijnlijk niet werken. Er worden namelijk enkele id’s gebruikt in deze code, en die moeten wel overeen komen met de id’s die jij in de HTML en CSS gebruikt. Deze id’s zijn uiteraard te herkennen aan het # teken. Ik heb ze hieronder even dik gedrukt:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>jQuery(document).ready(function($){
/* prepend menu icon */
$(‘#nav-wrap’).prepend(‘<div id=”menu-icon”></div>’);
/* toggle nav */
$(“#menu-icon“).on(“click”, function(){
$(“#nav“).slideToggle();
$(this).toggleClass(“active”);
});
});
</script>
- #nav-wrap : dit is de id van je menu wrapper. In mijn geval is dit “menuboven”, dus in mijn code staat niet #nav-wrap maar #menuboven.
- #menu-icon : de id waar we straks de “menu” afbeelding die je bij stap 1 gemaakt hebt in gaan plaatsen. Ik heb gewoon deze naam aangehouden.
- #nav : de id van de ul*, in de voorbeeldsite is dat “menu-menu” (zie ook onderstaande afbeelding).
* Als het goed is heb je je menu opgebouwd als een lijst, dus als:
<ul id=”menu-menu”>
<li>menu item 1</li>
<li>menu item 2</li>
</ul>
Op de afbeelding hiernaast zie je de HTML code van het menu van onze voorbeeldsite djgezocht.nl (klik om te vergroten). Ik heb de volgende onderdelen gemarkeerd:
- de wrapper van het menu (#menuboven)
- de div voor de “menu” afbeelding (#menu-icon)
- de lijst met menu items (ul#menu-menu)
De jQuery code voor onze voorbeeldsite is dus als volgt
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>jQuery(document).ready(function($){
/* prepend menu icon */
$(‘#menuboven’).prepend(‘<div id=”menu-icon”></div>’);
/* toggle nav */
$(“#menu-icon“).on(“click”, function(){
$(“#menu-menu“).slideToggle();
$(this).toggleClass(“active”);
});
});
</script>
Stap 4 : De CSS
Nu is het tijd om de CSS te schrijven. Er zijn een paar stappen in dit proces:
Stap 4.1 : De #menu-icon verbergen in de desktop weergave
De eerste stap is de #menu-icon verbergen in de CSS voor de desktop weergave. Daarin zet je de volgende code:
Stap 4.2 : De #menu-icon zichtbaar maken onder een bepaalde resolutie
Vervolgens gaan we de #menu-icon weer zichtbaar maken als de breedte van het browservenster onder een bepaalde resolutie komt. Bij onze voorbeeldwebsite ligt dat “breaking point” op 995px. Als de schermresolutie dus smaller dan 995px is wordt het gewone menu vervangen door het dropdown menu.
@media screen and (max-width: 995px)#menuboven #menu-icon {display: inline-block; background: url(/wp-content/themes/djgezocht/foto/menu.png); background-repeat: no-repeat; height: 50px; width: 80px;}
}
Zoals je ziet gebeuren hier een paar dingen:
- De display eigenschap wordt van “none” naar “inline-block” gezet zodat de #menu-icon zichtbaar wordt
- De menu afbeelding die we in stap 1 hebben gemaakt (menu.png in mijn geval) wordt als achtergrond van #menu-icon ingesteld
- We stellen de achtergrond in op “no-repeat” zodat hij niet herhaald wordt
- We stellen de hoogte en breedte van de afbeelding ook even in om weergaveproblemen te voorkomen
Stap 4.3 : De ul verbergen
Ten slotte moeten we de ul van het menu verbergen, anders is het dropdown menu standaard uitgeklapt. We voegen de volgende code dus nog toe:
@media screen and (max-width: 995px)#menuboven #menu-icon {display: inline-block; background: url(/wp-content/themes/djgezocht/foto/menu.png); background-repeat: no-repeat; height: 50px; width: 80px;}
#menuboven ul {display: none;}
}
That’s it, als het goed is zou het nu moeten werken!
Waarom je in de desktop weergave geen dropdown menu moet gebruiken
Met deze tutorial maak je een responsive dropdown menu dat verschijnt zodra er te weinig plaats is om het gewone menu weer te geven, een prima oplossing voor smartphones en tablets. Dat menu icoontje wordt echter ook steeds vaker op gewone desktop websites gebruikt. Hoewel mensen inmiddels wel weten hoe zo’n dropdown menu werkt is dat uit usability oogpunt niet aan te raden.
Zoals je in mijn artikel over usability kan lezen heeft de navigatie een aantal taken. Eén van die taken is de bezoeker vertellen wat er te vinden is op de website; een goed navigatiemenu geeft namelijk een duidelijk overzicht van de belangrijkste onderdelen van een website. Een tweede taak is de bezoeker vertellen waar hij is, door het huidige menu item een afwijkende opmaak te geven (in dit geval zit je in het onderdeel “Bobs blog” van mijn website).
Deze dingen moeten in één oogopslag duidelijk zijn, en als je bezoeker eerst moet klikken om het menu te zien is dat niet het geval.
Bronvermelding: dit artikel is gebaseerd op webdesignerwall.com/tutorials/mobile-navigation-design-tutorial.
Hulp nodig met je website?
Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om een website voor je te bouwen, jouw website te verbeteren of een training over dit onderwerp te verzorgen.
Vraag direct een vrijblijvende offerte aan
Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂
Geef een reactie