Klappe-ud-menu med ren html

Af Allan Vebel

Opdateret: 16-03-2006

Når menuen bliver for omfattende

Du får flere og flere interesseområder - din virksomhed har mange produkter - eller også vil du bare have mange punkter på din menu - den bliver længere og længere - og til sidst skal man scrolle ned i bunden af siden for at få de sidste punkter med.

Det er hverdagen for mange hjemmesideejere - og mange gange bliver problemet løst med en avanceret klappe-ud-menu i javascript eller med et java-applet.

Jeg har set mange henvisninger til dynamicdrive.com, hvor der findes masser af forskellige løsninger på javascriptmenuer. Problemet er bare at det er vanskeligt at finde det helt rigtige, der også fungerer i alle browsere - og har brugeren slået javascript fra i sin browser, kan brugeren slet ikke navigere. Et andet problem er at mange har vanskeligt ved at tilpasse disse menuer til et eksisterende design og i det hele taget få det til at fungere.

Kun for sjov

Sådan en klappe-ud-menu kan sagtens laves med ren html - og med lidt css til at styre udseendet kan det blive ganske flot - det er kun din fantasi der sætter grænsen.

Som udgangspunkt ser din menu helt normal ud:

<div id="menublok">
<a href="klap1.htm">Side 1</a><br>
<a href="klap2.htm">Side 2</a><br>
<a href="klap3.htm">Side 3</a><br>
<a href="klap4.htm">Side 4</a>
</div>

Når du klikker på Side 1 ser menuen på den nye side sådan ud:

<div id="menublok">
<a href="klap.htm">Side 1</a><br>
<a class="umenu" href="klap11.htm">Underside 1.1</a><br>
<a class="umenu" href="klap12.htm">Underside 1.2</a><br>
<a class="umenu" href="klap13.htm">Underside 1.3</a><br>
<a class="umenu" href="klap14.htm">Underside 1.4</a><br>
<a href="klap2.htm">Side 2</a><br>
<a href="klap3.htm">Side 3</a><br>
<a href="klap4.htm">Side 4</a>
</div>

... og når du klikker på Side 2 er undermenupunkterne bare flyttet ned under det næste punkt og henvisningen er rettet til de nye sider der bliver kaldt:

<div id="menublok">
<a href="klap1.htm">Side 1</a><br>
<a href="klap.htm">Side 2</a><br>
<a class="umenu" href="klap21.htm">Underside 2.1</a><br>
<a class="umenu" href="klap22.htm">Underside 2.2</a><br>
<a class="umenu" href="klap23.htm">Underside 2.3</a><br>
<a class="umenu" href="klap24.htm">Underside 2.4</a><br>
<a href="klap3.htm">Side 3</a><br>
<a href="klap4.htm">Side 4</a>
</div>

... og så videre. [Se eksempel]

I mit tilfælde ser css-filen for menuen sådan ud:

a{
padding:3px;
color:navy;
background-color:inherit;
text-decoration:none;
font-weight:bold;
}

a:hover{
color:red;
background-color:inherit;
}

a.umenu{
font-size:0.8em;
color:navy;
background-color:inherit;
padding:0px;
margin-left:10px;
font-weight:normal;
}

a.umenu:hover{
color:navy;
background:#ffa500;
}

Menu med grafik

Kan du ikke nøjes med tekst til din menu, kan den naturligvis også laves med grafik, hvor hver knap er et link - der er uanede muligheder. Lav selv dine knapper i et passende grafikprogram og sæt dem ind i stedet for teksten:

<div id="menublok">
<a href="klap1.htm"><img src="side1.gif alt=""></a><br>
... og så videre
</div>

Jeg skal ikke glemme at fortælle at en menu med en java-applet også nemt kan erstattes med ren html og lidt grafik. Anders Thorsen Holm har lavet et eksempel der ligner den grimme fphover.class på mange frontpagegenererede sider.

Jeg vil også præsentere mhaList der er lavet af Martin Hintzmann Andersen. Det er en klappe-ud-menu lavet ved hjælp af javascript, men dog på en sådan måde at man alligevel kan navigere selv om javascript af en eller anden grund ikke er understøttet.

Når jeg kaldte det Kun for sjov i overskriften, hænger det sammen med at denne menu narurligvis fungerer fínt, men den er meget vanskelig at vedligeholde. Derfor bør du finde på noget helt andet.