---
title: "Meny med bilder"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/146938-meny-med-bilder"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "greyhound"
published: "2006-05-16T22:03:07.000Z"
updated: "2006-05-17T09:28:47.000Z"
replies: 9
views: 505
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/146938-meny-med-bilder"
---

# Meny med bilder

## #1 — greyhound, 2006-05-16T22:03Z

Hur göra jag en bra meny med bilder som funkar bra även om besökaren inte se bilderna eller har en skärmläsare?

Permalänk: https://www.webforum.nu/p/146938

## #2 — Okkido, 2006-05-16T22:08Z

```
<u>
<li><a href="#" title="" class="meny 1"><span class="hide">Menyalternativ 1</span></a></li>
<li><a href="#" title="" class="meny 2"><span class="hide">Menyalternativ 2</span></a></li>
<li><a href="#" title="" meny="meny 3"><span class="hide">Menyalternativ 3</span></a></li>
<ul>
```

 

```
 
.hide {display:none;}
ul li .meny { storleken osv osv.}
ul li a:hover { background-position: 0 20px;}

.1 a {background: url(../img/1.gif) no-repeat;}
.2 a {background: url(../img/2.gif) no-repeat;}
.3 a {background: url(../img/3.gif) no-repeat;}
```

 

Varje menykategori har en egen bild, 1.gif osv. Den bilden har då både normal-läge och hover-läge i sig. 

Så hade jag nog gjort idagsläget, tror jag, är trött och inte nogrann.

Permalänk: https://www.webforum.nu/p/1817655

## #3 — greyhound, 2006-05-16T22:11Z

Ser bra ut...
Hade inte tänkt på att man kan göra sådär men det funkar.

Någon som har andra idér?

Permalänk: https://www.webforum.nu/p/1817656

## #4 — tanten, 2006-05-16T22:43Z

En blind sa till mig en gång: Stäng bildvisning och koppla bort css. Om då länkarna visas med något emellan varje länk så är det bra. Om de visas i en enda lång rad så gör inte screenreaders något uppehåll mellan länkarna och den blinde kan då ha svårt att veta vart den ene börjar och slutar. För den sakens skull är det då bra att göra menyn i någon lista typ ul-lista eller dt-lista sådansom okkido visade på. Bilderna ska ha alt-text och länkarna bör ha en title-text. 
Sedan så ska det fungera fint för de som inte använder vanlig skärm.
En skippameny länk är en lättnad för dem så de slipper höra menyn varje gång de kommer in på en ny sida på siten.
Tror inte du behöver tänka på mer.

Permalänk: https://www.webforum.nu/p/1817662

## #5 — zcorpan, 2006-05-17T08:28Z

Använder du display:none kommer inte skärmläsare läsa texten alls.

Permalänk: https://www.webforum.nu/p/1817708

## #6 — greyhound, 2006-05-17T08:32Z

Nej får inte till det heller även fast jag rättat lite fel i koden...

Permalänk: https://www.webforum.nu/p/1817711

## #7 — @nders, 2006-05-17T08:47Z

Och hur ser det ut nu då?

Permalänk: https://www.webforum.nu/p/1817713

## #8 — zcorpan, 2006-05-17T08:48Z

```
<ul class="nav">
 <li class="n1"><a href="#"><span></span>Meny 1</a></li>
 <li class="n2"><a href="#"><span></span>Meny 1</a></li>
 <li class="n3"><a href="#"><span></span>Meny 1</a></li>
</ul>
```

```
.nav a { display:block; position:relative; width:200px; height:50px; overflow:hidden; }
.nav span { position:absolute; width:100%; height:100%; }
.n1 span { background-image:url(1.png); }
.n2 span { background-image:url(2.png); }
.n3 span { background-image:url(3.png); }
```

Jag har inte testat detta så det kan hända att jag har missat nån detalj.

Permalänk: https://www.webforum.nu/p/1817714

## #9 — greyhound, 2006-05-17T08:58Z

> **zcorpan skrev:**
>
> ```
> <ul class="nav">
>  <li class="n1"><a href="#"><span></span>Meny 1</a></li>
>  <li class="n2"><a href="#"><span></span>Meny 1</a></li>
>  <li class="n3"><a href="#"><span></span>Meny 1</a></li>
> </ul>
> ```
>
>
>
> ```
> .nav a { display:block; position:relative; width:200px; height:50px; overflow:hidden; }
> .nav span { position:absolute; width:100%; height:100%; }
> .n1 span { background-image:url(1.png); }
> .n2 span { background-image:url(2.png); }
> .n3 span { background-image:url(3.png); }
> ```
>
> Jag har inte testat detta så det kan hända att jag har missat nån detalj.

Det där funkar bra för mig, blir nog den lösningen jag kör med. Tackar

Permalänk: https://www.webforum.nu/p/1817717

## #10 — Nipon, 2006-05-17T09:28Z

Det var ju riktigt jä-la smart! Funkar tip-top för mig med!

Men la till:

.nav { list-style-type: none; padding: 0; margin: 0; }

  :)

Permalänk: https://www.webforum.nu/p/1817728

---

Tråden på webben: https://www.webforum.nu/amne/html-css/146938-meny-med-bilder