Javascript

Menu et Navigation

Menu dans une liste de sélection ou menu déroulant - Automatique ou avec bouton et PopUp

Il n’y a rien de plus pratique qu’un menu déroulant pour compacter un grand nombre de liens hypertexte dans une même page Web. L’usager n’a qu’à choisir un site de la liste pour être automatiquement redirégé vers celui-ci. La sélection peut ouvrir automatiquement la nouvelle page ou utiliser un bouton pour confirmer la redirection. J’ai ajouté la fonction twPopUp afin d’offrir l’option d’ouvrir le lien dans une fenêtre PopUp.

• Voir l’exemple
• Télécharger le code complet

Créer la liste de sélection
La liste de sélection est tout à fait standard, le URL de destination doit être spécifié dans la valeur de chaque option. Vous pouvez mettre des options sans valeur, séparateur, titre etc. S’il n’y a pas de valeur dans une option, il n’y aura pas de redirection.

<select name="Menu compacte">
  <option selected="selected">Menu compacte</option>
  <option>------- Recherche -------</option>
  <option value="http://www.google.com">Google </option>
  <option value="http://www.nomade.com">Nomade </option>
  <option value="http://www.toile.com">Toile du Québec </option>
  <option>------- Webmestre -------</option>
  <option value="http://www.trucsweb.com">Trucsweb </option>
  <option value="http://www.asp-magazine.com/">ASP Magazine </option>
  <option value="http://www.php.net">PHP.net</option>
  <option>------- Fin du menu -------</option>
</select>

Récupérer la valeur d’une option
Pour faire la redirection, il faut avant tout pouvoir récupérer le URL de l’option sélectionnée. Pour ce faire, il faut identifier le formulaire, la sélection et l’option sélectionnée pour enfin extraire sa valeur.

// Identifier la sélection du formulaire
document.MonForm.MaSelection
// ou à l’intérieur du formulaire et extérieur de la sélection
this.form.MaSelection
// ou à l’intérieur du formulaire et de la sélection
this.MaSelection

Les options sont dans un tableau ou "array", il faut donc indiquer sous la forme d’un tableau l’option sélectionnée.

// Première option
document.MonForm.MaSelection.options[0]

// Deuxième option
document.MonForm.MaSelection.options[2]

Puisque nous ne savons pas à l’avance l’option sélectionnée, il faut le demander. Et pour le savoir, utilisons "selectedIndex" qui identifie l’option sélectionnée d’une liste de sélection.

// retourne la position sélectionnée dans le tableau des options
document.MonForm.MaSelection.selectedIndex

Donc, pour retrouver la valeur sélectionnée...

document.MonForm.MaSelection.options[document.MonForm.MaSelection.selectedIndex].value

Maintenant il faut pouvoir identifier s’il s’agit d’une option de redirection ou simplement une option vide comme un séparateur.

// Récupère la valeur de l’option sélectionnée
sel = document.MonForm.MaSelection.options[document.MonForm.MaSelection.selectedIndex].value

// Test pour savoir si la valeur contient quelque chose
// Si "sel" contient quelque chose, un URL en l’occurrence
// Appelle de la fonction en passant la valeur, sinon, ne rien faire
if (sel) { fonction(sel) }

// Exemple complet
sel = document.MonForm.MaSelection.options[document.MonForm.MaSelection.selectedIndex].value; if (sel) { fonction(sel) }

Capturer l’événement directement dans la liste de sélection
Maintenant qu’on a notre valeur, il faut savoir quand la passer à notre fonction. Tout dépend de l’événement. Pour une redirection automatique sans bouton, il faut capturer l’événement "onChange" directement dans la liste de sélection. En d’autres mots, quand la sélection change ou quand l’usager change de choix dans la liste de sélection. La capture doit être directement dans la balise qui déclare la liste de sélection.

<select name="ListeDeSelection" onChange="sel = document.MonForm.MaSelection.options[document.MonForm.MaSelection.selectedIndex].value;if (sel) { fonction(sel) }">

Puisqu’on est directement dans la liste, pourquoi ne pas utiliser la force du Javascript avec "this". De cette façon, le code est portable sans aucune modification. En effet, "this" identifie l’objet courant, en l’occurrence la liste de sélection.

<select name="ListeDeSelection" onChange="sel = this.MaSelection.options[this.MaSelection.selectedIndex].value;if (sel) { fonction(sel) }">

Capturer l’événement avec un bouton
Avec un bouton, l’usager doit d’abord sélectionner une option, puis cliquer le bouton. Dans le bouton il faut donc capturer l’événement "onClick". Quand l’usager clic !!

<input type="button" value="Go!" onClick="sel=document.MonForm.MaSelection.options[document.MonForm.MaSelection.selectedIndex].value; if (sel){ fonction(sel) }"/>

