CSS menu's (horizontaal)

toegankelijk & mooi

Katinka Hesselink 2006

De basis voor een goed CSS-menu is een lijst 1. Het eerste stuk is precies het zelfde als bij verticale menu's

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 submenu is, niet zo maar een lijst. En omdat er geen ruimte is voor meer dan één submenu, geef ik het een id 2 :

<div id="submenu">
<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:

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

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

Het Resultaat is voorlopig nog niet echt boeiend, en precies het zelfde als bij een verticaal menu

#submenu a {white-space: nowrap; 
padding: 5px;
margin: 1px;
line-height: 2em;
text-decoration: none;
border: solid 1px;}
#submenu a:hover
{color: #fff;
background: #000;}

Nu gaat het ergens op lijken, vooral als je er met de muis overheen gaat. white-space: nowrap  zorgt ervoor dat de a elementen nooit breken: ze gaan als geheel op een nieuwe regel. Overigens: in de code staan wat extra spaties (na </a> ): anders gaan de submenu-elementen helemaal niet naar een nieuwe regel! 

<div id="submenu">
<ul>
<li><a href="bladiebla">bla, bla, bla</a> </li>
<li><a href="meerbla">meer bla</a> </li>
</ul>
</div>

Omdat het bij een horizontaal menu niet veel kan schelen hoe breed de elementen zijn, zijn we nu klaar. Uiteindelijke resultaat