Home > Web Front-end > CSS Tutorial > How to Create Multilevel Dropdowns in Bootstrap 4?

How to Create Multilevel Dropdowns in Bootstrap 4?

DDD
Release: 2024-12-17 14:54:14
Original
882 people have browsed it

How to Create Multilevel Dropdowns in Bootstrap 4?

Multilevel Dropdown Navigation with Bootstrap 4

Creating multilevel dropdowns in Bootstrap 4 can be achieved with minimal CSS and JavaScript modifications. Here's how you can do it:

1. HTML Structure

Ensure that your navigation contains nested

and
    elements as follows:

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      ...
      <div class="collapse navbar-collapse">
    Copy after login

    2. CSS Styling

    Add the following CSS to your stylesheet:

    .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;
    }
    Copy after login

    3. JavaScript

    Finally, add the following 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;
    });
    Copy after login

    Demonstration

    This approach enables you to create complex multilevel dropdowns seamlessly integrated into your Bootstrap 4 navigation. It ensures that only one sub-menu is open at a time, preventing overlaps or nesting conflicts.

    The above is the detailed content of How to Create Multilevel Dropdowns in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template