Rollover menu
Wanneer je een menulijst hebt met actieve links kun je deze verfraaien door gebruik te maken van css.
Dit heeft natuurlijk de voorkeur boven het gebruik van plaatjes en javascript aangezien het
veel minder ruimte inneemt en dus sneller laadt.
De eerste stap die we maken is het opzetten van de onderdelen van het menu. We maken een menu
dat bestaat uit zes onderdelen, en deze zetten we in een ongeordende lijst <ul>.
de verschillende onderdelen van deze lijst bestaan altijd uit listitems (<li>).
We zetten de lijst in een div. We hebben de url verder niet ingevuld, maar dat kan iedereen
zelf wel bedenken.
Dit is het resultaat:
De volgende stap is het maken van de stijl die erbij hoort. In het artikel over
descendant delectors kon je al lezen over het
gebruiken van stijlen die in een div horen. In ons geval de navigatie-div.
We beginnen met de stijl voor de div zelf.
#navigatie {
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
}
Hierbij stellen we onder andere het lettertype en de lettergrootte vast, we bepalen de breedte van
de div.
Vervolgens gaan we verder met het stijlen van de lijst zelf. De list-style zetten we op none
zodat er geen tekens voor de lijstitems staan. Margin en padding zetten we op nul (0).
#navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}
Nu gaan we naar de eigenlijke lijstitems zelf. Hierbij hoeven we alleen de margin op nul te
zetten zodat er geen witruimte om het blokje heen komt en we stellen de bovenrand
(border-top) in. De anderen worden bepaald door de link (<a>) zometeen.
#navigatie ul li {
margin: 0;
border-top: 1px solid #003;
}
De volgende stap is het opmaken van de link (<a>). Links zijn inline elementen, dat
wil zeggen dat ze alleen de tekst beinvloeden, er volgt geen enter voor en na een inline
element, in tegenstelling tot bijvoorbeeld <p>, wat dan ook een block-level element
wordt genoemd. In CSS kun je deze basisinstelling veranderen met ‘display: block;’.
Hiermee wordt een inline element een block-level element. In ons geval zort dit ervoor dat
het hele blok aanklikbaar wordt. Ook bepalen we hier de randen, tekstkleur, tekst-decoratie
en breedte.
#navigatie ul li a {
display: block;
padding: 2px 2px 2px 4px;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}
Wanneer de breedte op 100% gezet worden dan gaat dit prima behalve in Internet Explorer 5.0
voor Macintosh en in Netscape 6.0. Dat ondervangen we door even een extra stijl in te voegen
voor deze twee browsers, dat wat ze wel herkennen en dit dus ook goed uitvoeren.
html>body #navigatie ul li a {
width: auto;
}
Tenslotte de stijl wanneer je met de muis over het menu heen gaat, de ‘hover-actie’.
Hiermee maak je het leuke effect af.
#navigatie ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
Wanneer je de hele code wilt kun je op deze pagina
terecht. Succes.
