Hvordan lage nedtrekksmeny med to nivåer?

Nedtrekksmenyer er et velkjent navigasjonselement i svært mange grensesnitt. De forekommer oftest i operativsystemer som Windows XP, Ubuntu eller Mac OS X, men brukes også på Internett. I en tråd i forumet var det en bruker som hadde noen problemer med en slik meny. Den ville ikke oppføre seg likt i Internet Explorer og de andre moderne nettleserne som Safari, Firefox, Chrome og Opera.

Menyproblemet er et godt utgangspunkt for en guide, så vi tenkte å presentere en løsning for dere her. Guiden er kanskje litt avansert for de av dere som ikke kan så mye HTML, CSS og jQuery enda, men vi håper alle kan lære noe av den.

HTML

Vi starter med å sette opp en god og ren HTML-struktur som dere kan se under.

<div id="menu">
    <ul>
        <li><a href="#" title="">Nivå 1</a>
            <ul>
                <li><a href="#" title="">Nivå 1.1</a></li>
                <li><a href="#" title="">Nivå 1.2</a></li>
                <li><a href="#" title="">Nivå 1.3</a>
                <ul>
                    <li><a href="#" title="">Nivå 1.3.1</a></li>
                    <li><a href="#" title="">Nivå 1.3.2</a></li>
                    <li><a href="#" title="">Nivå 1.3.3</a></li>
                </ul>
            </ul>
        </li>
        <li><a href="#" title="">Nivå 2</a></li>
        <li><a href="#" title="">Nivå 3</a></li>
    </ul>
</div>

I første nivå av menyen skal punktene presenteres horisontalt og de skal alltid være synlige. Punktene i andre nivå skal presenteres vertikalt og plasseres under hvert av punktene i første nivå. Tredje og siste nivå av menyen skal presenteres til høyre for hvert av punktene i andre nivå. I likhet med andre nivå, skal punktene i tredje nivå presenteres vertikalt.

For å sikre at vi får til denne oppførselen, legger vi på klassene level1, level2 og level3 på <ul>.

<ul class="level1">
    <li>...
        <ul class="level2">
            <li>...
            <ul class="level3">
                <li>...</li>
            </ul>
        </ul>
    </li>
</ul>

CSS

Når alt av HTML-struktur er skrevet ned, kan vi starte på CSS-koden. Vi starter med innpakningen og første nivå. De viktigste detaljene å legge merke til her er position:relative;, som sørger for at andre nivå plasseres riktig, og white-space:nowrap;, som hindrer menypunktene å brekkes over flere linjer.

#menu {
    background: #102030;
    height: 40px;
}
#menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#menu ul li {
    position: relative;
    float: left;
}
#menu ul li a {
    background: #102030;
    padding: 5px 15px;
    display: block;
    font-size: 13px;
    line-height: 30px;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
}

Videre legger vi til CSS-koden som skjuler og viser de ulike nivåene. Legg merke til left:-6000px; som skjuler andre og tredje nivå. Dette er for å ta hensyn til skjermlesere som ikke får med seg innhold som skjules med display:none;.

#menu li ul {
    position: absolute;
    left: -6000px;  /* Replace display:none to help screen readers */
    width: 180px;   /* For IE */
}
#menu ul.level1 li:hover ul.level2,
#menu ul.level1 li.hover ul.level2  /* For IE6 */ {
    left: 0;
}
#menu ul.level2 li:hover ul.level3,
#menu ul.level2 li.hover ul.level3  /* For IE6 */ {
    left: 100%;
    top: 0;
}
#menu li ul li {
    display: block;
    width: 100%;
}
#menu ul li li a {
    background: #304050;
    padding: 0 15px;
    width: 150px;  /* For IE */
    cursor: pointer;  /* Ensure correct cursor */
}
#menu ul li li li a {
    background: #506070;
}
#menu ul li a:hover,
#menu ul li a.highlight {  /* Set mouseover style */
    background: #609030;
}
#menu ul li a:active {  /* Set mousedown style */
    background: #fff;
    color: #102030;
}
#menu ul li a:focus {  /* Remove dotted line in Firefox */
    outline: none;
}

jQuery

For å sikre at Internet Explorer 6 også spiller på lag med oss, har vi også lagt til en liten snutt med jQuery. For at denne koden skal fungere, må vi også huske å legge til selve biblioteket. Til dette har vi valgt å bruke Google AJAX Libraries API.

jQuery(function() {
    $('#menu li').hover(
        function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        }
    );
    $('#menu ul.level3').hover(
        function() {
            $(this).parent('li', this)
              .children('a').addClass('highlight');
        }, function() {
            $(this).parent('li', this)
              .children('a').removeClass('highlight');
        }
    );
});

Det siste som gjenstår er å sy sammen bitene til et fungerende menyeksempel.

Oppdatering

Guiden er oppdatert med svar på et spørsmål fra kommentarfeltet. Spørsmålet var dette:

Er det noen mulig for å la hover-fargen på første nivå ligge der når musa ikke er over, men menyen er oppe? Altså slik som menyene i Win/Mac fungerer?

Takk, termserv!