Ce type de comportement peut-être utilisé dans le cadre d’une adaptation pour supports mobiles d’un site desktop.
Code pour un comportement standard
Code standard de Bootstrap, comme vu dans la doc officielle. Le sous menu s’ouvre par-dessus le contenu. La partie .navbar-header et la partie .collapse sont solidaires (imbriquées dans la même <nav class="navbar" />).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<nav class="navbar"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <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="#">Dropdown Menu</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li>...</li> </ul> </div> </nav> |
Code pour un sous-menu qui va pousser le contenu
Le sous menu pousse le contenu vers le bas. On désolidarise la partie .navbar-header de la partie .collapse.
Attention : l’attribut data-target=".js-navbar-collapse" de <button class="navbar-toggle" /> doit avoir le même libellé que la classe sur le <div class="collapse" />.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<nav class="navbar"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <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="#">Dropdown Menu</a> </div> </nav> <nav class="navbar"> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li>...</li> </ul> </div> </nav> |