html-site

leer alles om je eigen succesvolle website te maken

Rollover menu maken met CSS

menu met rollover in CSS 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.

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).

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.

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.

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.

Tenslotte de stijl wanneer je met de muis over het menu heen gaat, de 'hover-actie'. Hiermee maak je het leuke effect af.

Dan nu het resultaat met de stijl:

Wanneer je de hele code wilt kun je op deze pagina terecht. Succes.

Ontwerpen voor geld