CSS3 – Menus interactifs

LEÇON

 

Par "menu interactif" on veut dire une barre de navigation (menu) qui réagit au survol de la souris en ouvrant des sous-menus.

Ceci est possible avec CSS (sans JavaScript) en exploitant les pseudo-classes.

Remarques :

  • typiquement, un élément dans la barre de navigation principale n'est pas obligatoirement le parent d'un sous-menu - on peut avoir certains éléments qui s'ouvrent vers un sous-menu et d'autres éléments qui sont sans sous-menu
  • les éléments dans les sous-menus peuvent avoir des sous-menus à leur tour (menu interactifs de plusieurs niveaux)

 

Exemple avec 2 niveaux

Voici une page qui illustre le concept avec 2 niveaux de menu : Cliquez ici pour ouvrir la page exemple.

Caractéristiques à remarquer :

  • l'interactivité au niveau des couleurs et de l'apparition des sous-menus
  • l'utilisation de liste non-ordonnée (balise ul ) pour structurer les menus
  • l'utilisation des sélecteurs hiérarchiques et des pseudo-classes pour implémenter l'aspect interactif des menus
  • l'utilisation de la pseudo-classe :before pour préfixer les éléments dans les menus
  • l'affichage en colonnes (méthode 1) pour le corps de la page

 

Voici le code source de la page (CSS et HTML) :

 

menu_interactif.css

body
{
  font-family: Helvetica, Arial, sans-serif;
  width:990px;
  margin:0 auto;
  background-color:#123456;
}

#banner
{
  background-color:#234567;
  color:white;
  padding:5px 20px;
}

#menu
{
  background-color:darkorange;
  font-weight:bold;
}

#main
{
  background-color:#ddeeff;
}

#column-right, #column-left
{
  padding:20px;
}

#column-right
{
  float:right;
  background-color:#ddeeff;
  width:330px;
}

#column-left
{
  float:left;
  width:580px;
  background-color:white;
  min-height:520px;
}

#footer
{
  background-color:#234567;
  color:#6688aa;
  font-size:0.75em;
  padding:20px;
}

/* liste niveau 1 ou 2 */

ul
{
  margin:0;
  padding:0;
  list-style:none;
}

/* éléments d'une liste niveau 1 ou 2 */

ul li
{
  display:inline-block;     /* chaque élément de la liste est un bloc mais s'affiche de façon inline */
  position:relative;        /* crée un point de référence pour la "position absolute" de la liste enfant */
  padding:15px;
  background-color:darkorange;
  cursor:pointer;
  margin-right:-4px;        /* évite les espaces vides entre les blocs li */
}

ul li:hover
{
  background-color:#012345;
  color: white;
}

ul li:before
{
  color:brown;
  content: "\25A0\0020";    /* préfix pour tous les éléments */
}

ul li:hover:before
{
  color:orange;
}

/* liste niveau 2 */

ul li ul
{
  display:none;             /* changera avec le survol de l'élément parent (li parent) */
  margin:0;
  padding:0;
  position:absolute;
  top:49px;
  left:0;
  width:220px;              /* (facultatif) la largeur (width) de la liste niveau 2 */
  z-index:99;               /* (facultatif) assure superposition de la liste sur tout contenu de la page avec z-index > 0 */
}

ul li:hover ul
{
  display:block;
}

/* éléments d'une liste niveau 2 */

ul li ul li {
  background-color:#012345;
  display:block;
  color:white;
}

ul li ul li:hover
{
  background-color:#234567;
}

ul li ul li:before {
  color:orange;
}

ul li ul li:hover:before {
  color:#abcdef;
}

 

