Sideindikator med CSS

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.
Del denne artikkelen:

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *