[Bootstrap] Sous menu

Version imprimable

28/07/2018, 11h41
paterson

2 pièce(s) jointe(s)

[Bootstrap] Sous menu

Bonjour ,

Actuellement , j'ai un menu sur mon site via Bootstrap 4.1.1 , celui ci est pas mal mais j'aimerais ajouter des sous menus . C'est pourquoi j'ai cherché dans la doc de bootstrap , mais je n'ai pas trouvé mon bonheur.

Actuellement , j'utilise un menu basique: https://getbootstrap.com/docs/4.0/components/navbar/

Pièce jointe 399935

Et j'aimerais faire quelque chose comme cela : https://www.w3schools.com/bootstrap/..._css&stacked=h

Pièce jointe 399939

Malheureusement comme ceci est du 3.3 et je mon site utilise bootstrap 4.1 , j'aimerais savoir si vous avez une idée pour avoir plusieurs niveau

Merci d'avance
Paterson
28/07/2018, 15h29
NoSmoking

Bonjour,
il te faut intégrer popper.min.js qui est utilisé par la version 4.

Plus d'info dans la documentation.

Bonsoir, c'est vrai ce que No Smoking dit. À défaut tu utilise le code CSS spécial pour les sous-menus bootstrap suivant :

Code:

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
.dropdown-submenu{ position:relative;} 
.dropdown-submenu>.dropdown-menu{top:0;
left:100%; marin-top:-6px; margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px;
}
 
 
.dropdown-submenu:hover>.dropdown-menu{
display:block;
}
 
.dropdown-submenu>a:after{
display:block; content:"" ;
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
 
 
.dropdown-submenu:hover>a:after{
border-left-color:#ffffff;
}
 
.dropdown-submenu.pull-left{
float:none;
}
 
.dropdown-submenu.pullleft>.dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px 6px;
-moz-border-radius: 6px 0 6px 6px 6px;
border-radius: 6px 0 6px 6px 6px;
}

Cordialement.