En-tete Astuces divers html et css
Classic Moderne

Menu déroulant simple

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 commencer par ajouter le menu sur une page de votre site.
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>


Ce qui nous donne:


Un petit rappel de CSS, 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.

Dans notre cas se seras "ma_page_php.php"

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>

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".

Ajouter le code suivant :

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








Haut-de-Page