Een navigatie menu maken met HTML en CSS

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:

• Dat een eenvoudig HTML menu bestaat uit een lijst (ul)
• Dat deze lijst bestaat uit li elementen, waarbij elk menu item een li element is
• Dat een submenu een nieuwe lijst (ul) binnen een li element is
• Hoe je het menu kunt stylen met CSS
• Hoe je buttons of tabbladen van je menu items kunt maken met CSS

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:

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:

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:

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:

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:

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:

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:

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:

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

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

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.

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

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.