CSS Drop Down Menu by PureCSSMenu.com

Navigatie - vervolgPrint deze pagina

Interactie

Over navigatie-interactie kun je hele boeken schrijven. Sterker nog: die zijn ook geschreven. Voor het doel van nu – laten zien dat je keuzes voor navigatieoplossingen bewust moet maken – beperk ik me even tot enkele menu-gedragingen op het niveau van de globale navigatie, te weten:

  • Klikken op tab/link opent overzichtpagina;
  • Bewegen over tab opent subnavigatie;
  • Klikken op tab/link opent subnavigatie;
  • Het ‘Mega drop-down’ menu.

Als de werking al bij de eerste aanraking direct duidelijk wordt is de navigatie intuïtief en voldoet aan de eisen.

Bewegen over tab opent subnavigatie

Ook een veelgebruikte vorm van navigeren. Je beweegt de muis over een tab, waardoor direct een submenu naast of onder de tab verschijnt. Je kunt klikken op het hoofditem, maar ook direct op een item in het submenu waarmee je het topniveau overslaat. Klik je niet en beweeg je de muis van de tab en het submenu af, dan verdwijnt het submenu weer.

Klikken op tab/link opent subnavigatie

Je ziet deze interactievorm niet zo vaak als de twee voorgaande. De menu-tabs bevatten een submenu, die niet tevoorschijn komen als je er met de muis overheen beweegt, maar pas als je erop klikt. In de horizontale variant verschijnt het submenu in een horizontale balk onder het hoofdmenu. In de verticale variant schuift het hoofdmenu meestal open tussen het aangeklikte item en het item eronder, om ruimte te maken voor de subnavigatie.

Mega drop-down

Een navigatievorm in opkomst is de zogenaamde ‘mega drop-down’.
Een mega drop-down menu is in principe gewoon een uitklapmenu (‘drop-down’ betekent hier ‘uitklap’) met extra mogelijkheden: meerdere kolommen, plaatjes en ‘rijke’ links (bv. nieuws- of productitems). Het zijn vaak hele pagina's.

Weergavestijl

Er bestaan meerdere weergavestijlen:
2 conventionele - het horizontale en het verticale menu –
Specifiekere  – de accordeon en de carroussel/filmstrip.

Horizontaal menu

Gewoon een rij hyperlinks, weergegeven als knoppen, tabs, of gewoon als links. Plaatsing: bijna altijd bovenin de pagina.

Toegankelijk

Last but not least: Het navigatiesysteem moet ook gebruikt kunnen worden door mensen met een mobiele telefoon (beperkte omvang, klein scherm, misschien plaatjes uitgeschakeld) en mensen met een functiebeperking (bv. blind, lichamelijke handicap). Zorg dus dat het ook werkt zonder plaatjes, zonder javascript, dat toetsenbordbediening ondersteund wordt, dat blinde mensen het navigatiemenu ook kunnen overslaan, enzovoorts.

Navigatiecomponenten en -stijl passen bij de functie van de website en de organisatie erachter.