En nem og pladsbesparende menu

Menuer kan godt vćre lidt kedelige, nĺr de bare bestĺr af tekst. Derfor er der mange der vćlger at lave nogle grafiske knapper, som brugeren kan klikke pĺ.

Det kan dog pĺ den mĺde godt vćre lidt besvćrligt, idet man skal hen og lave en ny knap i sit grafikprogram, nĺr man skal lave et nyt punkt pĺ menuen. Jeg viser derfor her, hvordan du kan lave din menu vha. af kun én knap. Det sparer arbejde, og samtidig hentes kun ét billede (knap) nĺr brugeren loader din hjemmeside.

Faktisk behřver du ikke engang lave din knap selv, man kan bare smutte ind pĺ én af de mange hjemmesider hvor den slags kan hentes gratis.

I eksemplet her, bygges menuen op vha. typografiark og en tabel, hvor knappen bruges som baggrundsbillede. Derefter er den en smal sag at indsćtte tekst i tabellen, som kommer til at stĺ ovenpĺ de enkelte knapper.

Fřlg nedenstĺende vejledning, for at prřve selv:

Start med at vćlge én af disse knapper:

Gem den valgte knap ved at hřjreklikke pĺ den, og vćlge "Gem billede som..." ("Save image as..." i engelske browsere). Vćlg et passende sted at gemme knappen. I det efterfřlgende forudsćttes det, at du har gemt knappen i samme mappe, som den side knappen skal bruges pĺ, og at du har givet den filnavnet "menuknap.gif" (uden citationstegn).

Menuen opbygges vha. en tabel, og det mest overskuelige er at definere tabellens udseende vha. typografiark. I <head> -sektionen af dit dokument, indsćttes fřlgende:

<style type="text/css">
td.menu {
   width:120px;
   height:25px;
   border:0;
   font-size:10pt;
   font-family:Arial;
   text-align:center;
   background-color:transperant;
   background-image:url("menuknap.gif");
   background-repeat:no-repeat;
}
</style>

I ovenstĺende starter jeg med at definere hřjde og bredde pĺ tabelcellen. Det er samme hřjde og bredde som knappen har. Egenskaben border sćttes til 0 for at gřre tabellen usynlig for brugeren, der jo kun skal se knapperne.

Dernćst vćlges font og fontstřrrelse med font-size og font-family. Teksten der skrives i cellerne oven pĺ knappen centreres med egenskaben text-align.

Da det er forskelligt hvordan browsere viser tabeller, har jeg for en sikkerheds skyld medtaget egenskaben background-color, og givet den vćrdien "transperant" (gennemsigtig).

Background-image benyttes til at fortćlle hvilket billede der skal bruges som baggrund, og i dette tilfćlde er det naturligvis den knap du har gemt.
Tilbage er der sĺ kun at fortćlle hvorvidt baggrundsbilledet skal gentages. Her benyttes background-repeat med vćrdien no-repeat, sĺledes at billedet kun vises én gang pr. celle.

Nu mangler vi bare at gřre menuen synlig for brugeren. I <body> -sektionen af dit dokument laver du tabellen som fřlger:


<table cellpadding="0" cellspacing="2" border="0">
<tr>
<td class="menu"><a href="index.html">Forsiden</a></td>
</tr>
<tr>
<td class="menu"><a href="om_mig.html">Lidt om mig</a></td>
</tr>
<tr>
<td class="menu"><a href="billeder.html">Mine billeder</a></td>
</tr>
<tr>
<td class="menu"><a href="gaestebog.html">Gćstebog</a></td>
</tr>
</table>

Du skal naturligvis ćndre links og tekst sĺ det passer med det du skal bruge.

Hvis du vil ćndre skriftfarve m.m. pĺ teksten i dine links, kan du se i denne vejledning hvordan man formaterer links i typografiark.

... og sĺdan ser det ud. Smart!