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

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

Framework CSS Bootstrap

Vue hybride

Discussions similaires

Partager

Partager