Copyright © 2002,2003,2004 Jørgen Farum Jensen
Forside » Navigation » CSS menuer
I fortsættelse af artiklen Grundlæggende CSS-menuer gennemgår jeg her de grundlæggende forudsætninger for at lave en navigationsbjælke ud af en HTML-liste.
Jeg bruger nøjagtigt den samme liste som på foregående side og holder eksemplerne ude fra hinanden ved hjælp af deres class name.
<ul> <li>Introduktion</li> <li>Indre planeter</li> <li>Asteroiderne</li> <li>Ydre planeter</li> <li>Kometskyen</li> </ul>
Hvis jeg laver links ud af listepunkter, præsenterer denne liste sig på websiden på følgende måde:
Tricket til at lave en sådan liste om til en vandret liste af links ligger igen gemt i display-attributten. I dette tilfælde skal vi lave en li-markør – der ellers har helt sin egen display-egenskab, nemlig display:list-item (i praksis identisk med display:block) – om til en inline-markør:
ul.first {
font-size:90%;
border-left:1px solid #257;
margin-left:20px;
padding:0;
}
ul.first li {
display:inline;
margin:0;
padding:3px 5px 3px 5px;
border-width:1px 1px 1px 0;
border-style:solid;
border-color: #257;
list-style:none;
line-height:1.5em
}
Huhej, hvor det går! kunne jeg fristes til at udbryde. Du skal have et skarpt øje for at opdage forskellen på dette stylesheet og dem, vi lavede på foregående side, hvis jeg ikke lige havde markeret det kritiske med rødt.
Også her har vi imidlertid problemer med at få linket til at være aktivt i hele "knappen", og ikke kun i linkteksten.
Effekten af at flytte li-elementets formatering til formatering af a-elementet ser du herover. Derved afsløres også en fejl, som Internet Explorer ikke er ene om, nemlig noget luft mellem listepunkterne, der opstår på grund af linieskift i kildekoden. Som nævnt er det ikke alene Internet Explorer, der udviser denne fejl. Den er dog forholdsvis let klaret ved at rette lidt i HTML-kildekoden:
<ul class="anden"> <li><a href="javascript:void(null)">Introduktion</a></li ><li><a href="javascript:void(null)">Indre planeter</a></li ><li><a href="javascript:void(null)">Asteroiderne</a></li ><li><a href="javascript:void(null)">Ydre planeter</a></li ><li><a href="javascript:void(null)">Kometskyen</a></li> </ul>
Ved at sætte linieskiftet ind i markøren snyder vi browserne til at tro, at det slet ikke findes. Det ser grimt ud, men der er ikke noget forkert ved det. Jeg har testen HTML-koden på W3C's validator uden at den gør ophævelser. Og vi opnår den ønskede effekt. Denne effekt kan du i øvrigt også opnå ved at sætte alle listepunkterne på én linie uden mellemrum eller linieskift.
Stylesheet'et for vort resultat indtil nu er:
ul.anden {
font-size:90%;
border-left:1px solid #257;
margin-left:20px;
padding:0;
list-style:none;
}
ul.anden li {
display:inline;
}
ul.anden li a {
margin:0;
padding:3px 5px 3px 5px;
border-width:1px 1px 1px 0;
border-style:solid;
border-color: #257;
line-height:1.7em
}
Et andet lille problem, som du dog kun ser i det øverste eksempel,
er border yderst til venstre. Den har vi jo sat på ul-elementet mens resten af kanterne formateres via a-markøren. Og ul-elementet er en smule anderledes i højden end de a-elementer den rummer. Hvorfor det er sådan, ved jeg ikke, men deklarationen af en line-height på 1.7em klarer dette problem.
Nu resterer for så vidt kun den endelige formatering af navigationsbjælkens links, så vi får følgende resultat:
– mens hele stylesheet'et for denne tredie udgave af navigationsbjælken får følgende udseende:
ul.tredie {
font-size:90%;
border-left:1px solid #257;
margin-left:20px;
padding:0;
list-style:none;
}
ul.tredie li {
display:inline;
}
ul.tredie li a {
margin:0;
padding:3px 5px 3px 5px;
border-width:1px 1px 1px 0;
border-style:solid;
border-color: #257;
color:#1a0080;
background:#fff;
line-height:1.7em;
text-decoration:none;
}
ul.tredie li a:hover {
color:#fff;
background-color:#1a0080;
}
Som det var tilfældet med den lodretstillede menu er der en vis logik i denne metode til at lave en vandret liste som menu. Men, også som før, vil Internet Explorer 5 ikke spille med. I denne browser får vi en række vandretstillede links, så der er ingen problem med funktionaliteten. Men det ligner på ingen måde en smukt formateret navigationsbjælke.
Remediet mod dette er at tage float-egenskaben i brug, både på listen og på listens enkelte elementer, det vil sige hver a-markør:
ul.fjerde {
font-size:90%;
border-width:1px 0 1px 1px;
border-style:solid;
border-color: #257;
float:left;
padding:0;
list-style:none;
margin-left:20px;
}
* html ul.fjerde {
margin-left:10px;
}
ul.fjerde li {
display:inline;
}
ul.fjerde li a {
float:left;
margin:0;
padding:3px 5px 3px 5px;
border-right:1px solid #257;
color:#1a0080;
background:#fff;
text-decoration:none;
}
ul.fjerde li a:hover {
color:#fff;
background-color:#1a0080;
}
– der giver navigationsbjælken følgende udseende:
Igen, som før, vil du ikke kunne se nogen forskel på dette sidste eksempel og det foregående, med mindre du betragter denne side med Internet Explorer 5. Bemærk i stylesheet'et også, at jeg laver kassens tre sider i ul-markøren, og kun den højre side i a-elementet.
Til benefice for dem, der ikke har lyst til at læse hele artiklen, har jeg lavet en mere enkel side, der skal være mit bud på en universal løsning på CSS-formaterede HTML-lister som navigationsbjælker.
For en del betyder ordet navigationsbjælke netop det – en bjælke, der strækker sig tværs over hele websiden – og ikke som i mit eksempel blot en vandret menu. Derfor har jeg også lavet et eksempel på en sådan, som du kan se på min 3. eksempelside, CSS-formateret HTML-liste som navigationsbjælke 2.
At gøre det er sådan set kun et spørgsmål om eksplicit at sætte bredden af navigationsbjælken til 100 procent. Som du vil se af eksemplet foretrækker jeg i dette tilfælde at omslutte ul-elementet med en div med sin egen id og derefter bruge kontekstuelle selektorer på elementerne i denne. Bemærk i eksemplet 1) at body-markørens margin og padding skal være 0, og 2) at jeg derfor indsætter en venstre margin på alle ordinære elementer og en padding-left i menucontaineren.
Det er nærliggende at overveje at udforme en sådan navigationsbjælke sådan, at de enkelte menupunkter får karakter af fanebladsfaner. Det er der adskille designere, der har arbejdet med. Det har jeg lavet en artikel om, Faneblade med CSS.
Senest opdateret: 18. februar 2004
Der er et alvorligt problem med visningen af den fjerde udgave af menuen i Opera browseren. Det kan klares med at bruge nogle Opera-specfikke hacks, men