Tagnavbar

[Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément

Source Keep multiple collapse open (with button to toggle) – Bootstrap 3.

L’astuce consiste à :

  1. Englober l’ensemble des éléments collapse dans une <div> avec un id="accordion".
  2. Rajouter sur les liens, qui au clic ouvrent les parties cachées, des attributs data-parent="#accordion" (dont la valeur fera référence à celle de l’id de la div englobante) et href="#collapseOne" (dont la valeur sera unique pour chaque lien).
  3. Rajouter un attribut id="collapseOne" unique (dont la valeur fera référence à la valeur de l’attribut href placé sur le lien juste au-dessus).

…et à ajouter un bout de code javaScript supplémentaire (voir plus bas).

[Bootstrap] Navbar et dropdown : un menu déroulant qui pousse le contenu au lieu de s’afficher par dessus.

Ce type de comportement peut-être utilisé dans le cadre d’une adaptation pour supports mobiles d’un site desktop.

bootstrap-dropdown-customisation

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" />).

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" />.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