“Du er her”-signaler

Dette er den første side af i alt 7 sider, der simulerer et websted med i alt 7 sektioner. Fanebladsmenuen bygger på eksempel 8, der viser hvordan du kan lave sådan en menu.

Ideen med denne simulation er at vise, hvorledes du alene ved hjælp af nogle stylesheet formregler kan ordne det således, at hver sektion af webstedet automatisk får sine egne karakteristika. Der er stort set frit slag, men for ikke at gøre det alt for kompliceret har jeg holdt mig til at ændre to ting fra den ene sektion til den anden.

Den ene ting er forholdsvis banal – ændringen af kuløren på artiklens overskrift.

Den anden af disse ting er nærmest genial. (Det tør jeg skrive, for det er ikke mig der har fundet på det. Jeg så det først hos Mark Pilgrim.)

Du vil se, hvis du klikker på nogle af fanerne, at fanen indikerer, hvilken sektion du er i. Normalt klarer vi dette ved at give linket en id, f.eks. id="aktuel", og så side for side indsætte et lille stylesheet, der ændrer fanens udseende.

I denne udførelse ligger alle disse ændringer imidlertid i det stylesheet, der er fælles for alle siderne.

Der er to forudsætninger for at dette kan lykkes:

  1. For det første har hver enkelt webside fået et class name, der korresponderer med denn sektion, siden tilhører. Siderne i sektion 1 har således alle (i eksemplet her er der kun én side per sektion) en body-markør, der ser således ud:
    <body class="sektion1">
    mens siderne i sektion 2 ganske tilsvarende har fået en body-markør med udseendet:
    <body class="sektion2">
    og så fremdeles.
  2. Desuden har hvert link i fanebladsmenuen fået en id, f.eks. således
    <li><a id="link1" href="page1.html">Home</a></li>.

Det gør det muligt at skrive følgende formregleblokke for fanerne:

body.sektion1 ul.menu li a#link1,
body.sektion2 ul.menu li a#link2,
body.sektion3 ul.menu li a#link3,
body.sektion4 ul.menu li a#link4,
body.sektion5 ul.menu li a#link5,
body.sektion6 ul.menu li a#link6,
body.sektion7 ul.menu li a#link7 {
  background: white; border-bottom: 1px solid white;}

Disse meget spefifikke kontekstuelle selektorer sørger for at f.eks. link nr. 4 får de rigtige egenskaber, hvis siden har et class name sektion4.

For fuldstændighedens skyld stylesheet'et for h2-overskrifterne:

body.sektion1 h2.overskrift {color:black;}
body.sektion2 h2.overskrift {color:orange;}
body.sektion3 h2.overskrift {color:teal;}
body.sektion4 h2.overskrift {color:tomato;}
body.sektion5 h2.overskrift {color:maroon;}
body.sektion6 h2.overskrift {color:violet;}
body.sektion7 h2.overskrift {color:navy;}

Jeg synes faktisk, det er en ganske elegant løsning på i en menu at indikere, hvilket menupunkt der er det “aktive”, men ideen kan også udvides til at gælde mere substantielle forandringer på siderne for hver sektion. Dog skal du passe på ikke at gå helt overbord – stylesheet'et svulmer let så meget op, at det er smartere at operere med to stylesheets, et fælles og ét for hver sektion.

Du kan downloade hele det simulerede website, inklusive stylesheet'et, pakket i denne zip-fil: fanebladsmenuer.zip

16. dec. 2007