CSS menu's (verticaal)

toegankelijk & mooi

Katinka Hesselink 2006

CSS is handig voor het extern regelen van de opmaak van een pagina. Belangrijk daarbij zijn de menu's. [Meer voordelen van CSS ] Menu's staan centraal in de navigatie van een website. Voor eenvoudige sites (of stukken van een site) kun je vaak toe met een menu. Voor ingewikkelder sites is een submenu vaak handig. Deze submenu's zijn vaak heel modern als 'drop down'-menu geregeld. Dit kan met CSS of Javascript. In beide gevallen echter zit er een toegankelijkheidsaspect aan: hoe zorg je ervoor dat een gebruiker die niet goed met een muis om kan gaan (je grootmoeder bijvoorbeeld) toch bij het submenu komt? Ik vermijd deze interactieve menu's doorgaans. Volgens mij kan je meestal heel goed toe met een menu en een submenu.

De basis voor een goed CSS-menu is een lijst 1. Wat is een menu tenslotte anders dan een lijst van links? Ik kies voor een <ul> lijst - unordered list. Dat zorgt voor een opmaak als volgt:

De bij behorende code:

<ul>
<li><a href="index.html">webdesign</a></li>
<li><a href="index.html">webontwerp</a></li>
</ul>

Nog niet echt een menu. Eerst zorgen we ervoor dat we in de code duidelijk maken dat deze lijst een menu is, niet zo maar een lijst. En omdat er geen ruimte is voor meer dan één menu, geef ik het een id 2 :

<div id="menu">
<ul>
<li><a href="index.html">webdesign</a></li>
<li><a href="index.html">webontwerp</a></li>
</ul>

</div>

In de CSS zet ik o.a. het volgende:

#menu ul li a
	{padding: 5px;
	margin: 0;}
#menu ul, 
#menu ul li
	{list-style-type: none;
	display: inline;
	padding: 0;
	margin: 0;}

#menu {float: right; 
	padding: 0; 
	margin: 5px 0;
	text-align:center;}

De padding is gewoon een stilistische keuze, net als de text-align. list-style-type: none zorgt ervoor dat we de bullets kwijt zijn. Display: inline zorgt ervoor dat menu items niet meer automatisch op de volgende regel komen. Dit is handig bij horizontale menu's. Bij de verticale menu's is het feitelijk een manier om IE ervan te overtuigen dat er geen ruimte hoeft tussen de list-elementen. Display inline zorgt ervoor dat verschillende IE-eigenaardigheden omzijlt worden. In dit geval heb je zonder display: inline te veel afstand tussen de li -elementen.

Belangrijk detail is dat ik de padding op de link zet, niet op de lijst elementen. De li en ul elementen krijgen padding en margin: 0, zodat de verschillende interpretaties van dat soort zaken door verschillende browsers niet in de weg gaan zitten. 0 is namelijk voor elke browser 0. Dit is ook de reden dat zowel #menu ul als #menu ul li een specifieke stijl krijgen. Het zou op zichzelf genoeg moeten zijn om list-style-type voor een van beide op none te zetten. Voor de zekerheid echter zet ik ze voor allebei op none. Het Resultaat is voorlopig nog niet echt boeiend.

#menu a {display: block; 
	padding: 5px;
	margin: 1px;
	line-height: 2em;
	text-decoration: none;
	border: solid 1px;}
#menu a:hover
	{color: #fff; 
	background: #000;}

Nu gaat het ergens op lijken, vooral als je er met de muis overheen gaat. Display: block zorgt ervoor dat elk a element op een nieuwe regel komt. Een element met standaard instelling display: block is bijvoorbeeld een p (paragraaf). Ik gebruik de line-height om de hoogte van de button aan te geven, zodat de tekst erin automatisch verticaal gecentreerd wordt. Dit werkt uiteraard alleen als je tekst niet over twee regels gaat. Dit is echter doorgaans voor menu's toch al belangrijk. Daarom houden we de tekst kort. Text-decoration: none zorgt ervoor dat de standaardinstelling van een link, nl. dat deze onderstreept wordt, uitgezet wordt. Om er nu voor te zorgen dat ook IE-gebruikers het hele menu-item als button kunnen gebruiken voegen we een width toe aan zowel #menu als aan #menu a:

#menu {width: 10em;}
#menu a {width: 99.9%;}

Nu heeft het menu als geheel een breedte van 10em - d.w.z. 10 letters 'm'. Het element a (dus de link) heeft een breedte van in de praktijk 100% van de breedte van het menu: oftewel is even breed als het menu. Ik kies voor 99.9% omdat dit door alle browsers begrepen wordt. Opera schijnt problemen te hebben met 100%. Als je je menu heel precies opmaakt, wil met deze methode de link [a] in Firefox nog weleens buiten het menu steken. Dat is op te lossen door geen breedte aan die link op te geven. Om toch te bereiken dat IE de hele button klikbaar maakt, zul je die width 99.9% ergens moeten plaatsen waar andere browsers er geen last van hebben. Ik kies, op advies van de makers van de nieuwe IE7 browser, voor een speciaal IE stylesheet. Uiteindelijke resultaat

Voetnoten

1 Op diverse pagina's op mijn site is een iets andere methode voor CSS-menu's gekozen, zonder lijsten. Bovenstaande methode werkt namelijk ook als je gewoon een serie links achter elkaar zet. Hieraan zitten drie nadelen. Ten eerste: semantisch klopt het niet: het gaat om een opsomming van links: gebruik dan ook een lijst in je code. Ten tweede: als je niet semantisch aan geeft dat het om een lijst gaat, begrijpt een zoekmachine niet dat het om losse woorden gaat, die geordend zijn. Ten derde: sprekende browsers hebben moeite met tekst die niet in de code gescheiden is van daarop volgende tekst. Bijvoorbeeld de volgende code:

<a href="">boom</a><a href="">tuin</a>

Hiervan kun je keurig twee menu-items maken. Een teksteditor ziet echter (tenzij je er een spatie tussen zet, maar denk daar maar eens aan) boomtuin, zonder spatie. Dit voorlezen kan een probleem worden dat er niet zou zijn als er boom tuin had gestaan. Het gebruik maken van een lijst voorkomt dus een aantal problemen.

2 Een class kan meer dan een keer op een pagina voorkomen. Een id als het goed is slechts één keer. Ik zou ervoor kunnen kiezen de id rechtstreeks aan de ul (unordered list) te geven, maar in de praktijk blijkt het nog wel eens handig zaken onderaan het menu te hangen, die niet in de lijst passen. Zo zit de code voor de google-ads die je her en der op deze site terug vindt nogal eens in de menu-div.

Horizontale menu's

Webdesign boeken