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>
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>
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>
Je ziet dat je met inzet van minimale middelen een maximaal grafisch effect kunt bereiken. En je markup blijft schoon en eenvoudig.