Menuer, lodret eller vandret

Indlæs andet indhold på denne side:

Læs også om:

Access-key i menuer

Tabindex i menuer

Lodret tekstmenu med grafisk effekt

Siden er opdateret 12. 12. 2005

Du kan synes, at en række menupunkter i form at ord med links på er for kedeligt. Du vil måske have noget, der minder lidt om en grafisk brugerflade, selv om det er ren tekst. Du kan se et eksempel på disse sider - Hjemmesideskolens menu er lavet sådan.

Du opnår denne effekt ved, at du i css definerer, at menulinks skal vises på denne særlige måde:

a.mlink:link,a.mlink:visited,a.mlink:active{

font-family:verdana,arial,sans-serif;

color:#000080;

display:block;

width: 140px;

text-decoration: none;

font-size:10px;

padding:3px;

background:url(usynlig.gif);

font-weight:normal;

}



a.mlink:hover {

background:blue;

color:white;

}

Her skal du lægge mærke til følgende:

I en lodret menu sætter display:block;width:140px; rammerne for den grafiske effekt og overflødiggør <br> mellem menupunkterne.
Med padding:3px sætter du afstanden mellem de enkelte menulinjer (definerer, hvor højt areal over og under teksten, der skal fungere som en del af linket.
Ved at indsætte en usynlig *.gif som baggrund kompenseres for IE's utilbøjelighed til at gøre hele menubredden hover-følsom.

Når du har menudefinitionen på plads i css, skal du modificere lidt på den menu, du så højere oppe på siden:

<p class="midt">

<a class="mlink" href="side1.htm">Til side 1</a>

<a class="mlink" href="side2.htm">Til side 2</a>

<a class="mlink" href="side3.htm">Til side 3</a>

<a class="mlink" href="ny_kategori/index.htm">Til anden kategori</a>

<a class="mlink" href="http://www.server.dk/fremmed.htm">Til en andens side</a>

</p>

Læg mærke til, at de tvungne linjeskift er fjernet og at der er tildelt hvert enkelt menupunkt en klasse, der henviser til det, du netop har indført i css.

Desværre har Opera problemer med at vise menuen som ønsket, så for at få den browser med, skal vi lige udvide koden i menuen lidt:

<p class="midt">

<a class="mlink" style="display:block;padding:3px;" href="side1.htm">Til side 1</a>

<a class="mlink" style="display:block;padding:3px;" href="side2.htm">Til side 2</a>

<a class="mlink" style="display:block;padding:3px;" href="side3.htm">Til side 3</a>

<a class="mlink" style="display:block;padding:3px;" href="ny_kategori/index.htm">Til anden kategori</a>

<a class="mlink" style="display:block;padding:3px;" href="http://www.server.dk/fremmed.htm">Til en andens side</a>

</p>

^ Tilbage til sidens top

Menuer, lodret eller vandret

Lodret tekstmenu med grafisk effekt

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2000