Met dit voorbeeldje laat ik zien hoe je met een lijstje met hyperlinks, waarin een <span> met een toelichtinkje zit opgenomen per link, het effect van dynamische content simuleert. Als je met de muiscursor hovert boven één van de menu-items, verschijnt in de rechter bovenhoek een kleine toelichting.
Geestig, niet?
Om dit effect te bereiken, maak je gebruik van de pseudo classes die je op het anchor element kan toepassen. Zie ook de uitleg hierover bij het w3.org.
In het lijstje met hyperlinks, dat redelijk standaard is als navigatiemenu, neem je per link in het <a>-element een <span> op, waarin je de tekst plaatst die je als uitleg wil laten verschijnen bij hoveren van het betreffende item. De lijst met menu-items maak je op met CSS, zoals je dat gebruikelijkerwijs doet met je navigatiemenu.
De <span> met dynamische content geef je daarbij in eerste instantie display:none; als kenmerk in je CSS-file mee.
Als je menu op z'n plaats staat en het juiste uiterlijk heeft, begin je aan de verborgen teksten. Deze wil je laten tonen als de bezoeker zijn muiscursor boven een menu-item heeft of als een menu-item de focus heeft. Je maakt dus in je stijlblad een selector die die condities betreft:
ul#menu a:focus span,
ul#menu a:hover span {
/* de kenmerken die je wilt meegeven */ }
De kenmerken kunnen vanalles zijn. In dit voorbeeld betreft het bijvoorbeeld display:block;, de grootte van dat blok, de plaatsing, alsook het lettertype en de kleur, een randje om het geheel en zelfs de optische indruk van een kopje. Als je een beetje handig bent met het combineren van elementen en stijlen, krijg je veel voorelkaar met dat stukje stijlblad.
Als je de bron van deze voorbeeldpagina bestudeert, vind je uit hoe het in z'n geheel werkt.
Dit voorbeeld is ontwikkeld als reactie op een vraag in de usenet nieuwsgroep niwo: sitecheck gevraagd.
Als dit voorbeeld je bevalt, kun je eens langsgaan op PretLettes site, bijvoorbeeld bij de sectie over Webdesign.
Misschien is de index van de testmap, waar deze pagina onderdeel van is, het waard om eens te checken. Daar speel ik met vanalles en het kan zomaar zijn dat er een pagina opduikt die relevant is voor het onderwerp van de huidige pagine die je nu voor je hebt.
Als mijn site je werkelijk bevalt en ik heb je met mijn voorbeelden of testpagina's en de uitleg wat kunnen helpen, overweeg dan een kleine contributie, zodat ik de kosten en moeite in deze site kan blijven steken. Door een kleine bijdrage helpt u mij u te helpen, en anderen. Bezoekt u alstublieft mijn pagina over contributies en donaties. Dank u,