Menuer, lodret eller vandret

Indlæs andet indhold på denne side:

Læs også om:

Vandret tekstmenu med grafisk effekt

Siden er opdateret 27. 12. 2005

Med en mindre omskrivning af koderne ovenfor kan menuen bringes til at være vist vandret f.eks. i toppen af hver side. Først kigger vi på css:

a.vlink:link,a.vlink:visited,a.vlink:active{
font-family:verdana,arial,sans-serif;
color:#000000;
background:transparent;
font-weight:normal;
text-decoration: none;
font-size:11px;
padding:4px 14px 4px 14px;
font-weight:300;
}

a.vlink:hover {
background:blue;
color:white;
}

Læg mærke til, at der ikke er sat display:block, der er heller ikke sat en fast bredde på menupunkterne. Derimod er der sat padding på linkteksten: 4 px i toppen og bunden og 14 px i højre og venstre side.

Herunder viser jeg menuen i sin helhed. For overskuelighedens skyld har jeg indsat et linjeskift mellem hvert menupunkt, men det skal du ikke bruge.

Læg også mærke til, at der ikke er nogen   omkring menupunkterne i denne version. Afstanden mellem menupunkterne styres til 2 × 14 px af den padding, der i css er sat på menuklassen vlink.

<a href="side1.htm" class="vlink">Side 1</a>
<a href="side2.htm" class="vlink">Side 2</a>
<a href="side3.htm" class="vlink">Side 3</a>
<a href="side4.htm" class="vlink">Side 4</a>

Du skal selvfølgelig også have lov til at se menuen i funktion - dvs. der er ikke nogen aktive links, jeg har erstattet adresserne med et #.

Side 1Side 2Side 3Side 4Side 5Side 6Side 7Side 8

Som ved den lodrette menu er vi nødt til at hjælpe Opera lidt. Vi tilføjer style="padding:4px 14px 4px 14px" til hvert enkelt menupunkt:

<a href="side1.htm" class="vlink" style="padding:4px 14px 4px 14px">Side 1</a>
<a href="side2.htm" class="vlink" style="padding:4px 14px 4px 14px">Side 2</a>
<a href="side3.htm" class="vlink" style="padding:4px 14px 4px 14px">Side 3</a>
<a href="side4.htm" class="vlink" style="padding:4px 14px 4px 14px">Side 4</a>

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen januar 2000
Hjemmesideskolen
Du er her: Forsiden - html - Menuer, lodret eller vandret
Brugere lige nu: 1
Home Mail