Artikler om stylesheet-formaterede menuer
For dig, der har fulgt med i timen, og har læst mine
tidligere artikler, og for dig, der er komplet ligeglad
med alt ordgyderiet, og bare vil ha' kildekoden til en
CSS-formateret listemenu, har jeg lavet 3 websider, der kun
viser menuen og dens tilhørende stylesheet:
Eksempel 1: Lodretstillet menu
Eksempel 2: Navigationsbjælke i vilkårlig bredde
Eksempel 3: Navigationsbjælke, 100 procent bred.
Er det en dynamisk menu, du er på jagt efter, kan du straks springe til
Dynamisk menupanel eller
Dropdown navigationsbjælke
Resten af denne artikel er en meget kort kommenteret gennemgang af de eksempler og henvisninger, der er mere udførligt beskrevet i de øvrige artikler i denne sektion.
- Det simplest tænkelige menupanel.
- Du kan lave en menu ved hjælp af én eneste formregel,
der ændrer på
a-markørensdisplay-egenskab. - Html-listen som menu
- Det er fordelagtigt at bruge html-listemarkørerne til strukturformatering af menuen. Alle efterfølgende eksempelr bygger på denne idé.
- Menuens præsentation
- En separator er somme tider nok
- Knappanel
- Lidt jongleren med baggrundsfarver og borders skaber et panel af knapper.
- Rollover-effekt
- Dette eksempel viser, hvordan du laver rollover-effekt, det vil sige at menupunktet skifter udseende, når musemarkøren er over punktet. Fuldstændig uden JavaScript!
- Navigationsbjælke
- Nogle få ændringer i stylesheet'et laver menupanelet om til en navigationsbjælke.
- Navigationsbjælke i fuld bredde
- Navigationsbjælken fylder hele websiden i bredden.
- Fanebladsmenu
- Lidt yderligere formatering af navigationsbjælken laver den om til en menu af fanebladsfaner.
- Fanebladsmenu /2
- Fanebladsmenuens faner skal bringes til at hænge samme med fanebladene. Dette er et helt eksempel-websted, hvor alle 7 sider er forsynet med fanebladsmenuer. Her fortæller jeg også om en fiks metode til automatisk at skifte farver på fanerne alt efter hvilken side, vi er på.
- Ekspanderende html-menu
- Et andet eksempel-websted med faneblade. Her udnytter vi princippet fra foregående eksempel til at indsætte undermenuer afhængigt af, hvilken sektion på webstedet, en given webside tilhører.
- Diagram-menu
- Menuen tegner et diagram af strukturen på dit websted.
- Alternativ navigationsbjælke
- Jeg præsenterer en alternativ og i mine øjne bedre mtode til at konstruere en navigationsbjælke på basis af en html-liste.
- Navigationsbjælkens postion
- Visuelt skal en navigationsbjælken være i toppen af siden, men i html-kildekoden er det ebdst, hvis den kommer til sidst. Jeg viser hvordan du ordner det.
- Den logiske sti
- Den logiske sti, som du ser her på siden lige over artiklens overskrift, er også et navigationselement. Det er godt nok ikke en menu, men jeg tager den alligevel med i denne oversigt.
- Brugervenlighed og tilgængelighed
- Brug af en html-liste som grundlag for en menu øger i sig selv
tilgængeligheden, men der er flere tiltag, der kan gøre det endnu bedre. Læs om
tabindex-attributten,title-attributten ogaccesskey-attributten. - Dynamisk menupanel
- Alene ved hjælp af CSS kan du lave en dynamisk menu, det vil sige en menu, hvor en undermenu folder sig ud ved mouseover. Du kan eliminere Internet Explorers mangelfulde understøttelse af CSS kerneegenskaber ved hjælp af en Microsoft-specifik teknologi.
- Dropdown navigationsbjælke
- Med udgangspunkt i foranstående demonstrerer jeg, hvorledes du kan udvikle en dropdown navigationsbjælke med et vilkårligt antal niveauer.
- Dynamiske menuer med HTML-lister
- En oversigtsartikel, hvor jeg gennemgår en række alternative metoder til at skabe en dynamisk menu ud af en html-liste.
29. september 2005
Kviklinks til artikler
Kviklinks til eksempler
Her links til de vigtigste eksempler - en slags universalløsninger til:
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.
Runde hjørner ...