Forside Blog

Tilgængelig tekst-i-billede menu med CSS2

0 kommentarer | Kommentér

Resumé: Så du vil gerne have en billed-menu på din hjemmeside, som også er tilgængelig for skærmlæsere og søgebotter?

Du kan gå direkte til den færdige kode, hvis du bare vil copy/paste koden til din egen side, eller læse videre her nedenfor:

Udgangspunktet: en listemenu

Udgangspunktet for en tilgængelig menu er en listemenu med ren tekst, som denne.:

Nuvel, den er jo noget kedelig. Vi vil derfor gerne give hvert menupunkt et særligt dekorativt udseende: Hvert menupunkt skal have sit eget skrift-udseende, og hvert "stadie" af menu-knappen (aktiveret/ikke aktiveret) skal også have sit eget udseende.

Billeder indsættes

menupunkt 1, ikke aktivt menupunkt 1, ikke aktivt
menupunkt 2, ikke aktivt menupunkt 2, aktivt
menupunkt 3, ikke aktivt menupunkt 3, aktivt

Alle billeder er 179px i bredden, og 50px i højden.

Det er nemt at indsætte et billede i et element med CSS background-image og positionere billedet med background-position og give det width (bredde) og height (højde), som er fra originalbilledet.

Billedet for "aktiveret" menupunkt sættes i CSSen for li samt for alle a:hover og billedet for "ikke-aktiveret" menupunkt indsættes i a.

Læg mærke til, at hver <li> har sit eget ID (punkt1,punkt2,punkt3). Det er kun nødvendigt, fordi alle menupunkter har deres eget baggrundsbillede.

Linktekst (den tekst, som står imellem <a> og </a> i html'en) skal ikke være synlig for en seende bruger, så tektsen flyttes udenfor synsfeltet med text-indent:-2000em. Det er dén tekst, som læses aF skærmlæsere og søgebotter.

Den færdige menu

Det aktive link (aktuel side) får sin effekt fra <li>-taggets egenskaber, når dette ikke indeholder et a-tag. Aktuel side bør nemlig ikke linke til sig selv.

Når <li>-tagget indeholder et a-tag, får menupunktet sin egenskab fra a-tagget. Det er rent faktisk fordi a og li begge er gjort lige store, og a dækker for li.

Hvis du vil have forskellig udseende af aktivt link og "hover"-effekten, skal du sætte egenskaberne for li og a:hover separat med hvert sit baggrundsbillede.

Man kan yderligere putte et baggrundsbillede ind i egenskaben for <ul>-tagget. Så kan man lave dekoration udenom menupunkterne, så menuen bliver lidt pænere.

Skriv kommentar

0
FORWARDED_FOR=
CLIENT_IP=
IP_REQUEST=54.87.180.135
RetrieveIP=54.87.180.135

1. matt: mUzqxK


778393, dnt:
20-12-2014207

HTTP_COOKIE:


URL: /index.asp
AllowedMethods: HEAD,GET
requesr.form:
request.querystring;
Giv din mening