33 besökare, 1 medlem och 1 Student är online nu
Loopia

webdesign och HTML

Dropdown-meny 2

Formulärkontrollen SELECT används tillsammans med ett javascript för att hantera länkar som en meny. Den här menyn kan användas med eller utan ramar (frames).

 

Alla menyval öppnas i angivet mål som kan vara av typen:
_SELF
_TOP
_BLANK

TIPS! Se ett annat exempel i guiden Drop-downmeny 1 »

 

Steg 1:
Lägg koden inom <HEAD>

De länkar som inte ska öppnas i samma fönster eller ram som menyn skrivs in javascriptet. I exemplet nedan används olika mål för de övriga länkarna. En länk öppnas i hela fönstret (_TOP), tre länkar öppnas i samma frameset men utanför ramen (_PARENT) och en länk öpnnas i ett nytt fönster (_BLANK).

Namnet på formuläret och namnet på formulärkontrollen SELECT måste anges i javascriptet. I exemplen ovan är formulärnamnet "menyform" och formulärkontrollens namn är "listmeny".

<HEAD>

<script language="javascript">
function dropdownmeny() {

link="";
link=document.menyform.listmeny.options[document.menyform.listmeny.selectedIndex].value;

// länk till hela fönstret (_TOP)
if(link=="http:/www.adress1.se") top.location.href=link;

// länk till frameset utanför ramen (_PARENT)
if(link=="http:/www.adress2.se"
||link=="http:/www.adress3.se") parent.location.href=link;

// länk till nytt fönster (_BLANK)
if(link=="http://www.google.se") window.open().location.href=link;

// övriga länkar till angiven målram
else if(link!="#") parent.frames['ramnamn'].location.href=link;
}

</script>

</HEAD>

TIPS! Ange flera länkar till samma mål separerade med två "filtertecken": || så behöver du inte upprepa "if-villkoret" flera gånger.

 

Steg 2:
Lägg koden inom <BODY>

De länkar som inte är angivna i scriptet ovan öppnas i ramen med det angivna ramnamnet. De länkar som angivits i javascriptet i scriptet öppnas i de mål som specificerats.

<BODY>

<form name="menyform">
<select name="listmeny" onChange="dropdownmeny();">

<option value="#">Välj meny här!</option>
<option value="http:/www.adress1.se">Adress 1</option>
<option value="http:/www.adress2.se">Adress 2</option>
<option value="http:/www.adress3.se">Adress 3</option>
<option value="http:/www.google.se">Google</option>
<option value="../mapp/sida1.php>Min sida 1</option>
<option value="../mapp/sida2.php">Min sida 2</option>
</select>
</form>

</BODY>

 

Steg 3:
Om du länkar till samma ram eller inte använder frames

Om du använder menyn utan ramar (frames) har ramen inget namn och du ändrar då målet att gälla samma fönster.

Byt ut koden:
// övriga länkar till angiven målram (_framename)
else if(link!="#") parent.frames['ramnamn'].location.href=link;

Ny kod:
// övriga länkar till angiven målram (_framename)
else if(link!="#") window.location.href=link;

Steg 4:
Ändra mål för länkarna(vid behov)

Länkade sidor öppnas i samma fönster eller ram. Om du vill ändra mål för länkarna byter du ut "window" i koden ovan mot något av exemplen nedan:

Öppnas i samma ram eller fönster ( _SELF) :
window.location.href = URL;

Öppnas i hela fönstret, utanför frameset ( _TOP):
top.location.href = URL;

Öppnas i samma frameset men utanför ramen ( _PARENT ):
parent.location.href = URL;

Öppnas i nytt fönster:
window.open().location.href = URL;

Öppnas i en namngiven ram/frame:
parent.frames['ramnamn'].location.href = URL;