Sidenummermenu

Et antal websider, der tilsammen udgør en længere artikel, hvis sider skal læses sekventielt – det vil sige først side 1, så side 2, dernæst side 3 osv. – forsynes ofte med en sidenummermenu.

Det er jo en simpel sag at lave en sådan, f.eks. på formen:

[ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ]

Sidenummermenuen herover er et tekstafsnit, hvor linksene simpelthen står ved siden af hinanden. Den eneste css-formatering, der finder sted, er text-decoration:none, der fjerner understregningen.

På webstedet www.webreference.com har man i årevis brugt en lidt fiksere grafisk udgave af en sådan sidenummermenu. Jeg har herunder forsøgt at eftergøre denne:

Her er linkteksterne udskiftet med nogle små grafikker, hvor en trekant, der peger til venstre, signalerer tidligere sider, firkanten signalerer den aktuelle side og en trekant, der peger til højre, signalerer efterfølgende sider.

Min egen udforming af et sådant element ser du i en opdateret udgave forneden til højre på denne side. Her er hvert tal gjort til et listepunkt i en ordnet liste. Stylesheet'et for dette element har følgende udseende:

div#boxmenu ol {
margin:0;padding:0;
list-style:none;}
div#boxmenu li {display:inline;}
div#boxmenu a {
  font-weight:bold;
  font-size:0.9em;
  text-align: center;
  text-decoration: none;
  border:1px solid #369;
  padding:0 0.25em;
  margin-left:0.1em;}
div#boxmenu a:link {background-color:#ff9900;color:#000;}
div#boxmenu a:visited {background-color:#aaa;color:#000;}
div#boxmenu a:hover {background-color:#f00; color:#000;}
div#boxmenu a#pagenr1 { background-color:#c00;  }

Linien i ovenstående, der er markeret med rødt, er nøglen til at gøre en liste til en vandret liste.

Den sidste formdeklaration sætter en afvigende baggrundsfarve på det element, der svarer til den aktuelle side. Denne formdeklaration skal derfor indsættes på hver side med forskellige id'er, alt efter hvilken side, der er tale om.

Der er dog en mere elegant måde at gøre dette på:

Hvis jeg giver hver webside, der hører til en bestemt artikel, en body class, f.eks.

<body class="artikel050224-1">

– for den første side i en artikel der omfatter 7 sider – kan jeg oprette et stylesheet, der omfatter alle siderne, med følgende formdeklarationer vedr. fremhævningen af den aktuelle side:

body.artikel05024-1 div#boxmenu a#pagenr1,
body.artikel05024-2 div#boxmenu a#pagenr2,
body.artikel05024-3 div#boxmenu a#pagenr3,
body.artikel05024-4 div#boxmenu a#pagenr4,
body.artikel05024-5 div#boxmenu a#pagenr5,
body.artikel05024-6 div#boxmenu a#pagenr6,
body.artikel05024-7 div#boxmenu a#pagenr7 { 
  background-color:#c00;  }

Resultatet af disse manøvrer er følgende: Linkets normaltilstand vises med sort skrift på en mørk gul baggrund. Hover-tilstanden vises med sort tekst på en rød baggrund og besøgte links vises med sort tekst på en grå baggrund.

Den aktuelle side vises med sort tekst på en dybrød baggrund.

Bemærk at denne metode kræver, at du har en høj specificitet på formreglerne for de sidst nævnte links, det vil sige den formdekaration, der fremhæver den aktuelle side. Det er her sket ved at inkludere div#boxmenu i formreglerne. Ellers vil a:visited-tilstanden råde.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7

Denne side er senest opdateret: 1. September, 2006