Bric à Brac informatique  logo
>

Liens en menu déroulant vertical


AVERTISSEMENT

Le but de cette page est d'expliquer  comment réaliser un menu déroulant conçu avec les langages HTML et CSS.

Le modèle de menu  déroulant proposé doit fonctionner sur les navigateurs modernes (Internet explorer 6 est donc exclu). La programmation se veut le plus simple possible. Les balises utilisées sont des balises courantes.

Le choix effectué pour cette page est de limiter la liste déroulante à un seul niveau.

Merci beaucoup au site "CSS facile" qui m'a aidée à concevoir cette liste déroulante, tout particulièrement grâce à cette page http://www.css-faciles.com/menu-deroulant.php

L'application directe de ce mode opératoire est à visionner sur la page dont le lien est affiché ci-dessous : 
http://www.bricabracinfo.fr/Details/acquisImag.php






CONSEIL :

Effectuer une copie des lignes de code encadrées de rouge ci-dessous.

Créer un nouveau document html5 dans BlueGriffon.

Dans le Code Source de Bluegriffon, effacer le code existant.

Coller.

Vous devriez obtenir la liste déroulante proposée ci-dessus.

       
  <!DOCTYPE html>

<html>
  <head>
    <meta  content="text/html; charset=UTF-8"  http-equiv="content-type">
    <title>essai liste deroulante</title>
  

     <style  type="text/css">
    #list_deroul {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 16px; font-weight:bold;}
    #list_deroul ul ul {display: none; position: absolute; margin: 0px; padding: 0px;}
         #list_deroul li {list-style-type: none; position: relative; width: 500px; background-color: #FF9900; padding: 4px;  margin: 0px}
         #list_deroul li:hover  {background-color: #99CC00;}
         #list_deroul li a {text-decoration:none; color: black;}
         #list_deroul li:hover ul.sous_liste {display: block}
    </style>
  </head>
 
<body>
    <div  id="list_deroul">
      <ul>
        <br>
        <li>
          <p>
Outils informatiques pour l'acquisition d'images numériques <br>
          </p>
          <ul  class="sous_liste">
            <br>
          <li><a  href="http://www.bricabracinfo.fr/Details/apn.php">
L'appareil Photo Numérique (APN)</a></li>
            <br>
            <li><a  href="http://www.bricabracinfo.fr/Details/scann.php">
Le scanner</a></li>
            <br>
            <li><a  href="http://www.bricabracinfo.fr/Details/preao_pao.php">
Les logiciels dits de PAO ou PréAO</a></li>
            <br>
            <li><a  href="http://www.bricabracinfo.fr/Details/autres.php">
Autres </a>(Divers)</li>
            <br>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>


DECRYPTAGE du code utilisé pour obtenir la liste déroulante proposée ci-dessus


1. INTRODUCTION :

Tout d'abord, remarquer que la liste est  masquée. Seul le titre de cette liste est visible. La liste n’apparaît  que lorsque l'utilisateur passe le pointeur de la souris sur le titre.

Ce résultat est obtenu par l'utilisation du langage CSS.

Nous allons utiliser  deux techniques que permet ce langage :

- Afficher / Masquer du texte

- Déclencher un événement. Dans notre exemple : l'affichage du texte est modifié lors du passage de la souris celui-ci.

Voici les deux propriétés que nous avons utilisées.

2. CRÉATION d'une LISTE SIMPLE

Rappel 1 :

Un éditeur de texte (comme BlueGriffon) permet de créer facilement une liste affectée de liens.
Voir cette fiche : Créer une liste à puces affectée de liens avec BlueGriffon

Rappel 2 : Création d'une liste à puces à l'aide d'un exemple simple. Saisir au clavier les 4 lignes ci-dessous.  

Document 1

Document 2

Document 3

Document 4

Sélectionner ces 4 lignes et activer l'icône Liste à puces  de la barre d'outils, vous obtenez ceci.

C'est à partir de cette liste toute simple que nous allons créer une liste déroulante. L'affichage de la liste se traduit ainsi dans le langage HTML

 <ul>
        <li>Document 1 </li>
        <li>Document 2 </li>
        <li>Document 3 </li>
        <li>Document 4 </li>
 </ul>

Nous souhaitons que ce bloc <ul> </ul> ait un titre. Ce titre constituera un 1er niveau. Les 4 lignes suivantes passeront donc  au niveau 2 comme ceci :

Ce qui se traduira dans le langage HTML:

  <ul>
        <li>Liste des documents disponibles
          <ul class="sous_liste">
             <li>Document 1 </li>
             <li>Document 2 </li>
             <li>Document 3 </li>
             <li>Document 4 </li>
          </ul>
        </li>
   </ul>

