Het list element als structuur voor je navigatie.

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

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Laat ik het eenvoudig houden: je navigatie hoort in een list. Klaar.
Dus, hoe pakken we dat aan?
Als je het onderdeel over wat er met een list mogelijk is hebt doorgenomen ben je in feite al een heel eind. Als je dan ook nog het vorige onderdeel van dit hoofdstuk tot je genomen hebt hoef je die twee alleen nog maar met elkaar te combineren en je bent een heel eind:

CSS: ul{
list-style: none;
}

a:link, a:visited{
color: #F60;
text-decoration: none;
}

a:hover, a:active{
color: #000;
text-decoration: none;
}
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

Een subnavigatie toevoegen

Om een subnavigatie in de hoofdnavigatie te verwerken kunnen we een <ul> in een <ul> zetten. Eigenlijk zetten we een <ul> in een <li>. Zo:

CSS: ul{
list-style: none;
}

a:link, a:visited{
color: #F60;
text-decoration: none;
}

a:hover, a:active{
color: #000;
text-decoration: none;
}
HTML: <ul>
<li><a href="#">item 1</a>
<ul>
<li><a href="#">subitem 1.1</a></li>
<li><a href="#">subitem 1.2</a></li>
<li><a href="#">subitem 1.3</a></li>
<li><a href="#">subitem 1.4</a></li>
</ul>
</li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a>
<ul>
<li><a href="#">subitem 3.1</a></li>
<li><a href="#">subitem 3.2</a></li>
<li><a href="#">subitem 3.3</a></li>
<li><a href="#">subitem 3.4</a></li>
</ul>
</li>
<li><a href="#">item 4</a></li>
</ul>

bekijk het resultaat

En je kunt het geheel opvrolijken door het een beetje aangenaam op te maken.
Dit doe je door slim gebruik te maken van margins en paddings, van achtergrondkleuren en borders en van het feit dat de ene <ul> het child is van de andere <ul>:

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

li{
margin: 0;
padding: 0;
font-family: verdana;
}

li a{
display: block;
text-decoration: none;
padding: 2px 5px 2px 5px;
border-top: 1px solid #FFF;
border-right: 1px solid #FEB660;
border-bottom: 1px solid #FEB660;
border-left: 1px solid #FFF;
width: 100px;
}

li a:link, li a:visited{
background: #F2C793;
color: #E47C00;
font-weight: bold;
}

li a:hover, li a:active{
background: #E47C00;
color: #FFF;
font-weight: bold;
}

li li a:link, li li a:visited{
background: #F9E5CD;
color: #E47C00;
font-weight: normal;
}

li li a:hover, li li a:active{
background: #E47C00;
color: #FFF;
font-weight: normal;
}

ul ul{
margin: 0 0 0 25px;
}
HTML: <ul>
<li><a href="#">item 1</a>
<ul>
<li><a href="#">subitem 1.1</a></li>
<li><a href="#">subitem 1.2</a></li>
<li><a href="#">subitem 1.3</a></li>
<li><a href="#">subitem 1.4</a></li>
</ul>
</li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a>
<ul>
<li><a href="#">subitem 3.1</a></li>
<li><a href="#">subitem 3.2</a></li>
<li><a href="#">subitem 3.3</a></li>
<li><a href="#">subitem 3.4</a></li>
</ul>
</li>
<li><a href="#">item 4</a></li>
</ul>

bekijk het resultaat

Je ziet dat je met inzet van minimale middelen een maximaal grafisch effect kunt bereiken. En je markup blijft schoon en eenvoudig.

naar het begin van de pagina