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

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

CSS

Vue hybride

Discussions similaires

Partager

Partager