Webdesign 101 Næste niveau CSS Næste niveau Tekstformatering Næste niveau Formatering af HTML-lister

Lister som CSS rollover-menuer

...plus en smule JavaScript

Ved hjælp af en smule JavaScript kan vi lave menuen her på siden til en ekspanderende liste. Læs også artiklen Ek­span­der­ende HTML-lister som hierarkiske menuer.

Som en sidste krølle på eksperimenterne med listeformatering vil jeg kombinere CSS-rolloveren med listens struktur, således at en liste af links rent strukturelt også bliver til en liste.

Eksempel 16:

En almindelig uordnet liste af links som menu har du sikkert prøvet at lave tidligere. At den ikke anvendes ret meget, skyldes sikkert, at den ligner det, den er:

... en kedelig uordnet liste. Men anvender du noget af det stof, jeg har gennemgået på disse sider, bliver det muligt for dig ved hjælp af et passende stylesheet at konvertere den lidt kedelige liste til f.eks. nedenstående menu:

Stylesheet'et til denne menu ser således ud:

#menuliste {
  width:14em;
  border:1px solid #000;
  border-bottom:none;
  padding: 0;
  margin:1em;
  margin-left:20px;
  font-weight:bold;
  font-size:12px;
  background-color:aqua;
  color:#ffe;
}
#menuliste ul {
  list-style:none;
  margin:0;
  padding:0;
  border:none;
}
#menuliste li {
  border-bottom:1px solid #1a0080;
  color:#ffe;
}
#menuliste li a {
  display:block;
  width:100%;
  padding: 5px;
  border-left:10px solid #008099;
  border-right:10px solid #008099;
  background-color:1a0080;
  color:#ffe;
  text-decoration:none;
}
html>body #menuliste li a {
  width:auto;
}
#menuliste li a:hover {
  border-left:10px solid #1a0080;
  border-right:10px solid #1a0080;
  background-color:#ffe;
  color:#1a0080;
}

Bemærk her det lille trick i linien html>body #menuliste li a. Jeg bruger her en CSS2 "child"-selektor for at "snyde" Internet Explorer. IE skal nemlig have explicit besked på at kassen rundt om <a>-markøren (i linien width:100% nogle linier højere oppe) skal fylde det overordnede element (#menuliste). Det er forkert. Alle andre browsere gør det af sig selv. Det er det, jeg be'r om i den her omtalte formeregel. Denne regel læses ikke af Internet Explorer. IE forstår nemlig ikke >-selektoren, og springer derfor denne formregel over, og bruger den forkerte oplysning til at lave det rigtige.

Du kan læse en del mere om denne måde at formatere links på på websiden Menuknapper med CSS. Forskellen imellem de to metoder er alene den, at jeg på denne side bruger en HTML-liste for derved at få bragt en listestruktur ind også i den linkssamling, som en menu jo er.

Senest opdateret: 9. nov. 2002.