© Henrik Jensen - ViewSource.dk
Dansih Version   English Version

Mcafee
 


 Brug en Drop Down Box som Menu
Skrevet af: Henrik Jensen / 01-07-2001

Læst 8094 gange
At lave Navigation vha. af en DropDown box er en god og hurtig måde, da en sådan DropDown box ikke fylder meget på siden.

Prøv blot at se nedestående eksempel

En sådan menu laves ved at indsætte følgende kode på din HTML side
<script language="JavaScript">
<!-- Hide the script from old browsers -->

function surfto(form)
{
 var myindex=form.select1.selectedIndex
 if (form.select1.options[myindex].value != "0")
  {
   window.open(form.select1.options[myindex].value, target="_top");
  }
}
//-->
</script>

<form NAME="form1">
<select NAME="select1" onChange="surfto(this.form)" SIZE="1">
<OPTION SELECTED VALUE=>-------------- Menu ---------------
<OPTION VALUE="http://www.viewsource.dk">www.viewsource.dk
<OPTION VALUE="http://www.yahoo.com">www.yahoo.com
<OPTION VALUE="http://www.altavista.com">www.altavista.com
<OPTION VALUE="http://www.excite.com">/www.excite.com
</select>
</form>

Siden der bliver valgt vil åbne i samme vindue, ønsker du det ændret er det følgende linje der skal rettes

   window.open(form.select1.options[myindex].value, target="_top");

target="_blank" // Nyt Vindue
target="_DinFrameNavn" // Navnet På den Framen siden skal åbnes i

I dette script vil du blive sendt til den valgte siden så snart du har foretaget dit valg, uden at skulle trykke på en knap først. Ønsker du en sådan løsning - skal du ændre i formen så funktionen surfto(this.form) bliver kaldt ved et onclick event fremfor et onchange event, det gøres således

<form NAME="form1">
<select NAME="select1" SIZE="1">
<OPTION SELECTED VALUE=>-------------- Menu ---------------
<OPTION VALUE="http://www.viewsource.dk">www.viewsource.dk
<OPTION VALUE="http://www.yahoo.com">www.yahoo.com
<OPTION VALUE="http://www.altavista.com">www.altavista.com
<OPTION VALUE="http://www.excite.com">/www.excite.com
</select>

<input type="button" value="gå til website" size="20" onClick="surfto(this.form)">
</form>


God Kodning :-)