Een elastic menu

met tekstlinks in de HTML en afbeeldingen op het beeldscherm

Deze tutorial maakt deel uit van een serie van vijf:

  1. Menu met achtergrondafbeeldingen (Zelfstudiehandboek pag.331)
  2. Gepositioneerd menu (Zelfstudiehandboek pag.333)
  3. Menu met sprites
  4. Elastic menu met afbeeldingen (Zelfstudiehandboek pag.334)
  5. Sprites met clips

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:

  1. De afbeeldingen die staan in de links in het menu buiten beeld geplaatst a:hover img { left: -999em;}
  2. De daaronderliggende tekst van de links buiten beeld geplaatst a:hover { text-indent: -999em;}
  3. En wordt de onderliggende afbeelding zichtbaar en daarmee het effect van de muisover.

Hoe het werkt

U hebt twee afbeeldingen nodig:

HTML

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.

CSS

Het geheel zal nu op het beeldscherm nog rommelig ogen, maar dat lost u op met CSS, te beginnen met de basiseigenschappen:

Dan de positionering:

Dan de afmetingen:

Tot slot het gedrag:

Samenvatting

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

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