Jørgen Farum Jensens

Introduktion til stylesheet-formaterede menuer

Jeg har efterhånden skrevet så mange artikler om stylesheet-formaterede menuer, at jeg selv har svært ved at finde rundt i dem.

Så jeg tør slet ikke tænke på, hvordan det er for en ny bruger af dette websted. Derfor denne artikel, hvor jeg samler trådene og linker til en mængde eksempler.

Artiklen fokuserer på udviklingen af forskellige typer af menuer, såvel lodretstillede menupaneler som vandretstillede navigationsbjælker.

Artiklen er først og fremmest en fremadskridende oversigt. De tekniske oplysninger til hver konstruktion, stylesheet, kommentarer og forklaringer, gives i eksemplernes tekst.

Foruden denne grundlæggende artikel henleder jeg din opmærksomhed på tre andre artikler i denne sektion:

Oversigt
En ret kortfattet oversigt over de eksempler, der i mine øjne er de vigtigste og/eller de mest anvendelige. Den artikel sparer dig for mine lange og sikkert kedelige forklaringer
CSS dropdown menu og menubar
Mit eget bud på en dynamisk menu baseret på CSS, menupanel og navigationsbjælke, udviklet fra bunden.
Dynamiske menuer med HTML-lister
Andre websidekonstruktørers bud på dynamiske CSS-menuer, de fleste med eksempler

Html-lister

En menu på et websted er simpelthen en liste af links. Det er derfor en fordel at anvende en af de html-markører, der markerer en liste, som grundlag for en menu.

De markører, der kan komme på tale er:

dl-markøren (Definition List)
der markerer en definitionsliste, og som har et indhold af markørerne dt (Definition Term) og dd (Definition Definition).
ol-markøren (Ordered List)
der markerer en nummereret liste, og som har et indhold af li-markører (List Item).
ul-markøren (Unordered List)
der markerer en unummereret liste, og som har et indhold af li-markører (List Item).

I denne sektion vil jeg i detaljer gennemgå stylesheet-formateringen af sådanne lister, når de skal anvendes som menuer. Hovedparten af eksemplerne baserer sig på den uordnede liste, som er langt den mest anvendte til formålet. Du kan lige vel anvende en ordnet liste til samme formål, formateringen er ganske mage til. Jeg vil nu anbefale, at du reserverer ol-markøren til lister, menuer eller ej, hvor listepunkternes orden har en forståelsesmæssig betydning.

dl-markøren er bedst egnet til linksoversigter, hvor der knyttes en kommentar til hvert link.

Simple CSS-menuer

Den nærmere forklaring til de enkelte eksempler giver jeg i selve eksemplet.

Den simpleste menu overhovedet er simpelthen et antal links, stablet oven på hinanden, jf. eksempel 1. Dette eksempel er det eneste, der ikke er baseret på en html-liste.

Du kan opnå fuldstændig den samme effekt ved at lægge linksene ind i listepunkterne i en uordnet liste. Jeg viser hvordan i eksempel 2.

Html-lister som menuer

Eksemplerne 3 til 9 er i det store og hele baseret på en række eksempler, CSS-guruen Eric Meyer nævner i sin artikel Minimal Markup, Surprising Style.

Eksempel 3 viser hvordan du kan forsyne listepunkterne med en separator.

Eksempel 4 viser, hvorledes du kan formatere menuen som et knappanel.

Eksempel 5 viser, hvorledes du anvender a:hover pseudoklassen til at lave en mouseovereffekt svarende til den, man tidligere kun kunne lave ved hjælp af grafiske knapper og noget JavaScript.

Eksempel 5a viser den samme menu, men i en mere behersket (kedelig?) udformning.

Eksempel 6 viser, hvorledes du ved hjælp af nogle simple indgreb i dit stylesheet kan lave menupanelet om til en navigationsbjælke.

Eksempel 7 viser, hvorledes du får navigationsbjælken til at udfylde hele det overordnede element i bredden.

Eksempel 8 viser, hvordan du laver navigationsbjælken om til en fanebladsmenu. Du kan læse mere om fanebladsmenuer i næste afsnit.

Eksempel 9 viser, hvorledes du kan formatere din menu, så den visuelt afspejler strukturen i dit websted.

Fanebladsmenuer

Jeg bygger videre på eksempel 8 (fanebladsmenu) for at integrere menuen med sidens øvrige elementer. Dette eksempel bruger jeg som grundlag for et eksempel-websted, der omfatter 7 sider.

Jeg bruger også dette websted til at introducere en lidt smart metode til automatisk at markere den aktuelle fane.

Som i de andre eksempler er stylesheets og konstruktionstekniske oplysninger indsat i eksemplet, i dette tilfælde på den første side.

float-egenskaben som alternativ

Som vi så i eksempel 6, 7 og 8 medfører den konstruktionsmetode, jeg har anvendt til disse navigationsbjælker, at linieskiftet i kildekoden medfører en lille utilsigtet margin mellem menupunkterne.

Det vil ofte være til at leve med, og kan i givet fald fjernes på den måde, jeg har beskrevet i eksempel 7a.

Jeg vil dog ikke undlade at beskrive en alternativ metode til at konstruere en navigationsbjælke. Det gør jeg i eksempel 10.

Menuens position

I alle de tidligere eksempler er menuen placeret via den naturlige ombrydning. Ønsker man at have menuens kildekode placeret et andet sted i sidens kildekode, skal menuen positioneres. Et eksempel herpå viser jeg i eksempel 11.

Sektionsspecifikke menuer

