XHTML Meny med css og list (ul/li)

For å bruke XHTML riktig må man unngå bruk av tabeller til layout. Det er mange grunner til at man bør gjøre dette, men det skal vi ikke ta nå. Denne artikkelen forklarer et eksempel på hvordan man kan lage en horisontal meny med korrekt xhtml og bruk av hover efekter. Målet er å lage en meny (med ul og li) som dette kun vha html-list og css (og et par bilder da)

XhtmlMenu screenshot

Først trenger vi HTML til å sette opp selve menyen. Dette gjøres med enkle LI og UL tagger:

<div id="mainMenu">
  <ul>
    <li><a href="/">Forsiden</a></li>
    <li><a href="/Articles/">Artikler</a></li>
    <li><a href="/CodeSnippets/">Kodeeksempler</a></li>
    <li class="selected"><a href="/Downloads/">Downloads</a></li>
  </ul>
</div>

Hele menyen er plassert inne i en div. Dette er fordi vi skal legge et bakgrunnsbilde bak hele menyen som ivareter stripen under arkfanene. Det ene list-elementet har en css-class selected, som gjør at den skiller seg litt ut fra de andre.

I tillegg til litt CSS trengs det 5 bilder for at dette eksempelet skal fungere:

XhtmlMenu left XhtmlMenu norm_right

XhtmlMenu left_on XhtmlMenu norm_right_on

XhtmlMenu bg Dette er bakgrunnsbildet som legges inn i div'en som holder menyen

Som du ser er disse bildene veldig mye større enn menyen, men det er for at det skal være mulig å sette inn menyelementer med litt størrelse.

Når bildene er på plass er det bare å legge inn litt CSS for å få menyen til å fungere perfekt:

#mainMenu a
{
  color:#3D69B4;
  font-family:Arial, Verdana;
  font-size:11px;
}

#mainMenu
{
  float: left;
  width: 100%;
  line-height: normal;
  background: #fff url("images/bg.gif") repeat-x bottom;
  font-size:12px;
  font-weight:bold;
}
#mainMenu ul
{
  margin: 0;
  padding: 10px 10px 0;
  list-style: none;
}
#mainMenu li
{
  float: left;
  background: url("images/norm_right.gif") no-repeat right top;
  margin: 0;
  padding: 0;
}
#mainMenu a
{
  display: block;
  background: url("images/norm_left.gif") no-repeat left top;
  padding: 5px 15px 4px;
  text-decoration:none;
}

#mainMenu .selected
{
  background-image: url("images/norm_right_on.gif");
}
#mainMenu .selected a
{
  background-image: url("images/norm_left_on.gif");
  padding-bottom: 5px;
}

#mainMenu li:hover
{
  background-image: url("images/norm_right_on.gif");
}
#mainMenu li:hover a
{
  background-image: url("images/norm_left_on.gif");
  padding-bottom: 5px;
}

Du finner et komplett eksempel her