menu_interactif.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
        <link rel="stylesheet" type="text/css" href="menu_interactif.css">
    </head>
    <body>

      <div id="banner">

        <h1>Lorem ipsum dolor</h1>

        <p>Maecenas eleifend maximus condimentum. Aliquam erat volutpat. Tincidunt a rhoncus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sit amet elementum felis. Vivamus ullamcorper eget arcu eu rhoncus. </p>

      </div>

      <div id="menu">

        <ul>
          <li>Vivamus</li>
          <li>Interdum</li>
          <li>
            Malesuada
            <ul>
              <li>Efficitur</li>
              <li>Suspendisse</li>
              <li>Fermentum amet</li>
            </ul>
          </li>
          <li>
            Ipsum primis faucibus
            <ul>
              <li>Elementum</li>
              <li>Rhoncus justo</li>
              <li>Maecenas eleifend ullamcorper eget arcu</li>
              <li>Ullamcorper</li>
            </ul>
          </li>
          <li>
            Consectetur
            <ul>
              <li>Viverra semper</li>
              <li>Aliquam</li>
              <li>Augue massa</li>
            </ul>
          </li>
        </ul>

      </div>

      <div id="main">

        <div id="column-right">

          <h4>Aenean finibus pulvinar augue eget aliquam. Lorem ipsum dolor sit amet.</h4>

          <p>
          Consectetur adipiscing elit. Aenean congue justo mi, sit amet semper est mattis nec. Duis a sollicitudin nibh, posuere consequat ex. Nunc viverra semper leo at vestibulum. Duis pellentesque mattis arcu eget dignissim. Cras aliquam leo sit amet augue malesuada vehicula. Maecenas augue massa, euismod sed varius non, sollicitudin non turpis.
          </p>

          <h4>Aliquam nec ultricies ex</h4>

          <p>
           Suspendisse potenti. Nunc lacus elit, dignissim eu aliquam nec, molestie vitae erat. Vivamus interdum sapien arcu, sed egestas justo faucibus vel. Nunc at rutrum eros. Praesent iaculis ante et venenatis tincidunt. Duis leo magna, bibendum quis urna id, rhoncus tincidunt risus.
          </p>

        </div>

        <div id="column-left">

          <h2>Sapiens vestibulum rhoncus</h2>

          <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue justo mi, sit amet semper est mattis nec. Duis a sollicitudin nibh, posuere consequat ex. Nunc viverra semper leo at vestibulum. Nulla volutpat hendrerit dui nec rutrum. Nulla sem leo, blandit dictum faucibus at, placerat ut velit. Vivamus nec efficitur quam. Sed cursus mi ut sagittis lobortis. Aenean finibus pulvinar augue eget aliquam.
          </p>

          <h4>Vivamus interdum sapien arcu, sed egestas justo faucibus vel. Nunc at rutrum eros.</h4>

          <p>
          Nam non mauris non sem elementum volutpat vel in orci. Fusce venenatis, ligula sit amet placerat rhoncus, dolor leo bibendum lorem, sed blandit augue libero eget eros. Maecenas placerat lorem ante, sed viverra leo auctor et. Nullam interdum turpis eget nisl vestibulum, vel commodo enim ullamcorper. Nulla tempor sit amet risus ut lobortis. Nulla volutpat venenatis ornare. Morbi sit amet purus nec nisi varius vestibulum quis a leo.
          </p>

          <h4>Morbi sit amet purus nec nisi varius vestibulum quis a leo.</h4>

          <p>
          Nam non mauris non sem elementum volutpat vel in orci. Maecenas placerat lorem ante, sed viverra leo auctor et. Nullam interdum turpis eget nisl vestibulum, vel commodo enim ullamcorper. Nulla tempor sit amet risus ut lobortis. Nulla volutpat venenatis ornare.
          </p>

        </div>

        <div style="clear:both;">
        </div>

      </div>

      <div id="footer">
          <p>
          Praesent iaculis ante et venenatis tincidunt. Duis leo magna, bibendum quis urna id, rhoncus tincidunt risus. Ut vestibulum arcu nec mauris dictum, et volutpat augue hendrerit. Aenean mattis gravida enim aliquam tempus. Aenean a nibh erat. Duis pellentesque mattis arcu eget dignissim. Cras aliquam leo sit amet augue malesuada vehicula. Maecenas augue massa, euismod sed varius non, sollicitudin non turpis. Cras purus nunc, condimentum sed mattis egestas, placerat non orci. Aliquam nec ultricies ex. Suspendisse potenti. Nunc lacus elit, dignissim eu aliquam nec, molestie vitae erat.
          </p>
      </div>

    </body>
</html>

 

EXERCICES

 

1. Reproduire les fichiers ci-dessus. Ouvrir la page dans un navigateur pour s'assurer que tout marche comme prévu. Puis modifier/supprimer des instructions pour vous familiariser avec l'utilité de chaque ligne dans le CSS - surtout les lignes concernant les listes (ul, li, etc). Autrement dit : si on ne comprend pas l'utilité d'une instruction dans le CSS, il faut la modifier ou la supprimer pour ensuite voir, dans le navigateur, la différence d'affichage/comportement de la page. Ensuite, appliquer des modifications de couleure, de taille, de contenu des menus pour vous familiariser d'avantage avec cette technique.

2. Dans l'exemple original, le menu principal s'affiche de manière horizontale et les sous-menus s'affichent de manière verticale. Transformer le code de l'exemple pour obtenir une page avec un menu principal qui s'affiche de manière verticale dans la colonne à gauche (et réduire en fonction la largeur de celle-ci). Les sous-menus devraient toujours s'afficher de manière verticale, mais ils devraient s'ouvrir à droite du menu principal, au niveau de leur parent.

3. Transformer la solution au numéro 2 pour avoir un menu à trois niveaux. Chaque menu devrait s'afficher de manière verticale. Le menu niveau 2 devrait s'afficher à droite du menu niveau 1 (comme dans la solution au numéro 2) et le menu niveau 3 devrait s'afficher à droite du menu niveau 2.

4. Transformer l'exemple original pour avoir un menu à trois niveaux. Ainsi on aura une page avec : le menu principal (niveau 1) qui s'affiche de manière horizontale; le sous-menu niveau 2 qui s'affiche de manière verticale sous son élément parent; et le sous-menu niveau 3 qui s'affiche aussi de manière verticale mais à droite de son élément parent.