proposé par Frédéric, de FilmsdeLover.com.

(mis à jour le 23 avril 2010)

- Un menu déroulant sur un site est un gain de place non négligeable et peut servir à bien des usages. Chaque ligne de la liste pointe vers un lien.

- Nous allons apprendre comment ajouter un menu déroulant comme celui-ci :

Ce tutoriel s'adresse aux débutants et fonctionne sur tous les sites Jimdo (Free, Pro, Business).

1) Nous allons commencer par ajouter le menu sur une page ou dans la sidebar de votre site Jimdo. Ajoutez donc un module "Widget/HTML".

2) Le code de base de la liste défilante est le suivant :

<form><select name="ListeUrl" size="1" onchange="ChangeUrl(this.form)" style="width: 180px; background-color: none; color: black; font-family: Verdana; font-size:12px;">
<option selected="selected" value="">Titre de la liste</option>
<option value="http://www.adressevoulue1.com/">Titre 1 du lien</option>
<option value="http://www.adressevoulue2.com/">Titre 2 du lien</option>
<option value="http://www.adressevoulue3.com/">Titre 3 du lien</option>
</select></form>

Examinons un peu les composantes de ce code :

size="1" -> Détermine la hauteur des éléments par défaut du menu. Si vous remplacez le 1 par 2, plus d'éléments apparaissent sans avoir besoin de cliquer sur la flèche.

width: 180px -> Cette partie régit la largeur du menu. 180px est adapté pour une sidebar. Essayez différentes valeurs jusqu'à trouver la bonne largeur.

background-color: none -> Il s'agit de la couleur du fond de la liste. Pour noir, mettez "black", pour rouge "red" et ainsi de suite.

color: black -> Détermine la couleur de l'écriture.

font-family: verdana -> Permet de modifier le type d'écriture.

font-size:12px -> Permet de modifier la taille de la police du menu.

Titre de la liste : Vous pouvez remplacer ce texte par ce que vous voulez. C'est ce qui apparaitra en haut du menu, par défaut.

http://www.adressevoulue.com : Remplacez ces valeurs par les adresses des liens vers lesquels vous souhaitez pointer chaque élément de la liste.

Titre 1 du lien : Remplacez ce texte par le titre qui apparaitra dans la liste.

Pour ajouter une ligne supplémentaire, il suffit d'ajouter la ligne suivante avant la balise </select> :

<option value="http://www.adressevoulue4.com/">Titre 4 du lien</option>

3) Ce n'est pas encore fini puisque si vous cliquez sur les liens, rien ne se passe. Il faut encore ajouter un bout de code dans le Head. Cliquez donc sur "Paramètres"> "Modifier le Head".

4) Ajouter le code suivant :

<script language="JavaScript" type="text/javascript">
//<![CDATA[
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
function ChangeUrl(formulaire)
        {
        if (formulaire.ListeUrl.selectedIndex != 0)
                {
                location.href = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
                }
        else 
                {
                alert('Veuillez choisir une destination.');
                }
        }
//]]>
</script>

Et enregistrez votre Head. Voilà, le menu devrait désormais fonctionner !