Usability experts adviseren dat de hoofdnavigatie van je website niet meer dan 9 items bevat. Dat is voor veel websites ook meer dan genoeg, maar als je een uitgebreide website hebt kun je natuurlijk behoefte hebben aan een uitgebreider menu. In zo’n geval is een dropdown menu een logische keuze.

In deze tutorial lees je hoe je een dropdown menu maakt waarbij de submenu items automatisch uitvouwen wanneer je met de muis over het parent item in de hoofdnavigatie gaat (hover). Daarbij maken we uitsluitend gebruik van CSS.

In dit artikel lees je:

• Dat een eenvoudig HTML menu bestaat uit een lijst met ul en li elementen
• Dat je voor het dropdown effect het submenu moet verbergen met “display:none”
• Hoe je het submenu weer kan weergeven bij een mouse over

Een eenvoudig HTML menu

In dit artikel heb je kunnen lezen hoe je een navigatiemenu maakt met HTML en CSS. De uitgebreide code en uitleg daarvoor vind je ook in dat artikel. Zorg dat je deze basis onder de knie hebt, want ik gebruik het menu uit dat artikel tevens voor dit artikel. Als je WordPress gebruikt is je menu waarschijnlijk op dezelfde manier opgebouwd.

De submenu items verbergen

Met bovenstaande code creëren we een gewoon navigatiemenu, waarbij de submenu items standaard zichtbaar zijn. Om er een dropdown menu van te maken moeten we eerst de submenu items standaard verbergen. Daarvoor gebruiken we de volgende code in de stylesheet:

Als het goed is weet je dat een navigatiemenu bestaat uit een lijst, aangegeven met het element <ul>. Deze lijst bestaat uit diverse menu items, ieder aangegeven met een <li> element. Een submenu is eigenlijk gewoon een eigen navigatiemenu, maar dan binnen een <li> element.

De bovenstaande code bestaat uit de volgende onderdelen:

• #nav is de id van ons navigatiemenu, zodat de code alleen van toepassing is op dit menu
• li ul geeft aan dat de code bedoeld is voor een <ul> element dat binnen een <li> element valt (een submenu dus)
• {display: none;} vertelt de browser dat hij dit <ul> element niet mag weergeven

De submenu items weergeven bij een hover (mouse over)

Met bovenstaande code hebben we het submenu standaard verborgen, maar dit moet natuurlijk wel tevoorschijn komen als we met de muis over het betreffende <li> element gaan. Daarvoor zetten we de volgende code onder bovenstaande code in de stylesheet:

De bovenstaande code bestaat uit de volgende onderdelen:

• #nav, de id van ons menu
• li:hover geeft aan dat de code bedoeld is voor het <li> element waar de muis overheen gaat
• ul geeft aan dat de code bedoeld is voor het <ul> element dat onder dat betreffende <li> element valt
• {display: block;} zorgt ervoor dat dit element nu wel weergegeven wordt.

Responsive hamburger dropdown menu

Wil je een responsive “hamburger” dropdown menu maken? Lees dan deze tutorial. Dat is echter wel een stuk lastiger dan bovenstaande methode, dus daar heb je wel wat meer kennis voor nodig.