Comment puis-je créer des listes déroulantes à plusieurs niveaux dans la navigation Bootstrap 4 ?

Bootstrap 4 : Libérer des listes déroulantes à plusieurs niveaux dans les navigations

Lorsque vous recherchez un moyen transparent d'incorporer des listes déroulantes à plusieurs niveaux dans Bootstrap 4, ne cherchez pas plus loin. Les extraits CSS et JavaScript suivants vous guideront tout au long du processus.

CSS pour les sous-menus déroulants

Ce CSS cible la création de styles de sous-menus déroulants supplémentaires.

.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;
}

JavaScript pour basculer le sous-menu

Ce JavaScript gère le basculement de la visibilité des sous-menus déroulants.

$('.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');

  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });

  return false;
});

Exemple HTML

Incorporant CSS et JavaScript, cet exemple HTML montre une liste déroulante fonctionnelle à trois niveaux.

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="http://example.com">

Avec ces étapes, vous pouvez facilement créer et personnaliser des listes déroulantes à plusieurs niveaux qui améliorent la navigation et l'interaction des utilisateurs dans Bootstrap. 4.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!