Et avec "this". Noter qu’il faut ajouter "form.MenuBouton" puisque l’objet courant est le bouton et non pas la sélection. Bien entendu la portabilité est un peu plus limitée. En effet, le formulaire peut avoir n’importe quel nom mais le non de la liste de sélection doit être connu. "MaSelection" doit donc être adapté à chaque formulaire.

<input type="button" value="Go!" onClick="sel=this.form.MaSelection.options[this.form.MaSelection.selectedIndex].value; if (sel){ fonction(sel) }"/>

Les fonctions

Pour faire tous mes exemples, j’utilise deux fonctions. "twAller" permet une redirection dans un cadre ou dans la même fenêtre ou encore dans une nouvelle fenêtre. "twPopUp" quant à elle permet d’ouvrir le nouveau document dans une fenêtre PopUp.

twAller
twAller( url de destination [,Nom du cadre optionnel] [,Nom d’une fenêtre optionnelle]);

Les paramètres de cette fonction sont optionnels à l’exception du URL bien entendu. Le premier, le URL peut être une adresse complète comme "http://www.trucsweb.com" ou une adresse relative au document courant comme "repertoire/page.htm". Le nom du cadre permet d’ouvrir le lien dans un cadre de la fenêtre (frameset). Ne rien mettre si vous n’avez pas de cadre. Pour ouvrir le document dans une nouvelle fenêtre, mettre dans le troisième paramètre le nom de la nouvelle fenêtre. Si aucun des paramètres optionnels n’est spécifié, la destination se fera dans la même fenêtre:

