Gillar du den här guiden? Vill du att vi ska fortsätta göra fler guider? - läs mer här » 

skriv ut »

Dropdown-meny 1

En formulärkontroll SELECT som används tillsammans med ett javascript för att hantera länkar som en meny. Den här meny kan användas med eller utan frames/ramar då alla menyval öppnas i samma mål som kan vara av typen _SELF _TOP _BLANK (läs mer om mål för länk i guiden Frames ramar »)

Om du vill använda olika mål för länkar i samma meny finns exempel i guiden Drop-downmeny 2 »

Exempel 1

Öppnas i samma ram eller fönster ( _SELF) :

 

Exempel 2

Öppnas i hela fönstret (utanför frameset, _TOP ):

 

Exempel 3

Öppnas i samma frameset men utanför ramen ( _PARENT ):

 

Exempel 4

Öppnas i nytt fönster:

 

Steg 1:
Lägg koden inom<HEAD>

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() {
var URL = document.
menyform.listmeny.options[document.menyform.listmeny.selectedIndex].value;

window.location.href = URL;

}
</script>


</HEAD>

 

Steg 2:
Lägg formulärets kod inom <BODY>

Notera att namnen på formuläret och formulärkontrollen är samma som i javascriptet ovan.

<BODY>

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

<option selected value="Välj menyval">Välj menyval</option>
<option value="ananas.htm">Ananas</option>
<option value="apelsin.htm">Apelsin</option>
<option value="avacado.htm">Avacado</option>
<option value="http://webdesignskolan.se">Webdesignskolan</option>
</select>
</form>


</BODY>

Steg 3:
Ä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;