Formatere en liste som meny med CSS, vertikal og horisontal meny

Hvordan formaterer du en liste som en meny? Vertikalt og horisontalt? Det er ikke så vanskelig, du må bare huske på et par viktige ting.

Vi tar utgangspunkt i en standard liste, <ul>. I eksempelet har jeg lagt inn 5 linker som skal bli menyvalg. Listen er plassert i en div med id #nav.

<div id="nav">
    <ul>
      <li><a href="#">Forside</a></li>
      <li><a href="#">Produkter</a></li>
      <li><a href="#">Nyheter</a></li>
      <li><a href="#">Om oss</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
</div>

Vertikal meny

Først en id for div-taggen hvor vi definerer bredden. Merk at verdiene brukt i dette eksempelet er nettopp det, eksempler.

#nav {
	width: 200px;
}

Så fjerner vi punktene foran hvert element i listen, samt luft på venstre side av hvert punkt.

#nav ul {
	list-style-type: none;
	padding-left: 0px;
}

Litt marg under hvert menyvalg:

#nav li  {

	margin-bottom: 3px;
}

Formatering av a:link og a:visited i listen i menyen. For at hele «knappen» skal være klikkbar, ikke bare teksten, må du sette display: block.

#nav li a:link, #nav li a:visited{
	font-family: Verdana, Geneva, sans-serif;
	color: #FFFFFF;
	background-color: #00CC66;
	font-size: 80%;
	text-decoration: none;
	padding: 5px;
	width: 175px;
	display: block;
}

Til slutt endrer vi bakgrunn på «knappene» ved mouseover.

#nav li a:hover, #nav li a:active, #nav li a:focus {
	background-color: #999999;
}

Horisontal meny

Horisontal meny lager du omtrent på samme måte som den vertikale. For enkelhets skyld viser jeg her kun hvordan du fjerner punktene fra elementene i listen, samt hvordan du gjør listen horisontal (display: inline). Utover dette kan du formattere slik du ønsker tilsvarende som du gjør i en vertikal meny.

#nav ul {
	list-style-type: none;
}
#nav li {
	display: inline;
}