twAller(’http;//www.trucsweb.com’,’’,’’) // Ouvre dans la même page
twAller(’http;//www.trucsweb.com’,’MonCadre’,’’) // Ouvre dans le cadre
twAller(’http;//www.trucsweb.com’,’’,’neoFenetre’) // Ouvre dans une nouvelle fenêtre

twPopUp
twPopUp( url de destination, Nom de la fenètre , largeur, hauteur, Avec défilement ou nom );

Tous les paramètres de cette fonction sont obligatoires. Le URL, le nom de la fenêtre, la largeur, la hauteur et l’option d’avoir une barre de défilement ou nom dans la nouvelle fenêtre créée. Les autres options d’une fenêtre sont pratiquement jamais dynamiques c’est pourquoi ils sont fixes dans la fonction. Mais rien ne vous empêche de les modifier directement dans la fonction. 1 = oui et 0 = nom. Ainsi:

twPopUp( ’http://www.trucsweb.com’, ’NeoFenetre’, 300, 200, 1 ); avec barre de défilement
twPopUp( ’http://www.trucsweb.com’, ’NeoFenetre’, 350, 300, 0 ); sans barre de défilement

Ajouter l’appelle de la fonction dans votre formulaire

Automatique

<!-- Quand l’usager change d’option, la page changera pour la valeur de l’option sélectionnée -->
<select name="ListeDeSelection" onChange="sel = this.MaSelection.options[this.MaSelection.selectedIndex].value;if (sel) { twAller(sel,’’,’’) }">

<!-- Quand l’usager change d’option, une nouvelle fenêtre ouvrira avec le URL de la valeur de l’option sélectionnée -->
<select name="ListeDeSelection" onChange="sel = this.MaSelection.options[this.MaSelection.selectedIndex].value;if (sel) { twAller(sel,’’,’neoFenetre’) }">

<!-- Quand l’usager change d’option, la cadre de la page changera pour la valeur de l’option sélectionnée -->
<select name="ListeDeSelection" onChange="sel = this.MaSelection.options[this.MaSelection.selectedIndex].value;if (sel) { twAller(sel,’nomDuCadre’,’’) }">

<!-- Quand l’usager change d’option, un PopUp ouvrira avec le URL de la valeur de l’option sélectionnée -->
<select name="ListeDeSelection" onChange="sel = this.MaSelection.options[this.MaSelection.selectedIndex].value;if (sel) { twPopUp( sel, ’NeoFenetre’, 300, 200, 1 ) }">

Avec Bouton

<!-- Quand l’usager clic le bouton, la page changera pour la valeur de l’option sélectionnée -->
<input type="button" value="Go!" onClick="sel=this.form.MaSelection.options[this.form.MaSelection.selectedIndex].value; if (sel){ twAller(sel,’’,’’) }"/>

<!-- Quand l’usager clic le bouton, une nouvelle fenêtre ouvrira avec le URL de la valeur de l’option sélectionnée -->
<input type="button" value="Go!" onClick="sel=this.form.MaSelection.options[this.form.MaSelection.selectedIndex].value; if (sel){ twAller(sel,’’,’neoFenetre’) }">

<!-- Quand l’usager clic le bouton, la cadre de la page changera pour la valeur de l’option sélectionnée -->
<input type="button" value="Go!" onClick="sel=this.form.MaSelection.options[this.form.MaSelection.selectedIndex].value; if (sel){ twAller(sel,’nomDuCadre’,’’) }">

<!-- Quand l’usager clic le bouton, un PopUp ouvrira avec le URL de la valeur de l’option sélectionnée -->
<input type="button" value="Go!" onClick="sel=this.form.MaSelection.options[this.form.MaSelection.selectedIndex].value; if (sel){ twPopUp( sel, ’NeoFenetre’, 300, 200, 0 ) }">

Code complet avec fonctions

<html>
<head>
<title>Trucsweb : Menus dans une liste de sélection</title>
<script type="text/javascript" language="javascript">
<!--
// ***********************
// Création: www.trucsweb.com
// Permet d’ouvrir un nouveau document
// twAller( url de destination [,Nom du cadre optionnel] [,Nom d’une fenêtre optionnelle]);
// Si vous entrez un nom de cadre, l’ouverture se fera dans le cadre.
// Si vous entrez un nom de Target sans nom de cadre, L’ouverture se
// fera dans une nouvelle fenêtre.
// *********************** Exemples:
// - twAller(’http;//www.trucsweb.com’,’’,’’) Ouvre dans la même page
// - twAller(’http;//www.trucsweb.com’,’MonCadre’,’’) Ouvre dans le cadre
// - twAller(’http;//www.trucsweb.com’,’’,’neoFenetre’) Ouvre dans une nouvelle fenêtre
// ***********************
function twAller(_url,_cadre,_target) {
  if (_cadre) {
    parent._cadre.location.href = _url;
  } else if (_target) {
    _target = window.open(_url,_target);
  } else {
    window.location.href = _url;
  }
}
//-->
</script>

<script type="text/javascript" language="javascript">
<!--
// ***********************
// Création: www.trucsweb.com
// Permet d’ouvrir une fenêtre PopUp
// twPopUp( url de destination, Nom de la fenètre , largeur, hauteur, Avec défilement ou nom );
// 0 aucune barre de défilement
// 1 avec barre de défilement
// *********************** Exemples:
// - twPopUp( ’http://www.trucsweb.com’, ’NeoFenetre’, 300, 200, 1 ); avec barre de défilement
// - twPopUp( ’http://www.trucsweb.com’, ’NeoFenetre’, 350, 300, 0 ); sans barre de défilement
// ***********************
function twPopUp(_url,_nom,_larg,_haut,_defil) {
var op_scroll = _defil;
var op_wid = _larg;
var op_heigh = _haut;
var op_tool = 0;
var op_loc_box = 0
var op_dir = 0;
var op_stat = 0;
var op_menu = 0;
var op_resize = 0;
var options = "toolbar="+ op_tool +",location="+ op_loc_box +",directories="
+ op_dir +",status="+ op_stat +",menubar="+ op_menu +",scrollbars="
+ op_scroll +",resizable=" + op_resize +",width=" + op_wid +",height="+ op_heigh;
var wNom = window.open(_url, _nom, options);
if(_nom.focus){_nom.focus();}
}
// -->
</script>
</head>

<body>
Redirection automatique dans un PopUp<br />
<form>
<select name="MenuPop" onChange="sel = this.options[this.selectedIndex].value; if (sel) { twPopUp(sel,’MonPop’,’300’,’300’,0) }">
  <option selected="selected">Menu </option>
  <option>------- </option>
  <option value="http://www.google.com">- Recherche </option>
  <option value="http://www.trucsweb.com">Trucsweb </option>   <option value="http://www.toile.com">Toile du Québec </option>   <option>------- </option>
</select>
</form>

Redirection automatique sans PopUp<br />
<form>
<select name="MenuAuto" onChange="sel = this.options[this.selectedIndex].value; if (sel) { twAller(sel,’’,’’) }">
  <option selected="selected">Menu </option>
  <option>------- </option>
  <option value="http://www.google.com">- Recherche </option>
  <option value="http://www.trucsweb.com">Trucsweb </option>
  <option value="http://www.toile.com">Toile du Québec </option>
  <option>------- </option>
</select>
</form>

Redirection avec bouton<br />
<form name="Menu" >
<select name="MenuBouton">
  <option selected="selected">Menu </option>
  <option>------- </option>
  <option value="http://www.google.com">- Recherche </option>
  <option value="http://www.trucsweb.com">Trucsweb </option>
  <option value="http://www.toile.com">Toile du Québec </option>   <option>------- </option>
</select>
<input type="button" value=" Go!" onClick="sel = this.form.MenuBouton.options[this.form.MenuBouton.selectedIndex].value; if (sel) { twAller(sel,’’,’neoFenetre’) }" />
</form>
</body>
</html>