Maison > interface Web > tutoriel CSS > Comment créer des listes déroulantes à plusieurs niveaux dans Bootstrap 4 ?

Comment créer des listes déroulantes à plusieurs niveaux dans Bootstrap 4 ?

DDD
Libérer: 2024-12-17 14:54:14
original
878 Les gens l'ont consulté

How to Create Multilevel Dropdowns in Bootstrap 4?

Navigation déroulante à plusieurs niveaux avec Bootstrap 4

La création de listes déroulantes à plusieurs niveaux dans Bootstrap 4 peut être réalisée avec un minimum de modifications CSS et JavaScript. Voici comment procéder :

1. Structure HTML

Assurez-vous que votre navigation contient des éléments

et
    éléments comme suit :

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      ...
      <div class="collapse navbar-collapse">
    Copier après la connexion

    2. Style CSS

    Ajoutez le CSS suivant à votre feuille de style :

    .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

    3. JavaScript

    Enfin, ajoutez le JavaScript suivant :

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

    Démonstration

    Cette approche vous permet de créer des listes déroulantes multiniveaux complexes parfaitement intégrées à votre navigation Bootstrap 4. Il garantit qu'un seul sous-menu est ouvert à la fois, évitant ainsi les chevauchements ou les conflits d'imbrication.

    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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal