Een horizontale navigatie in een list.

Bron: http://www.sceneone.nl/navigatie/horizontaal.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Tot nu toe hebben we vertikaal gepositioneerde navigaties behandeld. Het kan goed zijn dat je een horizontale navigatie hebben wil. Kan dat dan ook in een list? No problem.

Wat je van een list (de ul) én van de losse list items (de li's) moet weten is dat het block elementen zijn. Wat we eigenlijk willen is dat de li's op één lijn komen te staan. We moeten dus van die block elementen, inline elementen maken:

CSS: ul{
list-style: none;
}

li{
display: inline;
margin: 0 10px 0 0;
}
HTML: <ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>

bekijk het resultaat

Is dat alles? Dat is alles. Je moet het natuurlijk nog wel even een beetje leuk opmaken:

CSS: ul{
list-style: none;
padding: 10px 0 0 0;
}

li{
display: inline;
margin: 0 10px 0 0;
}

a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 6px 5px 0 5px;
}

a:link, a:visited{
background: transparent url(../_img/hor_rood.gif) no-repeat top center;
border-top: 3px solid #DA2502;
border-bottom: 2px solid #DA2502;
color: #000;
}

a:hover, a:active{
background: transparent url(../_img/hor_geel.gif) no-repeat top center;
border-top: 3px solid #F5EC00;
border-bottom: 2px solid #F5EC00;
color: #999;
}
HTML: <ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
</ul>

bekijk het resultaat

naar het begin van de pagina