de html (1)
Je geeft de <li>'s van het menu allemaal een eigen id, bv.:
HTML:
<ul id="menu">
<li id="home"><a href="index.htm">Home</a></li>
<li id="meer"><a href="meer.htm">Meer</a></li>
<li id="slot"><a href="slot.htm">Slot</a></li>
</ul>
de html (2)
De <body>-tag van een bepaalde pagina geef je een class met dezelfde naam als de id van de bijbehorende <li>. Dus bv. voor de homepage:
HTML:
</head>
<body class="home">
...
Voor de pagina "Meer":
HTML:
</head>
<body class="meer">
...
enz.
de css
De gewone css voor het menu is bv.:
Code:
#menu a {
background: white;
color: black;
border: 1px solid Silver;
}
Nu geef je css de opdracht om alléén als de class-naam hetzelfde is als de id-naam de "actuele stijl" weer te geven:
Code:
.home #menu #home a,
.meer #menu #meer a,
.slot #menu #slot a {
background: PapayaWhip;
color: PaleVioletRed;
border: 1px solid SandyBrown;
}
Op de homepage heeft de li #home inderdaad een eerder in de html staande class
.home, dus daar wordt de actuele stijl met de exotische kleuren op toegepast.
Alle andere li's voldoen daar niet aan, dus die krijgen de gewone stijl.
Op de pagina "Meer", met
.meer als class van de body, krijgt nu de li met de #meer automatisch de voorkeursbehandeling, enz.
Zo kan het menu identiek blijven, wat ook handig is als je het er met een php-include in gaat zetten.
Met vriendelijke groet,
CSShunter
