Formatering af listemenuen

Linkets tilstande

Ofte har vi brug for en hurtigt, simpel menu uden de store armbevægelser. Det er for eksempel den, du ser her til højre.

Den menu er mere eller mindre standard på mine nyere eksempelsider. Stylesheet'et er hurtigt overset, som du ser herunder:

ul.cssmenu {
  font-family:arial,sans-serif;
  font-size:90%;
  list-style:none;
  border-width:0 1px 1px 1px;
  border-style: solid;
  border-color: #257;
  background:#fff;
  margin: 0;
  padding:0;}

ul.cssmenu li {
  display:inline; }
  
ul.cssmenu li a {
  color:#257;
  background-color:#fff;
  display:block;
  text-decoration:none;
  margin:0;
  padding:3px 5px;
  border-top:1px solid #257;}

ul.cssmenu li a:visited {
  color:#800080;background:#eee;}
/*  
ul.cssmenu a:active {
  color:#c00; }
*/
  
ul.cssmenu li a:hover {
  color:#fff;
  background-color:#257;}

Bemærkninger til stylesheet'et

Her er ikke vældig meget at bemærke udover, at jeg ikke har sat nogen bredde på menuen. Derved bliver den så bred, som det overordnede element tillader, i dette tilfælde elementet div#rightcol.

Linkets tilstande

Et link kan have fem tilstande, der har hver deres pseudoklasse:

a:link Normaltilstanden.
a:visited Linket har været brugt
a:focus Linket er i fokus
a:hover Musen er over linket
a:active Linket har mousedown

Vi kan bruge alle fem pseudoklasser til at give vore links særlige udformninger for hver af de fem tilstande, linket kan være i.

Uanset om du bruger dem alle eller kun de tre almindeligst anvendte, nemlig a:link, a:visited og a:hover, bør den orden, som stylesheet formregelblokkene skrives i, være som vist i tabellen.

a:focus tilstanden beskriver jeg nærmere i artiklen om tilgængelighed i menuerne.

a:active tilstanden bruger jeg som regel slet ikke. En eksplicit brug af a:active tilstanden – som jeg undtagelsesvis bruger på denne side – fortolkes forkert af Internet Explorer. Hvis du bruger menuen her til højre og vender tilbage til denne side ved hjælp af browserens tilbage-knap vi du se, at linket bevarer den røde linkfarve, der kendetegner active-tilstanden. Det er ikke hensigtsmæssigt, selvom mange vistnok efterhånden tror, at sådan skal det være.

Webdesign - illustreret håndbog
Webdesign med XHTML
– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S