CODEWITHSUNDEEP
htmlcssbootstrap-4
Zahra Ghanbari
Zahra Ghanbari

Reputation: 57

How to create a drop-right menu using bootstrap on a drop-down menu

I've put a drop-down link on the site's NavBar. I want one of the dropdown items to be a different dropright link. In fact, looking to form a dropright menu in another drop-down menu in the site NavBar. How could you handle this job? I used the following code but the second drop-down menu is not formed. What is the problem? 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
 <ul class="navbar-nav">
<li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Dropdown link
                </a>
                <div class="dropdown-menu">
                    <span class="dropdown-header" href="#">header</span>
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <span class="dropdown-header">header</span>
                    <div class="dropdown dropright">
                        <button class="btn btn-light dropdown-toggle" data-toggle="dropdown">
                            Dropright button
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Link 1</a>
                            <a class="dropdown-item" href="#">Link 2</a>
                            <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                    </div>

                </div>

            </li>
</ul>
</nav>

Upvotes: 1

Views: 6665

Answers (1)

Dialex
Dialex

Reputation: 439

This may give you some ideas on how to implement it.

One of the problems is that the dropright link acts like any other links of the main dropdown menu. This is why it hides once you click on it. You have to manage this separately with jQuery to prevent the main dropdown from closing.

$(document).ready(function() {
  $('.dropright button').on("click", function(e) {
    e.stopPropagation();
    e.preventDefault();

    if (!$(this).next('div').hasClass('show')) {
      $(this).next('div').addClass('show');
    } else {
      $(this).next('div').removeClass('show');
    }

  });
});
.dropright {
  position: relative;
}

.dropright .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Dropdown link</a>
      <div class="dropdown-menu">
        <span class="dropdown-header" href="#">header</span>
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <span class="dropdown-header">header</span>
        <div class="dropright">
          <button class="btn btn-light dropdown-toggle" data-toggle="dropdown">Dropright button</button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

Upvotes: 4

Related Questions