[TUTO] Comment créer simplement un menu déroulant

Par annuaire-web Le 13/10/2021 0

Dans Tutos de codage pour sites, forums ou blogs

Voici un tutoriel pour créer simplement un menu déroulant en HTML et sans CSS :

Mettez d'abord le code HTML suivant :
 <html> <title>liste déroulante dynamique</title> <head> <script language="Javascript" type="text/javascript"> function choix(formulaire) { var j; var i = formulaire.boite1.selectedIndex; if (i == 0) for(j = 1; j <3; j++) formulaire.boite2.options[j].text=""; else{ } for(j = 0; j<3; j++) formulaire.boite2.options[j+1].text=text[j]; } formulaire.boite2.selectedIndex=0; } </script> </head> <body> <form name="form"> <select size="1" onChange="location = this.options[this.selectedIndex].value;">

Ensuite il faut mettre le contenu du menu :

<option value="">NAVIGATION</option> <option value="LIEN-1">TEXTE-1</option> <option value="LIEN-2">TEXTE-2</option> <option value="LIEN-3">TEXTE-3</option>

Remplacez NAVIGATION par ce que vous voulez mettre comme texte et remplacez TEXTE-1, TEXTE-2, TEXTE-3 par vos textes et remplacez LIEN-1, LIEN-2, LIEN-3 par vos liens.

Vous pouvez mettre autant de liens que vous voulez, grâce à ce champs :
<option value="LIEN">TEXTE</option>

Ensuite, il faut fermer ces codes HTML, il faut ajouter ce code juste après :
</select> </form> </option> </body> </html>

Voilà un exemple :

<html> <title>liste déroulante dynamique</title> <head> <script language="Javascript" type="text/javascript"> function choix(formulaire) { var j; var i = formulaire.boite1.selectedIndex; if (i == 0) for(j = 1; j <3; j++) formulaire.boite2.options[j].text=""; else{ } for(j = 0; j<3; j++) formulaire.boite2.options[j+1].text=text[j]; } formulaire.boite2.selectedIndex=0; } </script> </head> <body> <form name="form"> <select size="1" onChange="location = this.options[this.selectedIndex].value;"> <option value="">Menu</option> <option value="https://www.ella-annuaire.com/">Accueil</option> <option value="https://www.ella-annuaire.com/blog/">Blog</option> <option value="https://www.ella-annuaire.com/livre-d-or/">Livre d'or</option> <option value="https://www.ella-annuaire.com/contact/contacter-l-administratrice-d-ella-annuaire.html">Contact</option> </select> </form> </option> </body> </html>

Ajouter un commentaire

Nom

E-mail

Site Internet

Anti-spam