Créez votre site avec honolulu...
Apprendre le html
Cours de javascript
Apprendre les CSS

Construire un menu déroulant avec Javascript  






Si vous avez des menus à "rallonge", il peut être intéressant d'adopter un <select> pour y placer les différents liens qui composent votre menu :



** Le procédé utilisé ici s'appuye sur l'indice de chaque option à laquelle aucune "value" n'a donc été attribuée...


<form name="formulaire">
<select name="pourquoi" onchange="diri()">
<option>moi</option>
<option>toi</option>
<option>nous</option>
</select>
</form>

La fonction appelée est la suivante :


<script>
function diri(){
var choix=document.formulaire.pourquoi.selectedIndex
switch (choix)
{case 0:location.href="golf.html";break;
case 1:location.href="hono.html";break;
default:location.href="lacarte.html";break;
}
}
</script>

** Autre utilisation possible d'un <select>



Le code HTML :


<form name="pige">
<select name="compris" onchange="savoir()">
<option value="ni">lundi</option>
<option value="na">mardi</option>
<option value="ne">mercredi</option>
<option value="nu">jeudi</option>
<option value="no">vendredi</option>
<option value="ny">samedi</option>
<option value="nm">dimanche</option>
</select>
<input type="text" name="texter" size="25" value="Vivement les vacances !">
</form>

Le script appelé ici par "onchange" est le suivant :


<script>
function savoir(){
var indice_selectionne=document.pige.compris.selectedIndex;
var chango=document.pige.compris.options[indice_selectionne].value; switch (chango){
case "ni":document.pige.texter.value="et voilà, c'est reparti !";break;
case "na":document.pige.texter.value="toujours dur de travailler...";break;
case "ne":document.pige.texter.value="quand cela va-t'il finir ?";break;
case "nu":document.pige.texter.value="hum, l'odeur du week-end !!!";break;
case "nov":document.pige.texter.value="encore un jour et c'est bon !";break;
case "ny":document.pige.texter.value="Waoow ! On y est...";break;
default:document.pige.texter.value="Pourvu que ça dure...";break;
}
}
</script>

** Et si vous voulez agrémenter tout ça, cliquez ici !

Vous utiliserez ce script que votre serviteur a créé ci-aprés. Les "connaisseurs" auront repéré que TOUS les paramétres sont bien sûr modifiables...

for(yop=0;yop<2;yop++){
var couleur=new Array("black","red")}
function ma_coul(){
var champ=document.rega.gare.options[0]
champ.style.color=couleur[yop]
if (yop>2){yop=0}
else {yop++}
setTimeout("ma_coul()",200)
}

** Pour des options en couleur, vous spécifierez style="color:votre_couleur" !




** Vous pouvez aussi changer le contenu d'un select :



... tout simplement en utilisant la propriété "text" des options... Autrement dit, modifiez le texte des options avec
document.nom_form.nom_select.options[X].text="votre texte";

Des questions, des explications ?? Faites-donc vivre le forum !!!