128 besökare, 0 medlemmar och 1 Student är online nu
Loopia

webdesign och HTML

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

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 nytt fönster:

 

Exempel 2 - öppnas i samma fönster eller ram, frame:

 

 

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.php">Ananas</option>
<option value="apelsin.php">Apelsin</option>
<option value="avacado.php">Avacado</option>
<option value="https://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 eller 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;