kodetest.dk✨

index

Af: Rune Jensen | 💬 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.

Filed in: 🏷HTML  🏷Desktop  🏷Mobile

Kommentarer

  1. Name

Skriv Kommentar

Regler for kommentarer

Der er som udgangspunkt altid follow på disse links (vigtigt for SEO):

  • Youtube og google search
  • Nordiske domæner som .dk .se .no .fi og .is domæner
  • Andre verificerede .com og .org domæner (dvs. at selve hjemmesiden ikke indeholder spam)
se hvordan et follow link indsættes i en kommentar under "Liste over koder, du kan bruge i kommentaren")

Der er altid nofollow på .ru og .ua og .ch domæner.

Visse link-adresser kontrolleres automatisk - hvis de sender en 404 (Not Found), vil linket ikke blive klikbart

Hvis link-adressen har mistænkeligt indhold vil det enten blive censureret væk eller gjort ikke klikbare, eller, hele kommentaren vil blive afvist.

Alle sprog godtages som udgangspunkt, men der foretrækkes engelsk eller et nordisk sprog (dansk, norsk, svensk).

Bloggen er baseret på Pro Absolut Ytringsfrihed; Med mindre, du sender ren spam (f.eks. forsøg på salg af varer uden at bidrage til debatten), vil alle kommentarer (tekst) blive godtaget. OBS: Footeren er en undtagelse fra reglen om spam. Links er dog ikke klikbare i footeren.

Se hvordan du indsætter en footer under "Liste over koder, du kan bruge i kommentaren"

Sidst, men ikke mindst, botter bliver afvist i døren, så ingen automatisering. Skriv alle kommentarer manuelt ;)

Liste over koder, du kan bruge i kommentaren

Emojis, som bliver oversat til billeder:

  • :) og :-) =
  • :| og :-| =
  • :( og :-( =

Formattering

  • "citat" eller >citat på ny linje = "Citat"-blok
  • "citat" i selve teksten = inline citat
  • *example* = example
  • /example/ = example
  • _example_ = example
  • -example- = example
  • - listepunkt tekst (på ny linje) + ENTER = uordnet listepunkt
  • 1. listepunkt tekst (på ny linje) + ENTER = ordnet listepunkt
  • <http://example.com> = indsæt et klikbart follow link (se også "Regler for kommentarer")
  • http://example.com indsæt et klikbart nofollow link
  • £youtube link£ på ny linje = indsætte en youtube video fra dette punkt i stedet for et klikbart link (maksimum én indsat video pr. kommentar)
  • $code snippet$ = code snippet - OBS: Alle andre formatteringer bliver ophævet indenfor code snippet. Du kan lave det til en blok ved at starte på ny linje og bruge ENTER indenfor formatteringstagget, som vil give en kodeblok med nummerede kodelinjer
  • -- (tankestreg tankestreg mellemrum ENTER til allersidst i kommentaren) = dette er DIN blok på maksimum 5 linjer eller 72 tegn, hvor du kan skrive hvad du vil, fx. et citat du synes om eller at du vil sælge din bil eller lignende. Det bliver vist i kommentaren som en slags "footer" med mindre skriftstørrelse. Hold ALT off topic indenfor dette felt. OBS: Alle formatteringer ophæves indenfor dette felt. Vær også opmærsom på, at alt over 72 tegn bliver skåret væk.
Giv din mening




top af side