Menu Horizontal à plusieurs niveaux

**mediamimi** · 12/10/2015, 21h06

Bonjour à tous et à toutes,

Quasi ignorante en Javascript, mais je me soigne!

En attendant, je me casse la tête pour créer un menu de navigation horizontal, à 3 niveaux.

J'ai consulté le "menu déroulant 3" dans la galerie css du site mais je n'arrive pas trouver comment je dois ajouter un 3ème niveau d'onglet.
Quelqu'un peut-il (elle) m'aider? D'avance, merci.
Médiamimi

**friendofweb** · 13/10/2015, 11h53

Bonjour,

Pourriez-vous créer un lien vers le tuto en question ?
Pourriez-vous insérer un code source et exprimer vos soucis par rapport au code, indispensable pour obtenir de l'aide ?

Le tuto suivant devrait vous intéresser : menu déroulant animé css3

Cordialement,

**mediamimi** · 13/10/2015, 15h08

Merci friendofweb,

http://css.developpez.com/galerie/de...talderoulant3/

Le lien du tuto dont j'ai récupérer le script qui est à deux niveaux. Il me faut ajouter un 3ème niveau de sous-menu qui se déroule également de manière horizontale.
D'après ce que j'ai lu, il faut absolument utiliser le Javascript pour réaliser ce type de menu.

Je n'ai aucune idée de la manière dont je dois procéder pour adapter le code Javascript (je suis nocive en ce langage).
Quelqu'un (une) peut-il (elle) me montrer la marche à suivre?

D'avance, je vous remercie.

Invité · 14/10/2015, 13h20

Bonjour,

Houla !
Oublie tout de suite ce tuto !

Voici une méthode très simple et plus actuelle : http://codepen.io/jreaux62/pen/QjwQrK
(variante animée : http://codepen.io/jreaux62/pen/wKrzrJ )

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  <nav class="navbar" id="topmenu">
    <ul>
      <li>
        <a href="#">One</a>
        <ul>
          <li><a href="#" id="">One sub 1</a>
            <ul>
              <li><a href="#" id="">One sub sub 11</a></li>
              <li><a href="#" id="">One sub sub 12</a></li>
              <li><a href="#" id="">One sub sub 13</a></li>
            </ul>
          </li>
          <li><a href="#" id="">One sub 2</a></li>
          <li><a href="#" id="">One sub 3</a>
            <ul>
              <li><a href="#" id="">One sub sub 31</a></li>
              <li><a href="#" id="">One sub sub 32</a></li>
            </ul>
          </li>
          <li><a href="#" id="">One sub 4</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Two</a>
        <ul>
          <li><a href="#" id="">Two sub 1</a></li>
          <li><a href="#" id="">Two sub 2</a></li>
          <li><a href="#" id="">Two sub 3</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Three</a>
        <ul>
          <li><a href="#" id="">Three sub 1</a></li>
          <li><a href="#" id="">Three sub 2</a></li>
        </ul>
      </li>
    </ul>
  </nav>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
* { margin:0; padding:0; }
.navbar ul {
  position:relative;
  width:100%; 
  list-style:none outside none;
}
.navbar ul li {
  float:left; /* menu, sous-menus horizontaux */
}
.navbar ul:before, .navbar ul:after {
  display:table; content:''; clear:both;
  /* permet de remettre les li float:left dans le flux */
}
.navbar > ul li ul {
  display:none; /* sous-menu masqués */
  position:absolute;
  top:100%;
  left:0;
}
.navbar li:hover > ul {
  display:block; /* sous-menu affiché */
}
 
/* ----------------------- */
/* DECO */
.navbar ul { /* niveau 1 */
  background:#aaa;
}
.navbar ul ul { /* niveau 2 */
  background:#bbb;
}
.navbar ul ul ul { /* niveau 3 */
  background:#ccc;
}
.navbar ul li a {
  display:block;
  padding:10px 15px;
  color:#111;
  text-decoration:none;
}
.navbar ul li:hover > a {
  background:#666;
  color:#fff;
}
.navbar ul li a {
  border-right:1px solid #fff;
}