Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

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:

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.

<div id="nav">

<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a>

<ul>
<li><a href="#">submenu item 2.1</a></li>
<li><a href="#">submenu item 2.2</a></li>
</ul>

</li>

<li><a href="#">menu item 3</a></li>
</ul>

</div>

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:

#nav li ul {display: none;}

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:

#nav li:hover ul {display: block;}

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.

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 workshop 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 🙂

Bedrag €*