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
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).
<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.
Heeft dit artikel je zo goed geholpen dat je mij niet meer nodig hebt?
Een kleine eenmalige donatie wordt altijd zeer op prijs gesteld 🙂
Hoi Bob,
Allereerst de beste wensen nog voor 2015. 🙂
Nee we kennen elkaar niet hoor, maar ik heb zonet jouw site bekeken.
Voor m’n eigen site ga ik nog voor de smarthphones die responsive dropdownmenu maken, jouw uitleg daarover komt mij heel goed van pas. Dus bij deze alvast bedankt.
Die media queries zijn best wel apart, ben er nog niet zo lang mee bezig, maar ik zie wel dat ik voor kleine tablets weer een kleiner logo moet maken tot 600px. (er valt daar een klein stukje vanaf gepuzzel)
Hoe dan ook, hartelijk dank voor jouw uitleg, zo leren we weer wat.
Groet,
Henk
Hoi Henk,
Jij ook de beste wensen en dank voor je reactie. Ik neem aan dat je ook mijn responsive design tutorial hebt gelezen?
Je kunt je logo beter een max-width van 100% meegeven (in je stylesheet) als dat even breed moet zijn als de rest van de site. Anders moet je voor iedere device (denk ook aan smartphones) een apart logo gaan maken, dat is natuurlijk niet te doen.
Succes met je website!
Groeten van Bob
Hoi Bob,
Ja die tutorial heb ik als eerste gelezen.
Dat van die max-width ga ik vanavond nog uitvogelen of dat ook handig is voor mijn eigen logo.
In ieder geval weer bedankt voor de tip!
Jij ook succes en fijne avond.
Groet,
Henk
Hallo Bob
Ik vroeg me af of je voor mij een hamburger menu wilt plaatsen op onze site.
met vriendelijk groet
J hachmer
Hoi Johan,
Natuurlijk wil ik dat graag voor je verzorgen, ik stuur je wel even een mailtje 😉
Groeten van Bob
Er zit hier toch een klein probleem in.
Probeer dit maar eens:
1- maak scherm klein (hamburgerknop verschijnt)
2- klik op hamburger (menu verschijnt)
3- klik nogmaals op hamburger (menu verdwijnt)
4- maak scherm groot…
Heeeee, waar is het menu nou gebleven?
slideToggle zet een inline style, namelijk display: block. Nu kun je proberen wat je wil met je mediaqueries in je CSS file, maar die inline style wordt niet overrulet.
Dit kan ook in de praktijk voorkomen:
iemand heeft een tablet en kijkt op portait mode. Opent menu, sluit menu, draait vervolgens zijn of haar tablet naar landscape mode, en doei! Dag menu! Waar bent u?
Ik heb het nog niet opgelost…!
Hartelijk dank voor je reactie. Dat probleem is mij inderdaad ook bekend, maar ik heb daar helaas geen oplossing voor (ook niet heel hard naar gezocht overigens 😉 ). Als je de pagina ververst is het menu overigens weer terug maar het hoort natuurlijk niet.
Helaas ben ik niet voldoende thuis in jQuery om een oplossing daarvoor te vinden dus als iemand er wel 1 weet lees ik dat graag in de comments!
Groeten van Bob
Overigens kwam ik laatst een alternatief voor dit scriptje tegen: http://slicknav.com/. Dat biedt wat meer mogelijkheden dan bovenstaand script, maar heeft daar ook heel wat meer code voor nodig.
Bob, ik ga mijn best doen.
Bedankt overigens voor het voorbeeld, dat was ik nog vergeten te vertellen.
hoi bob,
Bedankt voor je uitleg!
Ik zit met een probleempje mbt het hamburger menu waar je me hopelijk mee kan helpen.
Mijn site http://www.bvheeze.nl was al responsive, maar na een update staat het menu nu standaard uitgeklapt op kleine schermpje en is het menu icoontje verdwenen. Ik weet ook niet of hiervoor er een afbeelding icoontje voor was gebruikt..
Heb je enige idee als je naar mijn code kijkt hoe ik dit weer op de juiste manier kan tonen?
Alvast bedankt!
Groet,
Angela
Hoi Angela,
Bedankt voor je reactie, zo te zien is het alweer opgelost?
Groeten van Bob
Hee Bob,
voor mijn opleiding moet ik een website bouwen, ik wil graag de hamburger menu en in hebben maar ik heb er erg moeite mee. zou je me willen helpen?
Hi Daniel,
Als je een ergens een voorbeeld online hebt staan wil ik best even kijken wat er mis gaat, maar ik ga natuurlijk niet je huiswerk maken;-) Als je een opleiding volgt moet je het zelf leren, en als je er niet uit komt kun je het aan je leraar vragen toch?
Groeten van Bob
Is er al een oplossing voor het probleem wat Allstar de Pallstar aangaf?
Leuke tutorial maar als het niet goed werkt heb je er weinig aan.
Hoi Diederick,
Voor zover ik weet niet helaas… je zou anders eens naar slicknav kunnen kijken, dat werkt ook wel erg mooi.
Groeten van Bob
Bob,
Heb keurig je instructie gevolgd en het werkt allemaal echter heb ik een slideshow onder de oorspronkelijke menubalk lopen. Als ik nu in een kleinerscherm het hamburger icoon krijg klapt het menu uit achter de slide show. Heb het al met z-index geprobeerd maar werkt niet. moet ik iets aan het scriptje toevoegen misschien?
Beste Marcel,
Ik heb even snel gekeken maar je moet de div #menu ook een position:relative; geven anders werkt de z-index niet.
Groeten van Bob
Haa top! idd nu werkt het. Bedankt Bob, ook voor de goed te begrijpen uitleg over dit onderwerp!
Marcel
hallo bob ik heb alles gedan wat u zei alleen
ik krijg maar niet voor elkaar dat als ik op de knop druk dat mijn menu naar beneden komt
wat ik graag wil bereiken is dat mijn menu etc. responsive is voor tablet en telefoon alleen nu heb ik dat wel alleen heb niet dat mijn menu te voorschijn komt.
hier is mijn code https://pastebin.com/HMueSVFA
Hoi Jordy,
Probeer de code eens vanaf de bronwebsite te kopieren: webdesignerwall.com/tutorials/mobile-navigation-design-tutorial. En heb je de naam van het menu aangepast, zowel de container div als de ul zelf?
Groeten van Bob