Menuer, lodret eller vandret

Indlæs andet indhold på denne side:

Læs også om:

Menuen lavet som vandret 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.htm">Til ny kategori</a></li>
<li><a href="http://nyt_site.dk">Til nyt site</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;
  }


Vi vil også have menuens punkter til at stå samlet på en vandret linje. Vi skal have lavet noget css til formålet:

ul#menu li {
  display: inline;
  }


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;
  width: 160px;
  text-decoration: none;
  padding: 3px;
  }

ul#menu a:hover {
  color: #000;
  background: #ccf;
  }


Til slut skal vi have menuen til at ligge helt til venstre, mere css:

ul#menu {
  margin-left: 0;
  padding-left: 0;
  }


Skal du have en menu, der kan folde sig ud på flere menuer, 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