Vi gör en enkel rullgardinsmeny

Ofta nog räcker det med en synnerligen enkel meny för att besökaren lätt skall kunna hitta till de olika delarna av hemsidan. Med det här skriptet får vi den enklaste rullgardinsmenyn man kan tänka sig, och vi kan stoppa in praktiskt taget hur många länkar som helst i den.

Vi börjar direkt med den del som skall ligga i HEAD-elementet:

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm skriptet för äldre webbläsare
function enkelMeny(menyn){
var menyval = document.menyn.sida.options[document.menyn.sida.selectedIndex].value;
window.location.href = menyval;
}
// Sluta gömma -->
</SCRIPT>

function enkelMeny(menyn)
Här skapar vi en funktion vars uppgift är att ta emot länkvalet från formuläret "menyn" längre ned på sidan och öppna den sida som motsvarar "menyval".

var menyval = document.menyn.sida.options[document.menyn.sida.selectedIndex].value;
Det här betyder ungefär: På den här HTML-sidan (document) finns formuläret "menyn". I den finns listrutan (select) som heter "sida". Där finns ett antal val (options). Ge variabeln det värde (value) som anges av det gjorda valet (selectedIndex). Det låter krångligare än det är.

window.location.href = menyval;
Det här gör att webbläsaern öppnar den sida som anges i variabeln.

För att det här skriptet skall göra någon nytta, behöver vi förstås en meny också. Mellan BODY-taggarna, där vi vill att menyn skall visas, placerar vi formuläret som bildar själva menyn. Grundkoden till det ser ut så här:

<FORM name="menyn">
<SELECT name="sida" size=1>
<OPTION value="#">Gå till...
<OPTION value="#">
<OPTION value="#">
<OPTION value="#">
</SELECT>
<INPUT type=button value="OK" onClick="javascript:enkelMeny()">
</FORM>

FORM name="menyn" och SELECT name="sida"
Formuläret heter "menyn" och listrutan heter "sida". Båda dessa namn används av funktionen enkelMeny().

size=1
Det här innebär att en enda rad kommer att visas – du kan ändra till fler rader om du vill.

<OPTION value="#">Gå till...
Den här raden kopplar som den nu ser ut till sidans början. Det är ju inte så bra, om menyn ligger långt ned på sidan, så vi skall strax ändra på det.

OPTION value="#"
I de här raderna skall vi byta brädgårdstecknet mot länksidornas adresser. Efter den avslutande haken i varje rad skriver vi den text som skall visas i menyn. Det kan se ut till exempel så här:

<OPTION value="startsida.html">Till startsidan
<OPTION value="linkar.html">Mina länkar
<OPTION value="kontakt.html">Gästbok

Du fyller på med så många rader <OPTION value="#"> som du behöver. Håll gärna länktexterna hyggligt korta – formuläret blir nämligen lika brett som den längsta textraden.

<INPUT type=button value="OK" onClick="javascript:enkelMeny()">
Den här raden ger en OK-knapp. Händelsehanteraren onClick bestämmer vad som skall inträffa när besökaren klickar på knappen: Då anropas javaskriptfunktionen enkelMeny(), och variabeln i denna tar i sin tur tar värdet från formuläret och kopplar till rätt länksida.

Men nu skall vi förhindra att OK-klick på "Gå till..." skickar besökaren till sidans början. Det gör vi med hjälp av ett ankare. Alldeles före <FORM name="menyn"> skriver vi in ytterligare en rad med HTML-kod:

<A name="minmeny"></a>

Sedan ändrar vi raden <OPTION value="#">Gå till... så här:

<OPTION value="#minmeny">Gå till...

Om besökaren nu markerar "Gå till..." och klickar på OK, kommer han helt enkelt tillbaka till menyn.

Här kan du pröva menyn. "Gå till..." leder till själva menyn; de övriga valen skickar dig till början av sidan.

© SupportData.Net