Hoe maak je een uitklapmenu met HTML en CSS?
Een horizontaal menu waarbij het submenu uitklapt. Erg handig wanneer de ruimte horizontaal niet zo breed is en je wilt er toch mogelijkheden onder zetten.
Dit menu is geheel gemaakt met HTML en CSS.
Om het menu op te zetten gebruiken we een ongeordende lijst (ul)
In een van de menu onderdelen plaatsen we een ‘geneste’ lijst. Een ‘geneste’ lijst betekent dat deze onderdeel is van een link in het menu.
De HTML code voor deze pagina:
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="utf-8" /> <title>Uitklapmenu</title> <link rel="stylesheet" type="text/css" media="all" href="stijl.css" /> </head> <body> <div id="navsite" class="clearfix"> <p>Site navigatie:</p> <ul> <li><a href="/">Home</a></li> <li><a href="/over-ons/">Over ons</a></li> <li><a href="/archief/">Archief</a></li> <li><a href="/schrijven/">Schrijven</a> <ul> <li><a href="/schrijven/tutorials">Tutorials</a></li> <li><a href="/schrijven/boeken">Boeken</a></li> </ul> </li> <li><a href="/video/" id="current">Video</a></li> <li><a href="/contact/">Contact</a></li> </ul> </div> </body> </html>
Hier zie je dus dat menu onderdeel ‘schrijven’ een submenu bevat met ‘Tutorials’ en ‘Boeken’.
Deze submenu items moeten straks niet zichtbaar zijn op het moment dat je de pagina bezoekt. Pas als je met de muis over het item ‘Schrijven’ gaat dan moeten de beide submenu onderdelen zichtbaar worden.
De lijst ziet er zonder CSS kaal uit:
Menu zonder dat er CSS gebruikt wordt
Vandaar dat we CSS gaan toevoegen. Het woord ‘Site navigatie’ hoeft niet zichtbaar te zijn, daarvoor gebruik je ‘display: none;’.
De lijst dan. Deze staat in de div met id ‘nav’, wat natuurlijk voor navigatie staat. Deze lijst gaan we eerst eens in algemene zin vormgeven.
#navsite ul { width: 100%; float: left; padding: 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navsite ul li { list-style: none; margin: 0; float: left; }
Met bovenstaande code maken we het menu horizontaal. Er komt geen lijst teken voor het item te staan en de breedte zetten we op 100%.
Daarnaast bepalen we het lettertype. Het resultaat is als volgt:
Stap 2, de eerste regels CSS
Nu zie je meteen dat er nog geen tussenruimte tussen de verschillende onderdelen is. Daarnaast is er nog niets aan vormgeving gedaan. We gaan dus de volgende stap zetten.
Deze stap is het regelen van de link die geplaatst is in de lijst. Elk onderdeel van de lijst is een link. Hier kunnen we dus gewoon gebruik maken van display block, om de link als blok element te laten fungeren. Daarom kunnen we ook gebruik maken van padding en margin, de ruimte om de link heen.
#navsite ul li a { padding: 12px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background-color: #666; text-decoration: none; display: block; width: 7em; }
Wat je nu ziet is al meer een menu, maar we zijn er natuurlijk nog niet.
Stap 3, vorm geven van een uitklap menu met CSS
We willen de links natuurlijk ook voorzien van een andere kleur en mouseover kleur. Dat doen we door de selectors :link, :visited, :hover en :active te gebruiken (in die volgorde, te onthouden met LoVe HAte).
#navsite ul li a:link { color: white; } #navsite ul li a:visited { color: #667; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover { color: #000; background-color: #aae; border-color: #227; }
Wellicht is het je opgevallen dat in de HTML code aan het onderdeel video de ID ‘current’ is toegevoegd. Dit is om aan te geven welke pagina op het moment van bekijken in beeld is. De actieve pagina krijgt dus een unieke ID mee met de naam ‘current’.
Natuurlijk kun je deze specifieke ID een eigen stijl meegeven. Dat doen we dus zo:
#navsite ul li a#current { background-color: white; border-bottom: 1px solid white; color: #448; margin-bottom:-1px; }
Hier het menu. Je ziet dat de mouseover ook in beeld is. Een niet actieve pagina tab verandert van kleur als je er met je muis over gaat.
Stap 4, CSS bij het uitklapmenu
Bijna klaar, maar nu het belangrijkste aspect natuurlijk, het uitklappen van het menu zelf.
Dat gaan we doen door eerst het submenu niet in beeld te hebben. Als je niets doet dan is het de bedoeling dat je geen submenu ziet in beeld. Dit submenu moet pas in beeld komen als je met de muis over het bewuste tabblad heen gaat.
Dat zo, eerst het submenu buiten beeld zetten. Makkelijk om dat te doen door position te gebruiken. Deze zetten we op absolute en dan plaatsen we deze 999 pixels buiten het scherm.
#navsite ul li ul { position: absolute; width: 7em; left: -999em; float: none; border-bottom: none; }
Je ziet in de code dus ul (de lijst), li (de lijstitem) en dan weer ul, wat de ongeordende lijst is in een lijst item. Kijk voor je eigen gemak ook nog eens even in de html code.
In het resultaat zie je direct dat je een gewoon tabblad menu hebt wat er al goed uitziet.
Maar nu hebben we natuurlijk het submenu weggezet. Dat zal in de huidige situatie niet tevoorschijn komen. Daar gaan we nu verandering in brengen door gebruik te maken van de hover optie voor het menu onderdeel wat het submenu krijgt.
#navsite ul li:hover ul { left: auto; } #navsite ul li ul li a { background: #999; border: 1px solid black; margin-top: 4px; }
Met het tweede stukje, regel 5 en verder, maken we het submenu item nog even wat mooier. We hebben nu het gewenste resultaat.
Resultaat van uitklap menu gemaakt met CSS
Voor de juiste werking moet er nog gebruik gemaakt worden van clearfix. Dit om ervoor te zorgen dat het geheel wel op zijn plek blijft staan en niet ‘raar’ gaat doen.
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* for IE6 */ * html .clearfix { height: 1%; } /* for IE7 */ *:first-child+html .clearfix { min-height: 1px; }
Dit artikel is geüpdatet op op 26 mei 2019
Bjorn, Ik hou van je!
Het is me nu, met jouw tutorial én lang prutsen eindelijk gelukt om een uitklapmenu te maken voor mijn site. Site is nog niet in de nieuwe vorm in de lucht (ik moet nog meer uitklapmenu'tjes bouwen).
Bedankt dat je dit deelt!
Ik ga er bijna van blozen 😉
Graag gedaan!
Bjorn
Beste Bjorn, ik ben nog bezig het uitklapmenu aan te passen aan mijn wensen maar waar ik maar niet in slaag de blauwe letters in het hoofdmenu te vervangen in een andere kleur. Kun je mij een tip geven?
Bij voorbaat dank
Groet
Paul
LS,
'k Heb de zaken overgenomen, maar het menu werkt alleen verticaal, omdat je heb vergeten er een border aan toe te voegen