Le but de ce tutoriel est de savoir comment créer une liste déroulante à partir de ce modèle. Pour cela nous devrons  utiliser le langage CSS..

Ce que nous voulons obtenir :
Le niveau 2 (la liste des 4 documents) doit être invisible en affichage normal.
Il ne devient visible que lors du survol du niveau 1 (le titre de cette liste) à l'aide de la souris.

Voici le code  CSS à utiliser:

ul ul {display: none;}
li:hover ul.sous_liste, {display:block;}

Survoler le titre  ci-dessous à l'aide du pointeur de la souris pour voir le résultat de ce code.


Explications

ul ul {display:none;}
   avec cette propriété la balise <ul>, enchâssée  dans une autre balise <ul>, ne sera pas affichée.

            - La balise ul annonce une liste à puces (voir la fiche Créer des listes (ordonnées ou non).
              Donc : écrire ul ul signifie que l'on définit le comportement de la liste de niveau 2 (ou sous-liste)

           - display: none
             avec cette propriété la sous-liste ne s'affichera pas.

li:hover ul.sous_liste, {display:block;}

- hover annonce un changement d'affichage lorsque le pointeur de la souris survole l'élément li

- li et ul.sous_liste sont des éléments désignés

- display:block; Ces 2 éléments vont s'afficher au passage du pointeur de la souris

- important :  création de la classe ".sous_liste". 

3. CODE d'une page HTML permettant d'obtenir l'affichage  d'une LISTE déroulante de base

Voici ci-dessous le code complet d'une page HTML 5  affichant la liste déroulante simple décrite en 2 :


<!DOCTYPE html>

<html>

  <head>

    <meta  content="text/html; charset=UTF-8"  http-equiv="content-type">

    <title>Liste déroulante</title>

    <style  type="text/css">

      ul ul {display: none;}

      li:hover ul.sous_liste {display:block;}

   </style>

  </head>

  <body>

     <ul>

        <li  style="background-color: rgb(255, 204, 51);">Liste des documents

          disponibles

          <ul  class="sous_liste">

            <li><span  style="color: rgb(255, 0, 0);">Document 1 </span> </li>

            <li><span  style="color: rgb(255, 0, 0);">Document 2 </span> </li>

            <li><span  style="color: rgb(255, 0, 0);">Document 3 </span> </li>

            <li><span  style="color: rgb(255, 0, 0);">Document 4</span></li>

          </ul>

        </li>

      </ul>

   </body>

</html>

REMARQUES à propos de ce modèle de page HTML. Concernant ce code 

dans la partie <head> </head>

- rouge  : c'est le code CSS nécessaire à créer la liste déroulante

dans la partie <body< </body>.

- orange : l'élément <li> du 1er niveau est affecté (facultatif) d'une couleur d'arrère-plan introduite par l'élément <style>

- vert :  l’élément <ul> est affecté de la classe "sous_liste" créé dans la partie CSS

- bleu : les éléments <li> sont affectés (2ème niveau) d'une couleur (rouge) introduite par l'élément <span> (facultatif)


CONSEIL :

Effectuer une copie des lignes de code encadrées de rouge ci-dessus.

Créer un nouveau document html5 dans BlueGriffon.

Dans le Code Source de Bluegriffon, effacer le code existant.

Coller.

Vous devriez obtenir la liste déroulante toute simple proposée ci-dessus.


4. DECRYPTAGE des CODES  proposés pour obtenir la LISTE déroulante  affichée en début de document 

Les codes proposés sont créés à partir du principe de base énoncé au paragraphe 2.

Le code CSS est enrichi par différents ajouts non indispensables pour obtenir la liste déroulante.
Ils permettent seulement une meilleure présentation de notre liste concernant les Outils informatiques pour l'acquisition d'images numériques avec les liens correspondants
- L'appareil Photo Numérique (APN)
- Le scanner
- Les logiciels dits de PAO ou PréAO
- Autres (Divers)

Décryptagee de la partie 
<style  type="text/css"> .../<style> (dans la section  <head> ...</head>)


Décryptage de la section  <body>... </body>


5. CONCLUSION

Ce document n'est qu'un exemple pour essayer de mieux comprendre comment fonctionne une liste déroulante. Ce peut être aussi le point de départ pour créer des menus à liste déroulante sur les pages de votre site.

Voir à ce sujet 2 excellents sites : http://www.css-faciles.com/menu-deroulant.php et http://www.frogweb.fr/menu-deroulant-vertical/. Merci à leurs concepteurs



Retour

Dernière mise à jour : le 23/07/16