Registreren

[Theo]

Inleiding
Op praktisch elke website vind je een menu. Het is leuk om een menu interactiever te maken. Bijvoorbeeld door de achtergrondkleur te laten veranderen. Dit kan met bijvoorbeeld javascript. Een nadeel van javascript is dat je het kunt uitschakelen. CSS daarentegen niet. Daarom gaan we in dit artikel een rollover effect maken met behulp van CSS.


De basis
Voordat we daadwerkelijk het menu gaan maken eerst even een kleine toelichting. In CSS heb je de zogeheten pseudo-classes. Voor een uitleg over pseudo-classes verwijs ik je naar W3C. Pseudo-classes geven ons bijvoorbeeld de mogelijkheid om links te stijlen. We hebben het dan over :hover, :active, :visited en :link.

Met de :hover pseudo-class hebben we de mogelijkheid om een hover (rollover) effect aan een object toe te kennen. Dit wordt vooral bij links gebruikt. Echter kun je hier ook tabelcellen of lijstitems mee stijlen. Er is echter een probleem. Internet Explorer accepteert de :hover pseudo-class enkel op <a>-tags, oftewel de links. Dit wordt als het goed is in IE7.0 aangepast. Voor de oudere versies moeten we dus een oplossing zoeken.

Wat we in dit artikel gaan doen is een link plaatsen binnen de tabelcel of lijstitem. Die geven we dan dezelfde afmetingen als de tabelcel/lijstitem. En van een link werkt een hover effect wel in elke browser. Zo zal het lijken alsof de tabelcel van kleur verandert terwijl het eigenlijk de link is.

Bij deze oplossing stuitte we op één miniscuul probleem. De <a>-tag is een inline object en dus kunnen we de grootte niet aanpassen. Dit is op te lossen door er een block element van te maken.


Het menu
De achtergrond kennen we nu, laten we beginnen met een menu maken. Dit kunnen we doen met bijvoorbeeld tabellen of lijsten. Ik zal de tabel optie bespreken.

Eerst gaan we een tabel maken:

HTML

Code: Alles selecteren

<table>
   <tr>
      <td class="tabelcel"><a href="pagina1.htm">Pagina 1</a></td>
   </tr>
   <tr>
      <td class="tabelcel"><a href="pagina1.htm">Pagina 2</a></td>
   </tr>
   <tr>
      <td class="tabelcel"><a href="pagina1.htm">Pagina 3</a></td>
   </tr>
</table>

Zoals je ziet hebben we de cel een class gegeven. Dit zal later gebruikt worden.

Nu wil je graag dat de hele achtergrond van de tabelcel veranderd. Dit zou normalerwijs dus kunnen door een simpele :hover toe te voegen aan de stylesheet:

CSS

Code: Alles selecteren

.tabelcel
{
   background-color: red;
}
.tabelcel:hover
{
   background-color: green;
}

Maar dit werkt dus niet in Internet Explorer. We zullen gebruik moeten maken van de links binnen de tabelcel. Dit doen we als volgt (lees ook het commentaar):

CSS

Code: Alles selecteren

.tabelcel
{
   /* eerst geven we de cel een hoogte en een breedte */
   width: 100px;
   height: 25px;
   /* en we zetten de padding op 0 zodat we geen randjes zien */
   padding: 0;
}
.tabelcel a
{
   /* we zorgen er voor dat de link zich als een block element gaat gedragen zodat we de breedte en hoogte aan kunnen passen */
   display: block;
   /* breedte en hoogte op 100% zodat hij zijn 'moeder'-object (de tabelcel in dit geval) zal opvullen */
   width: 100%;
   height: 100%;
   /* en uiteraard de achtergrondkleur */
   background-color: red;
}
.tabelcel a:hover
{
   /* nu enkel de achtergrondkleur aangeven voor het :hover effect */
   background-color: green;
}

We zien dus dat we de tabelcel eerst een grootte geven. Vervolgens stijlen we de a tag. Die geven we een 100% hoogte én breedte zodat deze zijn bovenliggende element volledig opvult. Ook geven we nog even een achtergrondkleurtje mee. Tenslotte maken we het :hover effect.

Bekijk het resultaat hier.