På denne ukens Dreamweaver-kurs kom det spørsmål om hvordan man kan lage en sideindikator. Altså, hvordan kan man indikere ovenfor brukeren hvilket menyvalg man er inne på, ved å f.eks markere menyvalget med en annen farge.
En måte å gjøre dette på er ved hjelp av CSS. Ved å sette en class på body-taggen kan du enkelt styre dette ved hjelp av unike stiler på hvert menyvalg, som basert på hvilken class body-taggen har og hvilken ID menyvalget har, vil formattere aktuellt menyvalg.
Her følger et eksempel:
På siden nyheter.html legger vi inn en class på body-taggen:
<body class="nyheter">
Menyen ser slik ut:
<ul> <li id="nyheter"><a href="nyheter.html">Nyheter</a></li> <li id="kontakt"><a href="kontakt.html">Kontakt oss</a></li> osv... </ul>
I menyen setter vi en ID på hvert listepunkt slik at disse blir unike.
For å få en unik formattering av menyvalget «Nyheter» på nyhetssiden lager vi følgende stil:
.nyheter #nyheter a
«Trikset» her er å knytte en class til body-taggen. Basert på om denne eksisterer (altså kun når man er inne på «riktig» side»), vil denne trigge bruken av stilen som heter .nyheter #nyheter a og formattere menyvalget «Nyheter» siden det kun er dette menyvalget som har ID «nyheter».
Tilsvarende, for det andre menyvalget «Kontakt» må du på kontakt-siden sette
<body class ="kontakt">
og du må lage en stil som heter
.kontakt #kontakt a.