[bootstrap 4] menu multi-niveaux avec triangle pour signaler les submenus

**laurentSc** · 21/04/2019, 11h03

Bonjour,

je suis parti d'un menu multi-niveaux Bootstrap 4 (https://codepen.io/runamuk0/pen/gbwbOa) que j'ai essayé de modifier pour y ajouter les triangles de jreaux62 pour signaler les sous-menus et que ceux-ci changent d'orientation quand on déroule le menu. J'ai donc rajouté id="navMain" à <nav> et la classe hasSub aux différents <li> du menu qui contiennent des sous-menus et enfin complété le CSS :

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
 
.hasSub:after {
                position:absolute;
                content:"\25BC";
                color:yellow;
                top: 10px;
              right: 10px;
            }
li .dropdown-toggle:after {
          transition: all 0.5s;
          color:yellow;
        }
li.show .dropdown-toggle:after {
          transform: rotate(180deg);
        }
#navMain li ul:hover.hasSub:after {
              color:yellow;
               -ms-transform: rotate(180deg);
              -moz-transform: rotate(180deg);
              -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
            }

mais ce n'est pas bon du tout : https://codepen.io/laurentsc/pen/ROJQmr
Peut-on m'aider ?

Invité · 21/04/2019, 15h00

Bonjour Laurent,

1- dans le 1er codepen , tu utilises le CSS - bootstrap/3.3.1 :

Code :

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

//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

Dans le 2ème, rien.

Et il manque le JS bootstrap.

2- Bootstrap 3 et Bootstrap 4 on des fonctionnements différents.

Il faudrait savoir lequel tu utilises vraiment.

**laurentSc** · 21/04/2019, 15h41

Jérôme,

peux-tu me donner l'URL de ces 2 codepen ?

Invité · 21/04/2019, 16h01

1- Euhhh... Ce sont CEUX que TU as donnés * !

* Pour savoir quels sont les CSS / Js appliqués dans le codepen :

clique sur le bouton "Settings"
dans la popup, il y a un menu : "HTML - CSS - JavaScript - ..."

C'est dans ces onglets CSS / JavaScript qu'on définit les fichiers externes à appliquer **.

2- j'ai repris un exemple de menu Bootstrap 4 :

** Pour MON codepen, j'ai récupérer les URLS de ces fichiers externes directement dans la Documentation Bootstrap 4.

Invité · 21/04/2019, 16h27

J'ai trouvé (et modifié) un menu Bootstrap 4, multi-niveaux :

https://codepen.io/jreaux62/pen/MRXqLb

La rotation des flèches est à la fin du CSS :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
/* --------------------- */
/* SPECIAL : ROTATION des flèches */
/* Niveau 1 */
li .dropdown-toggle:after {
  transition: all 0.5s;
}
li.show > .dropdown-toggle:after {
  transform: rotate(180deg);
}
/* sous-Niveaux suivants */
li li.show > .dropdown-toggle:after {
  transform: rotate(90deg);
}

**laurentSc** · 21/04/2019, 17h02

Je viens de voir le post 5, après avoir écrit le post 6. Je vais donc l'étudier. Oublie le post 6...

**laurentSc** · 21/04/2019, 19h32

Petit souci : si je prends tes 3 codes de ton Codepen (html, css et js) et que je les place dans un fichier (où sont aussi appelés les fichiers externes), ça devient bancal : le niveau 1 se déroule bien mais pas les suivants. Comme je ne vois pas ce qui va pas, je te mets en intégralité le fichier :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--obligatoire pour tout projet bootstrap-->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
 
    <title>Bootstrap 4 squelette menu multi-level</title>
 
    <!-- Bootstrap core CSS (acces au cdn, donc css non chargé mais en ligne) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 
    <!-- Font Awesome (acces au cdn, donc icônes non chargées mais en ligne) -->
    <!--link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">-->
 
    <style>
    .dropdown-submenu {
  position: relative;
}
.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}
 
