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>
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>