• Al jarenlang is het een goed gebruik om schaalbaarheid in website navigatie te verkrijgen via drop-down menu’s. Of je er nou op dient te klikken of door er met je muis boven te hangen, drop-down menu’s zijn een ideale manier om de structuur van je site voor de website bezoeker te verduidelijken.

                        Dat is natuurlijk alleen het geval als er aandacht aan wordt geschonken. Dit geldt zowel voor het design als de structuur van drop-down menu’s binnen de website navigatie. In dit artikel behandelen we beide.

                      • Waar moet je drop-down menu's gebruiken in je website navigatie?

                        Er zijn een aantal plekken die zich goed lenen om ingezet te worden voor een drop-down website navigatie. Hieronder volgt een overzicht van deze plekken.

                      • Structuur verlenen door plaatsing webpagina's in categorie of sectie

                        In deze website is een drop-down menu geplaatst in het menu om een overzicht te tonen van de belangrijkste categorieën. Net zo goed kan een website die niet het karakter van een blog heeft (wat deze website wel is) een opdeling in secties hebben. Allebei een klassieke manier om structuur aan je website te verlenen via drop-down menu's.

                      • Microsoft

                      • Tonen van producten in webshop

                        Indien de website een webshop betreft zie je vaak het gebruik van productcategorieën terug in de website navigatie. Omdat een webshop heel veel producten kan omvatten is dit dan ook de plek om een drop-down menu te gebruiken.

                      • Bol

                      • Complexe formulieren

                        De minst gebruikte, maar zeker niet de slechtste is het verpakken van formulieren in een drop-down menu. Dit kan een zoekmenu zijn maar zelfs het volledige commentaarblok in het standaard WordPress thema is verpakt in een drop-down menu. Theoretisch gezien betreft het bij het laatste geval geen website navigatie.

                      • CSS-tricks

                        Ook als is de zoekbalk technisch gezien geplaatst buiten de website navigatie, CSS-tricks heeft een uitstekende oplossing voor dit standaard menu item.
                      • Drop-down website navigatie best practices

                        Natuurlijk is het gebruik van een drop-down website navigatie te verantwoorden wanneer de situatie er om vraagt. Maar net zo goed als ze de website bezoeker een goede gebruikerservaring kunnen bezorgen is het tegenovergestelde ook waar. Vandaar een aantal best practices.

                      • Gebruik geen drop-down menu met meer dan twee lagen

                        Een usability drama is het drop-down menu dat dichtklapt omdat je tig lagen dicht per ongeluk van het menu item afglijdt. De meest gemaakte en waarschijnlijk grootste fout bij deze vorm van website navigatie. Voorkom hem door je navigatie maar één keer uit te laten klappen en niet nog een keer zijwaarts (dat is dus twee lagen diep).

                      • Amazon

                        Ook al is Amazon een gigant in de retail business, hun navigatie is evengroot als hun omzet en dat is geen compliment.
                      • Gebruik hover menu's i.p.v. klikbare menu's

                        De meest gebruikte vorm in drop-down website navigatie is die met een hover-state. Dat betekent dat je niet op het menu item hoeft te klikken om hem te openen. Omdat de meeste gebruikers die gedrag verwachten is het ook het beste om deze optie te implementeren. Sommigen zullen het niet met mij eens zijn omdat ze het klikbare menu gebruiksvriendelijker vinden omdat het menu niet per ongeluk dicht kan klappen. Of combineer ze zoals Google, het is mij om het even.

                      • Google

                      • Dichtklappen van hover-menu vertragen

                        Het bovenstaande argument over het dichtklappen van het hover menu kan voorkomen worden door deze website navigatie te vertragen. Als de gebruiker dus, al dan niet per ongeluk, weg navigeert van het menu heeft zij nog even de gelegenheid om terug te gaan.

                      • Dell

                      • Voeg een hover effect toe

                        Zeker met de huidige CSS3 technieken kun je op eenvoudige wijze prachtige vertragende hover effecten op je website navigatie en dus je drop-down menu’s loslaten. Het valt bijna niet op, maar de menu items van Eigenwebsitemaken hebben een 0.2 transitie effect, waardoor het net iets prettiger oogt dan als ze als een soort knipperlicht aan en uit zouden gaan.

                      • Dragon Interactive

                        Een veel gebruikt voorbeeld, deze Dragon Interactive hover state. Het is op basis van hun eigen JQuery plugin.
                      • Verwijder tooltips

                        Tooltips zijn vooral handig als een link een afbeelding is en soms ook nog als het een tekstuele link in de hoofd content betreft. Ze zijn overbodig in de website navigatie en zelfs hinderlijk omdat ze over andere, net zo belangrijke menu items kunnen gaan zitten. Nooit gebruiken dus.

                      • Laat je menu items "ademen"

                        Zeker met de opkomst van mobiele websites is het des te belangrijker dat de gebruiker op de kleinere resoluties menu items voorgeschoteld krijgt die een bepaalde afmeting hebben. Ook voor oudere gebruikers onder ons is het prettig te noemen als ze niet een op elkaar gepropte website navigatie voor zich zien. Laat dus zeker bij drop-down menu’s de onderlinge menu items ademen.

                      • Navigant

                      • Zorg dat je website navigatie in ieder geval werkt

                        Hij komt als laatst maar is eigenlijk het belangrijkst: een werkende navigatie. Behoeft verder geen uitleg.

                      • Toshiba

                        Niet alleen enorm op elkaar gepropt is deze website navigatie, hij werkt ook niet goed. I.i.g. niet in Chrome.