I ovennævnte eksempel på en fanebladsmenu og det eksempelsite, jeg har lavet med en sådan menu, demonstrerede jeg, hvorledes du ved hjælp af stylesheet'et kan sørge for automatisk markering af det aktuelle menupunkt.

Princippet kan imidlertid bruges til en hel del mere, som jeg forklarer på et nyt eksempelsite: Ekspanderende HTML listemenu.

Jeg benytter princippet til at sørge for, at visse af menupunkterne har en undermenu, som kun ses, når websiden tilhører den sektion, der er valgt i hovedmenuen.

Grafiske Rollovers med CSS

Fra gamle dage er vi vant til, at en grafisk rollover skal laves med JavaScript og brug af event handlere som onmouseover og onmouseout til at foretage et billedskift. Men der er ikke det bitterste ii vejen for, at vi også kan bruge :hover-tilstanden til at udskifte en baggrundsgrafik.

Jeg har et par eksempler på dette: Grafisk rollover kun med CSS og Grafisk navigationsbjælke.

Liste som logisk sti

Som jeg allerede har demonstreret er der ikke de helt store vanskeligheder med at konvertere en uordnet liste af links til en vandret navigationsbjælke.

Vi kan anvende det samme princip til at lave en logisk sti. En logisk sti er en serie links ved siden af hinanden som illustrerer den optimale klikvej fra webstedets forside til den aktuelle side. Du kan se en sådan logisk sti på de fleste af websiderne på dette websted, lige over artiklernes overskrift, således også i eksemplerne til denne artikel. Eksempel 13.

Dynamiske CSS-menuer

Alle de hidtidige eksempler er, hvad jeg kalder “flade menuer”. De omfatter de menupunkter, der umiddelbart kan ses og “nichts weiter”. Sådanne menuer er velegnede til websteder med et relativt beskedent antal sider, logisk organiseret i et mindre antal forskellige sektioner.

De sektionsspecifikke menuer/undermenuer, jeg nævner ovenfor, er grundlæggende simple og flade html-lister, der blot er forskellige fra side til side.

Men overvejer vi, præcis hvorledes vi har fået disse til at fungere, er der vel ikke noget vældig langt spring til at forestille sig, at vi kan anvende :hover-tilstanden til en dynamisk visning af, hvilken undermenu, der er knyttet til et bestemt menupunkt.

I teorien er det da også meget let, men der er et par praktiske vanskeligheder at overvinde. Derfor har jeg skrevet et par separate artikler om dette emne   dels artiklen CSS dropdown menu og menubar, der er mit personlige bud på en dynamisk universalmenu, og dels artiklen Dynamiske CSS-menuer, hvor jeg gennemgår en række eksempler på, hvad andre websidekonstruktører foreslår.

I artiklen CSS dropdown menu og menubar udvikler jeg fra bunden af dels et lodretstillet menupanel og dels en vandret navigationsbjælke. Begge konstruktioner kan udvides til et vilkårligt antal hierarkiske lag. Jeg viser et eksempel på dette.

Jeg kan ikke understrege kraftigt nok de store fordele, der er forbundet med disse konstruktioner: Menuerne består af simple HTML-lister. De er derfor eminent maskinlæsbare for såvel talende browsere som søgerobotter og andre indekserings- og katalogiseringsprogrammer. Og tag ikke fejl   din webside vil blev læst af mindst lige så mange softwareprogrammer som den vil blive læst af mennesker.

Dette er i modsætning til de sædvanlige foldeud-, harmonika- og dropdown-menuer, der baseret på dynamisk HTML og hvis funktionalitet derfor er beroende på JavaScript.

Tilgængelighed og tastaturnavigation

Nu er der andre hensyn at tage i konstruktionen af en menu end udformningen af linksene. Din menu bliver i sagens natur mere tilgængelig af at blive opstillet som en liste. Men du kan bedre på sagen på flere måder:

Konklusion

Artiklen belyser ved hjælp af en række eksempler, hvorledes du kan fremstille et menupanel eller en navigationsbælke ved hjælp af passende stylesheet-formatering af en html-liste.

Denne artikel omhandler kun “flade” menuer, det vil sige menuer, der grundlæggende kun viser ét niveau af links.

Modstykket hertil er dynamiske menuer, hvor et menupunkts underpunkter kan vises ved mouseover eller klik.

Dynamiske CSS-menuer er behandlet i to separate artikler: CSS dropdown menupanel og navigationsbjælke og Dynamiske CSS-menuer.

September 2005

Kviklinks til artikler

Rå kode

De 3 eksempler, der refereres til herunder, er 30/9/06 opdateret til kompatibilitet med Internet Explorer 7.

For dig, der blot skal ha' fat i den rå kode i en skrækkelig fart:

Kvikfix menupanel
Kvikfix navbar
Kvikfix navbar, 100 % bredde

Kviklinks til eksempler

Her links til de vigtigste eksempler - en slags universalløsninger til:

Abonnér på nyhedsbrev
Søg på siderne
Anbefal siden til en ven

Webdesign – illustreret håndbog

– er i løbet af kort tid slået igennem som grundbogen for dem, der ønsker at lære sig websidekonstruktion, og tillige ønsker at gøre det på en håndværksmæssig solid måde. Køb den hos forlaget Globe.

Online support

Hvis du bliver abonnent på mit nyhedsbrev får du øjeblikkelig e-mail opdatering i tilfælde af rettelser eller uddybende forklaringer til eksempler og beskrivelser mine bøger.

Samtidig får du også gennem disse nyhedsbreve besked om nye og opdaterede artikler på dette websted.

Du kan læse mere om denne sag på websiden Nyhedsbrev.