040 848 80 69 bob@bobdewebbouwer.com
Het navigatiemenu is één van de belangrijkste onderdelen van je website. In deze tutorial lees je hoe je een navigatiemenu maakt met HTML en CSS. Deze tutorial is onderdeel van de webdesign basics reeks en daarom wordt alles uitvoerig uitgelegd (ook de dingen die misschien erg voor de hand liggen).

In dit artikel lees je:

Een eenvoudig HTML menu

Om te beginnen maken we een eenvoudig menu in HTML. Voeg de volgende code toe op de plaats waar je menu moet komen:

<div id=”nav”>

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

</div>

Het menu bestaat uit de volgende onderdelen:

  • <div id=”nav”>
    Als het goed is weet je dat een website is opgebouwd uit divs (als je dat nog niet weet is deze tutorial waarschijnlijk nog een stapje te ver voor je). Ook het menu heeft een eigen div gekregen, nav genaamd. Hierdoor kunnen we het menu zometeen eenvoudig stylen.
  • <ul>
    Met deze tag laten we de browser weten dat het menu een lijst is met meerdere items (ul staat voor unordened list, ofwel ongeordende lijst).
  • <li>
    Elk item in dit lijstje (ieder menu item dus) is een list item, aangegeven door de tag <li>
  • <a href=”#”>
    Dit is de code voor de eigenlijke link. # moet je vervangen door de URL.

Natuurlijk sluiten we elke tag die we openen ook weer netjes af met een </tag>, dus elke <li> wordt afgesloten met </li> enzovoorts.

In HTML 5 kun je in plaats van <div id=”nav”> ook gewoon <nav> gebruiken om aan te geven dat het een navigatiemenu betreft, maar omdat oudere browsers daar niet mee kunnen omgaan gebruik ik voorlopig nog gewoon id’s. Als je wilt kun je ook beide gebruiken. Maar goed, laten we niet te moeilijk maken…

Op onze site ziet het menu er nu zo uit :

Een HTML submenu

In verband met de overzichtelijkheid wordt geadviseerd niet meer dan 9 menu items in het hoofdmenu van je website te plaatsen. Als je veel pagina’s hebt is het gebruiken van submenu’s dus een logische oplossing. Een eenvoudig HTML submenu ziet er als volgt uit:

<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 dikgedrukte code is toegevoegd aan de code die we zojuist al hadden. Zoals je ziet is er eigenlijk gewoon weer een lijstje ( <ul> ) bijgekomen met 2 items erin ( <li> ).

Er is echter iets bijzonders met dit lijstje, het is namelijk een submenu van menu item 2.

  • Een submenu is dus eigenlijk gewoon een eigen navigatiemenu, maar dan binnen een <li> element
  • In dit geval valt het submenu binnen het <li> element van menu item 2; de </li> van menu item 2 volgt dus pas na het submenu.
  • Daarom staat dit submenu ook tussen menu item 2 en menu item 3 in.
  • Menu item 2 is dus het parent element van submenu items 2.1 en 2.2.

Op de website ziet dat er zo uit:

 


Het HTML menu stylen met CSS

Ik ga ervan uit dat je de basis CSS eigenschappen al kent en dus bijvoorbeeld weet hoe je een achtergrondkleur en een letterkleur instelt. Ik behandel hier dan ook alleen de specifieke stijlregels voor het menu.

#nav

In bovenstaand voorbeeld hebben we ons menu de id “nav” gegeven. Hiermee stel je dingen als de breedte en achtergrond in. Bij onze website ziet die code er zo uit:

#nav { width: 825px;  background:url(/hout.png); }

De eerste waarde, “width”, is de breedte van het menu. De tweede waarde, “background”, bepaalt de achtergrond. Dat is in ons geval de afbeelding “hout.png”, maar je kunt hier ook een achtergrondkleur instellen. Verder heeft ons menu ook nog een schaduw en afgeronde hoeken maar dat gaat wat te ver voor deze tutorial.

#nav ul en #nav li

Zoals je hierboven hebt gelezen bestaat ons menu uit een lijst met menu items. Deze kun je stylen met #nav ul  (voor de lijst) en #nav li (voor de menu items). Meestal hoef je aan de #nav ul niet veel te stylen (misschien wat margin of padding) maar de #nav li vraagt wel wat styling.

Ten eerste moet je bepalen of je een verticaal menu (alle menu items onder elkaar) of een horizontaal menu (alle menu items naast elkaar, zoals op deze site) wilt hebben. Standaard staan de menu items onder elkaar. Als je de menu items naast elkaar wilt hebben voeg je de volgende code toe:

#nav li { float: left;  display: inline; }

Je kunt in plaats van de float eigenschap natuurlijk ook de position eigenschap gebruiken.

Vervolgens ga je bepalen hoe ver de menu items uit elkaar moeten staan. Dat doe je door een margin in te stellen. Op onze site hebben we een rechter marge van 5 pixels ingesteld:

#nav li { float: left;  display: inline;  margin-right: 5px; }

Verder dien je te bepalen wat voor teken je voor ieder menu item wilt hebben. Wij hebben er voor gekozen om geen teken te gebruiken en hebben daarvoor de volgende code gebruikt:

#nav li { float: left;  display: inline;  margin-right: 5px;  list-style-type: none; }

Je kunt hier natuurlijk ook een andere waarde invullen dan “none”, bijvoorbeeld “circle” voor een rondje of “square” voor een vierkantje. Het is ook mogelijk een eigen afbeelding te gebruiken maar dan gebruik je “list-style-image” in plaats van “list-style-type”.

Tot slot stel je meestal nog een andere achtergrondkleur in voor als je er met de muis overheen gaat (dat noemen we hover). In onderstaande code hebben we een witte achtergrond ingesteld voor de hover:

#nav li:hover { background: #fff; }

 


Je menu items als buttons of tabbladen

Zoals je ziet hebben wij onze menu items vormgegeven als tabbladen. Om te beginnen maak je buttons van de menu items door padding toe te voegen, in dit geval 10px rondom:

#nav li { padding: 10px; }

Vervolgens geef je de buttons een afwijkende achtergrondkleur, bijvoorbeeld grijs:

#nav li { padding: 10px;  background: #666; }

Je hebt nu gewone rechthoekige buttons. Om er tabbladen van te maken moet je de twee bovenste hoeken afronden. Dat doe je als volgt:

#nav li { padding: 10px;  background: #666;  border-radius: 5px 5px 0px 0px; }

En klaar zijn je tabbladen!

 


Niet vergeten: je menu items zijn hyperlinks

Veel beginnende CSS designers willen de tekst van een menu item stylen en snappen maar niet waarom onderstaande code niet wil werken.

#nav li { color: #666; }

Dat komt omdat je niet de li zelf moet stylen, maar de hyperlink. De juiste manier is dus bijvoorbeeld:

#nav li a:link { color: #666; }
#nav li a:visited { color : #666; }
#nav li a:hover { color : 000; }

 


Dropdown menu

Usability experts adviseren niet meer dan 9 menu items te gebruiken in je hoofdmenu. Als je een uitgebreider menu hebt kun je beter gebruik maken van een dropdown submenu. In dit artikel lees je hoe je een dropdown submenu maakt.

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 €*