CSS- navigatiebalk
Demo: navigatiebalken
Navigatiebalken
Een gebruiksvriendelijke navigatie is belangrijk voor elke website.
Met CSS kun je saaie HTML-menu's transformeren in mooie navigatiebalken.
Navigatiebalk = Lijst met links
Een navigatiebalk heeft standaard HTML als basis nodig.
In onze voorbeelden bouwen we de navigatiebalk op basis van een standaard HTML-lijst.
Een navigatiebalk is in feite een lijst met links, dus het gebruik van de elementen <ul> en <li> is volkomen logisch:
Voorbeeld
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Laten we nu de opsommingstekens en de marges en opvulling uit de lijst verwijderen:
Voorbeeld
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Voorbeeld uitgelegd:
list-style-type: none;- Verwijdert de kogels. Een navigatiebalk heeft geen lijstmarkeringen nodig-
Standaardinstellingen van de browser instellen
margin: 0;en verwijderenpadding: 0;
De code in het bovenstaande voorbeeld is de standaardcode die wordt gebruikt in zowel verticale als horizontale navigatiebalken, waarover u in de volgende hoofdstukken meer zult leren.