CSS menu's – lijsten vullen met achtergrondafbeeldingen
We hebben gezien hoe de Volkskrant een eenvoudige lijst gebruikt voor een submenu. Dit gebeurt ook met het hoofdmenu, maar met het verschil dat daar wel afbeeldingen gebruikt worden per menu-item (bij het submenu was dit alleen de achtergrond voor de hele menubalk). Moest je voorheen nog met mouseOvers andere afbeeldingen inladen, met een paar CSS instructies kan je hetzelfde een stuk eenvoudiger bereiken. Hoe doet de Volkskrant dit?
1. De basislijst
Ook hier is de basis van het menu een lijst. Dit keer heeft elk lijstelement wel een unieke class: mainItem1 tot en met mainItem7 (ik zou in dit geval toch een ID gebruiken, maar goed). Deze staan in een UL (ongeordende lijst) en die staat weer binnen een speciale DIV (class=mainItems).
Net als in het submenu zorgt een stukje CSS (in menustijl.css) ervoor dat de lijst geen bullets heeft. Dat ze horizontaal staan wordt nu anders geregeld, namelijk door de opdracht float:left en door (bij elke hyperlink) precies op te geven waar elk onderdeel van het menu moet staan.
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
2. Achtergrondafbeeldingen
Elk element heeft twee achtergrondafbeeldingen: één grijze (die je ziet als het element actief is of als je met je muis erover gaat) en één blauwe (de neutrale stand). Het actieve element heeft als class 'active'. De volgende CSS code zorgt ervoor dat je de grijze versie ziet:
background-image: url(/volkskrant.nl/images/menu/item1.gif);
background-position: left bottom;
background-repeat: no-repeat;
display: block;
height: 25px;
left: 0;
position: absolute;
width: 66px;
}
#header .bottom .mainItems li.mainItem1 a:hover {
background-image: url('/volkskrant.nl/images/menu/item1_active.gif');
}
#header .bottom .mainItems li.mainItem1 a.active {
background-image: url(/volkskrant.nl/images/menu/item1_active.gif);
}
De truc hier is dat het eerste stukje code de standaardachtergrond inlaadt (de blauwe versie); daarna volgen 'uitzonderingen' de hover status (a:hover) en de 'active' status (a.active). Het grote voordeel is dat er geen javascriptcode aan te pas komt. De CSS code had iets compacter gekund door deze laatste twee regels te combineren.
Een ander verbeterpunt voor de Volkskrant kan zijn om hier een sprite te gebruiken.
