Menuer, lodret eller vandret

Indlæs andet indhold på denne side:

Læs også om:

Menuen lavet som lodret liste

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.

^ 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