Menu maken met CSS
Met behulp van CSS kun je heel goed een overzichtelijk menu maken. Wij helpen je hiermee op weg, en geven je een voorbeeld van een horizontaal menu en een verticaal menu.
HTML
Laten we beginnen met de HTML-code. Die is heel simpel, want we maken gewoon gebruik van een simpele HTML-lijst. Wil je meer weten over lijsten, lees dan ons artikel Lijsten met CSS en HTML.
We hebben een div met het id menu toegevoegd, zodat we straks in de CSS-code precies kunnen aangeven voor welk element de nieuwe opmaak moet gelden.
Hieronder zie je het resultaat van de bovenstaande code. Dit ziet er nog niet uit als een menu, dus wordt het tijd om wat CSS toe te voegen.
CSS
Horizontaal menu
We beginnen met de volgende CSS-code.
Hierboven zie je het resultaat van de code. Door list-style-type op none te zetten, wordt er geen rondje toegevoegd voor elk lijst-item. Daarnaast zetten we display op inline - hierdoor worden de witregels voor en achter elk lijst-item weggehaald. Dit is handig als we straks een horizontaal menu willen maken. Verder zetten we margin op 0, om geen onnodige ruimte om de menu-items te krijgen.
Het begint er al een beetje op te lijken. Nu wordt het tijd voor wat opmaak.
Hierboven zie je het resultaat van de code. Met padding hebben we de links wat groter gemaakt. Doordat we er ook een achtergrondkleur aan hebben toegevoegd, zien de links er nu uit als menuknoppen. Nu wordt het tijd voor een mouse-over effect: een effect als we met de muis over een menu-item heen gaan.
Hierboven zie je het resultaat van de code. Nu gaan we naar de optie kijken om het menu te veranderen in een verticaal menu.
Verticaal menu
Om het bovenstaande horizontale menu te veranderen in een verticaal menu, zijn er maar een paar kleine aanpassingen nodig. Allereerst halen we display: inline bij #menu ul li weg. Dit zorgde ervoor dat de menu-items naast elkaar geplaatst werden. Nu worden ze dus onder elkaar geplaatst, alleen zul je zien dat de knoppen over elkaar heen geplaatst worden. Dit lossen we op door display: block toe te voegen aan #menu ul li a. Hierdoor worden de knoppen netjes aansluitend tegen elkaar aan geplaatst.
Nu zie je dat het menu wel erg breed is. Dit kunnen we oplossen door simpelweg een breedte op te geven voor ul. Dit wordt dan de uiteindelijke code voor het verticale menu:
Slot
Zoals je ziet zijn er legio mogelijkheden voor het ontwerpen van je eigen menu met CSS. Kijk ook eens naar onderstaande links voor meer informatie.
Links
- Dynamic Drive CSS: horizontale menu's & verticale menu's - om inspiratie op te doen: veel voorbeelden van goede CSS menu's.
- CSS Menu Maker - hier kun je automatisch een menu genereren, als je geen zin hebt om er zelf één te maken.
