Deze tutorial maakt deel uit van een serie van vijf:
Als uw site elastic is, zult u vast wel willen dat ook het menu meeschaalt met de lettergrootte. Maar u kunt achtergrondafbeeldingen (zoals gebruikt in het menu met sprites) geen afmetingen geven en dat is nou juist wel nodig om ze mee te laten schalen met het lettertype. Dit voorbeeld lost dat op op door de afbeeldingen in de HTML-code te plaatsen. Dan kunt u ze met CSS een hoogte en een breedte geven in em en schalen ze mee met de lettergrootte.
Maar alleen afbeeldingen zijn natuurlijk niet genoeg, u wilt ook dat, als u er met de muis overheen gaat, de afbeelding verandert. En liefst alleen met hulp van CSS, zonder dat er JavaScript bij nodig is. Dat wordt alweer iets ingewikkelder.
Verder wilt u, net als in de voorgaande voorbeelden, voor de toegankelijkheid ook dat de links eigenlijk tekstlinks zijn. Dus wordt de tekst met CSS buiten beeld geplaatst en neemt een afbeelding de plaats in, zoals ook in de voorgaande voorbeelden gebeurt. Verschil is hier wel dat de tekst pas uit beeld wordt geplaatst bij de a:hover
en niet bij de a
. Reden is dat in deze opzet, als er staat a { text-indent: -999em;}
de a:hover niets meer doet. En juist die a:hover hebben we nodig voor het effect van de afbeelding die verandert als de muis eroverheen gaat. Met a:hover wordt namelijk:
a:hover img { left: -999em;}
a:hover { text-indent: -999em;}
U hebt twee afbeeldingen nodig:
Deze afbeeldingen komen in de HTML-code te staan:
Plaats de lijst. Deze hoeft niet direct na of voor deze afbeelding te staan. Als u de lijstitems absoluut positioneert, kunnen deze overal staan. Plaats de lijst waar het u het best lijkt, waarbij u rekening houdt met screenreaders en zoekmachine-indexering:
<div id="kop"><img src="afbeeldingen/menutotaal.gif" alt=""id="menugewonestaat" />
<ul id="navigatie">
<li id="buteen"><a href="#">Home<img src="afbeeldingen/menu_home.gif" alt="" /></a></li>
<li id="buttwee"><a href="#">Over ons<img src="afbeeldingen/menu_overons.gif" alt="" /></a></li>
</ul>
</div>
Omdat de informatie van de koppeling al blijkt uit de tekst en de afbeeldingen slechts een illustratief doel dienen, worden de attributen alt
niet ingevuld. Het leidt bij het voorlezen door een screenreader alleen maar af als u hier gedwongen informatie toevoegt.
Het geheel zal nu op het beeldscherm nog rommelig ogen, maar dat lost u op met CSS, te beginnen met de basiseigenschappen:
list-style: none
.border: 0
.Dan de positionering:
position: relative
. In het voorbeeld van de gegeven HTML-code kan dit #navigatie zijn. position: absolute
.position: absolute
met top en left van 0. Omdat alle afbeeldingen gepositioneerd worden ten opzichte van hun eigen (parent)lijstitem, is dit voor alle afbeeldingen hetzelfde. U kunt hiervoor dus een aflopende kiezer gebruiken zoals #navigatie li img
. Nu wordt de tekst bedekt door de afbeelding.Dan de afmetingen:
display: block
en dezelfde height.Tot slot het gedrag:
#navigatie a:hover { text-indent: -999em;}
#navigatie a:hover img { left: -999em;}
De beschreven oplossing bestaat uit een menu waarbij de koppelingen op het beeldscherm afbeeldingen zijn. In de HTML-code bestaan ze uit afbeeldingen en tekst. Doordat de afbeeldingen in de HTML-code staan, kan het menu elastic gemaakt worden. De werking van dit menu verschilt wel met andere voorbeelden, want de tekst van de links wordt standaard bedekt door de erboven liggende afbeelding. Als de muis over een koppeling gaat, verdwijnen zowel tekst als de bovenliggende afbeelding uit beeld en komt de onderliggende afbeelding tevoorschijn.
Opera heeft moeite met de lege koppeling die overblijft. Plaats voor een stabiele werking in Opera een transparante GIF van 1x1 pixel als achtergrondafbeelding in de koppeling. Deze biedt blijkbaar precies voldoende houvast om dit op te lossen.
WaalWeb Webdesign | Voorbeelden bij Zelfstudiehandboek Websites Ontwikkelen