Comment créer des menus déroulants à plusieurs niveaux dans Bootstrap 4 ?-tutoriel CSS-php.cn

Comment créer des menus déroulants à plusieurs niveaux dans Bootstrap 4 ?

Linda Hamilton

Libérer： 2024-12-20 03:36:13

original

105 Les gens l'ont consulté

How to Create Multilevel Dropdown Menus in Bootstrap 4?

Menus déroulants à plusieurs niveaux dans Bootstrap 4

La création d'une liste déroulante à plusieurs niveaux dans Bootstrap 4 n'est pas aussi simple qu'avec les versions précédentes. Pour y parvenir, vous pouvez utiliser une combinaison de CSS et JavaScript. La solution suivante introduit la classe de sous-menu déroulant pour les éléments de sous-menu :

CSS :

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

Copier après la connexion

JavaScript :

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

Copier après la connexion

HTML :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">

Copier après la connexion

Ceci La solution permet des menus déroulants à plusieurs niveaux avec un design épuré et réactif. Il fonctionne de manière transparente avec les styles Bootstrap 4 par défaut et ajoute des fonctionnalités permettant de basculer entre les sous-menus.

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!