Site index
Portals
Artikelen
Software
Links
ContactMenu
1 bericht
• Pagina 1 van 1
Menu
door Theo » 20 Sep 2008 18:00
Inleiding
Aansluitend op het artikel [CSS] Rollover effect schrijf ik dit artikel over menu's. Ik zal proberen uit te leggen hoe je eenvoudig een leuk menu kunt maken met een leuk rollover effect erbij.
De basis
Om te begrijpen hoe het menu werkt raad ik je aan om het artikel [CSS] Rollover effect te lezen. Hierin wordt precies uitgelegd wat de codes doen met de elementen.
Verticaal menu
We beginnen met het maken van een verticaal menu. Hiervoor gebruiken we een ongeordende lijst, oftwel de<ul> -tag.
Verdere toelichting wordt in de commentaren gegeven.
HTML
Het resultaat.
Horizontaal menu
Je wilt niet altijd een verticaal menu. Soms is een horizontaal menu mooier. Dit kunnen we op dezelfde manier maken als het verticale menu. We hoeven slechts twee kleine aanpassing te maken.
Het enige wat we hoeven te doen is de lijstitems (li) naast elkaar te zetten. Dat doen we door in de stylesheetfloat: left; toe te voegen aan #menu li .
De algehele code wordt dan:
HTML
Het resultaat.
Uiteraard kun je de menu's stijlen naar je eigen wensen, eventueel met achtergrondplaatjes, zonder randen, enzovoort.
Aansluitend op het artikel [CSS] Rollover effect schrijf ik dit artikel over menu's. Ik zal proberen uit te leggen hoe je eenvoudig een leuk menu kunt maken met een leuk rollover effect erbij.
De basis
Om te begrijpen hoe het menu werkt raad ik je aan om het artikel [CSS] Rollover effect te lezen. Hierin wordt precies uitgelegd wat de codes doen met de elementen.
Verticaal menu
We beginnen met het maken van een verticaal menu. Hiervoor gebruiken we een ongeordende lijst, oftwel de
Verdere toelichting wordt in de commentaren gegeven.
HTML
- Code: Alles selecteren
<html>
<head>
<title>Mastercode - verticaal menu</title>
<style type="text/css">
#menu
{
/* de marges zetten we op nul */
margin: 0;
padding: 0;
}
#menu li
{
/* type van de style zetten we op 'none', zodat we geen opsommingsteken krijgen */
list-style-type: none;
/* breedte en hoogte opgeven */
width: 100px;
height: 30px;
/* marges instellen */
margin: 2px;
padding: 0;
/* en eventueel een randje */
border: 1px dashed blue;
}
#menu li a
{
/* van de links een block-element maken voor het :hover effect */
display: block;
/* breedte en hoogte op 100% zodat de <li> wordt opgevuld */
width: 100%;
height: 100%;
/* een uiteraard een leuk achtergrondkleurtje */
background-color: lightyellow;
}
#menu li a:hover
{
/* kleur voor het :hover effect */
background-color: lightblue;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
</ul>
</body>
</html>
Het resultaat.
Horizontaal menu
Je wilt niet altijd een verticaal menu. Soms is een horizontaal menu mooier. Dit kunnen we op dezelfde manier maken als het verticale menu. We hoeven slechts twee kleine aanpassing te maken.
Het enige wat we hoeven te doen is de lijstitems (li) naast elkaar te zetten. Dat doen we door in de stylesheet
De algehele code wordt dan:
HTML
- Code: Alles selecteren
<html>
<head>
<title>Mastercode - horizontaal menu</title>
<style type="text/css">
#menu
{
/* de marges zetten we op nul */
margin: 0;
padding: 0;
}
#menu li
{
/* type van de style zetten we op 'none' */
list-style-type: none;
/* Naar links laten floaten */
float: left;
/* breedte en hoogte opgeven */
width: 100px;
height: 30px;
/* marges instellen */
margin: 2px;
padding: 0;
/* en eventueel een randje */
border: 1px dashed blue;
}
#menu li a
{
/* van de links een block-element maken voor het :hover effect */
display: block;
/* breedte en hoogte op 100% zodat de <li> wordt opgevuld */
width: 100%;
height: 100%;
/* een uiteraard een leuk achtergrondkleurtje */
background-color: lightyellow;
}
#menu li a:hover
{
/* kleur voor het :hover effect */
background-color: lightblue;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Pagina 1</a></li>
<li><a href="#">Pagina 2</a></li>
<li><a href="#">Pagina 3</a></li>
</ul>
</body>
</html>
Het resultaat.
Uiteraard kun je de menu's stijlen naar je eigen wensen, eventueel met achtergrondplaatjes, zonder randen, enzovoort.
- Theo
- Oprichter
- Berichten: 1795
- Geregistreerd: 11 Jun 2005 17:43
- Woonplaats: in_array()
1 bericht
• Pagina 1 van 1
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 1 gast