Indlæs andet indhold på denne side:
Siden er opdateret 11.8.2007
Den i dag mest benyttede måde at lave menuer på er ved at lægge menupunkterne i en liste, hvilket for så vidt er logisk nok: Man har en række punkter, der ordnes på listeform.
<ul id="menu">
<li><a href="side1.htm">Til side 1</a></li>
<li><a href="side2.htm">Til side 2</a></li>
<li><a href="side3.htm">Til side 3</a></li>
<li><a href="ny_kategori/index.htm">Til anden kategori</a></li>
<li><a href="http://www.server.dk/fremmed.htm">Til en andens side</a></li>
</ul>
Ovenstående kode vil lave en menu med listepunktsymboler vist til venstre for hvert enkelt punkt:
Det ønsker vi i midlertid ikke og vi laver derfor lidt kode i css, som fjerner listepunkterne:
ul#menu {
list-style-type: none;
}
For at få menupunkterne til at vise sig lige brede og gøre hele bredden klikbar, laver vi lidt mere css-kode:
ul#menu a:link, ul#menu a:visited, ul#menu a:visited {
color: #000080;
background: inherit;
display: block;
width: 160px;
text-decoration: none;
padding: 3px;
}
ul#menu a:hover {
color: #000;
background: #ccf;
}
Vi vil også gerne have listen til at lægge sig helt til venstre, så et par kodelinjer mere i css er nødvendige:
ul#menu {
list-style-type: none; /* defineret tidligere */
margin-left: 0;
padding-left: 0;
}
Der defineres både margin-left og padding-left fordi nogle browsere vil have det på den ene måde og andre på den anden måde.
Skal du have en menu, der kan folde sig ud på flere menuer, sådan som du ser at mine menuer gør, kan du hente opskriften hos Martin Hintzmann.