[BootStrap=3.3.6] Mettre un 2éme sous menu dans le menu

**zugolin** · 19/01/2020, 14h47

Bonjour à tous,
je cherche à faire une seconde sous liste de menu déroulant
je m'explique:
j'ai, par exemple : menu : accueil, realisation, materiel, services
dans services, j'ai 4 catégories : service 1 2 3 et 4, ça, ça fonctionne...
mais dans service 4 , je voudrais avoir des sous categories : service 4-1 et 4-2 ... ça , je n'y arrive pas...

voici le code, mais est-ce un probleme de css, bootstrap ou js ?

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
<div class="collapse navbar-collapse" id="site-nav-bar">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Accueil</a></li>
        <li><a href=" ">Réalisations</a></li>
        <li><a href=" ">Matériel</a></li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Les Services </a>
            <!-- bloc menu déroulant -->
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Service 1</a>
                <a class="dropdown-item" href="#">Service 2</a>
                <a class="dropdown-item" href="#">Service 3</a>
            </div>
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Service 4 </a>
            <!-- bloc menu déroulant -->
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Service4_1</a>
                <a class="dropdown-item" href="#">Service4_2</a>
                <a class="dropdown-item" href="#">Service4_3</a>
            </div>
        </li>
        <li><a href=" ">Historique</a></li>
        <li><a href=" ">Contact</a></li>
    </ul>
</div><!-- /.navbar-collapse -->

merci d'avance pour votre aide

Invité · 20/01/2020, 16h07

Bonjour,

N.B. Quand tu cites Bootstrap, il faut préciser la version.

Bootstrap 4 Responsive Dropdown Multi Submenu

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

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
/* --------------------- */
/* SPECIAL : ROTATION des flèches */
.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);
}
/* --------------------- */

Code jQuery :

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
// Bootstrap 4 Responsive Dropdown Multi Submenu
$(function(){
  $('.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;
  });
});

**zugolin** · 20/01/2020, 19h28

Merci jreaux62 !

j'utilise donc la version 3.3.6 de bootstrap.

Je vais essayer de comprendre la manipe dans mon code avec celui que tu m'as donné.

A voir ... a suivre....

**zugolin** · 20/01/2020, 23h18

bon, y'a pas moyen ...
a chaque fois que je trouve une autre version que la mienne, je n'arrive pas a l'adapter et a chaque fois que je veux modifier le mien, ça cloche quelque part...
je ne vais pas changer le site pour passer en bootsrap 4.

Invité · 21/01/2020, 00h35

Bootstrap 3 Secondary Dropdown Menu

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
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                     <li><a href="#">Menu Item</a></li>
                     <li><a href="#">Menu Item</a></li>
                     <li class="dropdown-submenu">
                         <a tabindex="-1" href="#" class="dropdown-submenu-toggle">Second Dropdown <b class="caret"></b></a>
                         <ul class="dropdown-menu">
                             <li><a href="#">Sub-Menu Item</a></li>
                             <li><a href="#">Sub-Menu Item</a></li>
                             <li><a href="#">Sub-Menu Item</a></li>
                         </ul>
                     </li>
                     <li><a href="#">Menu Item</a></li>
                     <li><a href="#">Menu Item</a></li>
                 </ul>
             </li>
         </ul>
     </div><!-- /.navbar-collapse -->
  </div><!-- /container -->
</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
/* Bootstrap 3 - NEW 2nd-Level Dropdown CSS START */
.dropdown-submenu{position: relative;}
.dropdown-submenu .caret{-webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.dropdown-submenu > .dropdown-menu {top:0; left:100%; margin-top:-6px; margin-left:-1px;}
.dropdown-submenu.open > a:after{border-left-color:#fff;}
.dropdown-submenu.open > .dropdown-menu, .dropdown-submenu.open > .dropdown-menu {display: block;}
.dropdown-submenu .dropdown-menu{margin-bottom: 8px;}
.navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color: #f6f6f6;}
.navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#333;}
.navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{padding-left: 30px;}
@media screen and (min-width:992px){
    .dropdown-submenu .dropdown-menu{margin-bottom: 2px;}
    .navbar .navbar-nav .open .dropdown-submenu .dropdown-menu > li > a{padding-left: 25px;}
    .navbar-default .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#fff;}
    .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-submenu ul{background-color:#fff;}
}
/* NEW 2nd-Level Dropdown CSS END */

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
11
// Bootstrap 3 - Make Dropdown Submenus possible
$('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function(e){
    $('.dropdown-submenu ul').removeAttr('style');
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});
// Clear Submenu Dropdowns on hidden event
$('#bs-navbar-collapse-1').on('hidden.bs.dropdown', function () {
  	$('.navbar-nav .dropdown-submenu ul.dropdown-menu').removeAttr('style');
});

**zugolin** · 21/01/2020, 01h12

merci encore, mais decidement....
ce lien me fait des bugs
apparemment, les versions bootstrap 3 semblent pas top niveau sous menu
j'essaie de passer en version 4, mais ... humm...va falloir revoir tout le site et ça .... pas top !!!

Invité · 21/01/2020, 10h02

Bonjour,

c'est à toi d'adapter le code HTML de ton menu à celui que je t'ai proposé dans mon message précédent (et qui est fonctionnel en Bootstrap 3).
Vérifie la structure et la syntaxe (noms des classes,...)

Si je me réfère à la structure qui fonctionne, on obtient pour ton menu :

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
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="#">Réalisations</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Matériel <span class="caret"></span></a>
                <ul class="dropdown-menu">
                     <li><a href="#">Service 1</a></li>
                     <li><a href="#">Service 2</a></li>
                     <li><a href="#">Service 3</a></li>
                     <li class="dropdown-submenu">
                         <a tabindex="-1" href="#" class="dropdown-submenu-toggle">Service 4 <b class="caret"></b></a>
                         <ul class="dropdown-menu">
                             <li><a href="#">Service4_1</a></li>
                             <li><a href="#">Service4_2</a></li>
                             <li><a href="#">Service4_3</a></li>
                         </ul>
                     </li>
                 </ul>
             </li>
            <li><a href="#">Historique</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
     </div><!-- /.navbar-collapse -->
  </div><!-- /container -->
</nav>

**zugolin** · 21/01/2020, 10h44

Bonjour,
je viens de réussir a adapter ton code, version bootstrap4.

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

quelques problemes de mise en ligne ,tous les menus les uns en dessous des autres, maintenant, c'est ok.
reste plus que quelques mises en pages et ça va le faire.

Merci à toi !!

[BootStrap=3.3.6] Mettre un 2éme sous menu dans le menu

CSS

Discussions similaires

Partager

Partager