/* --------------------- */
/* SPECIAL : ROTATION des flèches */
/* Niveau 1 */
li .dropdown-toggle:after {
  transition: all 0.5s;
}
li.show > .dropdown-toggle:after {
  transform: rotate(180deg);
}
/* sous-Niveaux suivants */
li li.show > .dropdown-toggle:after {
  transform: rotate(90deg);
}
    </style>
 
    <script>
      $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show'); // appliqué au ul
  $(this).parent().toggleClass('show'); // appliqué au li parent
 
  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu.show').removeClass("show"); // appliqué au ul
    $('.dropdown-submenu.show').removeClass("show"); // appliqué au li parent
  });
  return false;
});
    </script>
  </head>
 
  <body>
 
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
       <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Submenu action</a></li>
                  <li><a class="dropdown-item" href="#">Another submenu action</a></li>
 
 
                  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                      <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                    </ul>
                  </li>
                  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                      <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                    </ul>
                  </li>
 
 
 
                </ul>
              </li>
            </ul>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
 
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 
  </body>
</html>

**laurentSc** · 21/04/2019, 21h33

Pour que ça soit plus lisible, j'ai séparé les 3 codes, mais le problème est le même

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--obligatoire pour tout projet bootstrap-->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
 
    <title>Bootstrap menu multi-niveaux squelette</title>
 
    <!-- Bootstrap core CSS (acces au cdn, donc css non chargé mais en ligne) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 
    <!-- Font Awesome (acces au cdn, donc icônes non chargées mais en ligne) -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
    <link href="style.css" rel="stylesheet" media="all" type="text/css"> 
 
    <script type="text/javascript" src="monscript.js"></script>
 
 
  </head>
 
  <body>
 
    <!-- début de ton code html-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
          <a class="navbar-brand" href="#">Hidden brand</a>
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
         <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown link
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Submenu action</a></li>
                    <li><a class="dropdown-item" href="#">Another submenu action</a></li>
 
 
                    <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                        <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                      </ul>
                    </li>
                    <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                      <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                        <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                      </ul>
                    </li>
 
 
 
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
      <!-- fin de ton code html-->
 
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </body>
</html>

style.css :

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
 
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}
 
/* --------------------- */
/* SPECIAL : ROTATION des flèches */
/* Niveau 1 */
li .dropdown-toggle:after {
  transition: all 0.5s;
}
li.show > .dropdown-toggle:after {
  transform: rotate(180deg);
}
/* sous-Niveaux suivants */
li li.show > .dropdown-toggle:after {
  transform: rotate(90deg);
}

monscript.js :

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
   $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show'); // appliqué au ul
  $(this).parent().toggleClass('show'); // appliqué au li parent
 
  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show"); // appliqué au ul
    $('.dropdown-submenu.show').removeClass("show"); // appliqué au li parent
  });
  return false;
});

A noter que les codes CSS et JS sont strictement identiques à ceux du Codepen.

Petite précision : quand on clique sur l'item de niveau 2 pour dérouler le niveau 3, c'est au contraire le niveau 2 qui disparaît.

Invité · 21/04/2019, 21h41

Il faut mettre le script JS (sous-menus) APRES les appels aux scripts jQuery et Bootstrap JS.

Donc, à la fin (l'appel à monscript.js doit être juste avant </body>).

C'est logique, non ?

**laurentSc** · 21/04/2019, 21h58

Envoyé par jreaux62

C'est logique, non ?

C'est même magique

Chu impressionné par le code JS...

Peux-tu m'expliquer ce qu'est ce show, qui apparaît 2 fois dans le CSS et plein de fois dans le JS ?

Invité · 21/04/2019, 22h03

"show" est la classe ajouté au menu (automatiquement) et sous-menu (via le script supplémentaire) quand il est cliqué.

Regarde ce qui se passe dans la console.

**laurentSc** · 21/04/2019, 22h24

Figure toi que j'ai jamais utilisé la console. Dans Firefox, il y a 2 consoles : console Web et console du navigateur. Mais dans chacune, je ne vois aucun changement quand je clique...

Invité · 22/04/2019, 12h37

En l'occurrence... c'est l'"Inspecteur".

Touche du clavier "F12" ouvre l'inspecteur/console
ou "clic droit" sur l'élément que tu veux examiner, puis "Examiner l'élément"
Onglet "Inspecteur" -> on voit le code source HTML de la page -> on peut voir la classe "show" être ajoutée/supprimée quand on clique sur un menu.

Il faut vraiment que tu apprennes à te servir de la console.

[bootstrap 4] menu multi-niveaux avec triangle pour signaler les submenus

Framework CSS Bootstrap

Discussions similaires

Partager

Partager