listes

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 cette page : http://www.bricabracinfo.fr/Details/acquisImag.php

Outils informatiques pour l'acquisition d'images numériques
- L'appareil Photo Numérique (APN)
- Le scanner
- Les logiciels dits de PAO ou PréAO
- Autres (Divers)

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>

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.

La propriété display qui fait apparaître (ou disparaître) un élément. Il faut lui associer les valeurs nonepour masquer l'élément désigné ou block qui au contraire affiche cet élément

La propriété hover permet d'associer un style CSS à un élément survolé.

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.

Document 1
Document 2
Document 3
Document 4

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 :

Liste des documents disponibles
- Document 1
- Document 2
- Document 3
- Document 4

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.

Liste des documents disponibles
- Document 1
- Document 2
- Document 3
- Document 4

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>

<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

<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>)

Création d'un ID : #list_deroul. Les propriétés de cet ID ne s'appliqueront qu'à une seule liste déroulante.
Désignation de la police, de sa taille et de son style gras (bold) pour cet ID

Position absolue (absolute) à l'élément <ul> de 2ème niveau (ul ul)

Marge et espacement entre texte et marge nuls : (margin: 0px) et (padding: 0px) pour l'élément <ul> de 2ème niveau (ul ul)

Affectation d'une position relative (relative) à l'élément <li> (li) . Le choix de cette position relative permet l'alignement vertical du titre avec la liste.

Affectation d'une largeur de 500px (width: 500px) d'une marge nulle (margin:0px) et d'un espacement entre texte et marge de 4 px (padding: 4px), à l'élément <li> (li)

Affectation d'une couleur d'arrière plan orange (background-color: #FF9900)à l'élément <li> (li). La couleur est codée en code couleur html (on pourrait aussi utiliser le code rvb comme dans l'exemple simple en 2).

Affectation d'une couleur d'arrière plan verte (background-color: #99CC00)à l'élément <li> (li) quand le pointeur de la souris le survole (hover)

Affectation de la valeur text-decoration: none pour la police affichant le lien (a). Par défaut un lien est toujours souligné. Avec cet ajout, il ne le sera pas.

Affectation d'une couleur noire (color: black) pour la police affichant le lien (a). Sinon par défaut, la couleur d'un lien est affichéeen bleu.

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

Saisie de l'élément <div> .. </div> affecté de l' id = " #list_deroul".Cet ID a été créé dans le CSS de la section <head>... </head>

Saisie de la liste en langage HTML, et des liens correspondants (introduits par <a href= ... > </a>) comme expliqué dans la partie 2 de ce document.

Saisie de class="sous_liste"au niveau de ul 2ème niveau. Cette classe a été créée dans le CSS de la section <head>... </head>

Création de retours à la ligne ou de paragraphe uniquement pour améliorer la présentation <br> ou <p> ...</p>

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

Liens en menu déroulant vertical