Formatering af listemenuen

Mouseover-effekt

Der findes en pseudo-egenskab, der hedder :hover, som du kan bruge til at givet linket en særlig udformning, når musen er over linket. Det er noget, vi tidligere kun har kunnet gøre ved hjælp af JavaScript. Nu kan du altså lave ganske tilsvarende uden JavaScript, alene ved nogle stylesheet formregler.

Stylesheet'et til nedenstående udformning af menuen er:

ul.menu5 {
  padding: 0 1px 1px 1px; 
  margin: 0;
  background: gray; 
  width: 15em;}
ul.menu5 li {
  list-style: none; 
  margin: 0; 
  border-top: 1px solid gray;
  text-align: left;}
ul.menu5 li a {
  display: block; 
  _width:12.75em;
  padding: 0.25em 0.5em 0.25em 0.75em;
  border-left: 1em solid #aab; 
  background: #ccd;
  text-decoration: none;}
ul.menu5 li a:link {
  color: #448;}
ul.menu5 li a:visited {
  color: #667;}
ul.menu5 li a:hover {
  border-color: #fe3; 
  color: #fff; 
  background: #332;}

Præsenteret på websiden ser denne menu således ud:

Bemærkninger til stylesheet'et

Her er det nødvendigt at lave et hack. For at Internet Explorer ikke skal indsætte et ekstra linieskift på a-markøren, skal der oplyses en eksplicit bredde på denne. Det er kun nødvendigt i forhold til Internet Explorer, så derfor oplyser jeg width på den måde, der er markeret med rødt.

Så er det kun IE, der læser denne formregel. Det medfører desværre også, at stylesheet'et ikke kan validere ok i W3C's CSS-validator. Generer det dig, kan du udelade understregningen. Firefox, Opera, Netscape 7 og Mozilla browserne viser menuen korrekt alligevel.

Det interessante her er brugen af a-markørens pseudoklasser, der medfører, at vi kan sætte f.eks. kulør på linket i dettes forskellige tilstande, inklusive den ellers så flygtige :hover-tilstand. Syntaksen for dette fremgår i stylesheet'et. Her skiftes såvel baggrundsfarve som forgrundsfarve og ikke mindst farve på den ret brede border til venstre.

Bemærk, at jeg ikke bruger den fjerde tilstand, som kan tilgås via a:active. Internet Explorer tolker denne tilstand helt forkert, og der er ingen grund til at forplumre vandene ved at begynde at opfinde smarte effekter for denne tilstand. Overlad det til læserens browser at bestemme, om denne tilstand skal markeres og i så fald på hvilken måde.

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