Building a drop-right menu with Bootstrap within a dropdown menu - a step-by-step guide

I added a drop-down link to the site's navigation bar, but I'm trying to make one of the drop-down items a dropright link within another drop-down menu in the navigation bar. How can I achieve this? I tried using the code below, but the second drop-down menu is not appearing. What seems to be the issue?

<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>
htmlcssbootstrap-4

Answer №1

Here are some insights that could help you with the implementation.

One issue is that the dropright link behaves like other links in the main dropdown menu. This is the reason it disappears when clicked. To address this, you need to use jQuery separately 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS: Troubles with Element Widths

I'm dealing with a list item that contains an image, like so: <ul> <li> <img></img> </li> </ul> The image is not filling the entire width of the list item. Is there a way to make the list item shr ...

csswidth

The tag 'bootstrap4_form' was found instead of 'endblock'. It seems like you may have forgotten to register or load this tag

I am having trouble with a Django bootstrap form. I keep getting this error message: TemplateSyntaxError at /account/login/ Invalid block tag on line 14: 'bootstrap4_form', expected 'endblock'. Have you remembered to register or load t ...

bootstrap-4django-forms

Is the .html page cached and accessible offline if not included in the service-worker.js file?

During the development of my PWA, I encountered an unexpected behavior with caching. I included a test .html page for testing purposes that was not supposed to be cached in the sw.js folder. Additionally, I added some external links for testing. However, w ...

javascripthtmlbrowser-cacheservice-workerprogressive-web-apps

Reformat an input number by substituting commas with periods

Here's the code I'm working with: <input type="number" tabindex="3" placeholder="Item Price" step="0.01" min="0.10" max="999.99"> An example value inside this input is 1,95. I need to replace the comma with a dot. Can this be done using ...

jqueryhtmlformsformat

Are error messages in Bootstrap/Django lacking the color red?

I decided to experiment with messages in my Django application. Everything seemed to be working fine with all message types except the error messages not displaying in red. https://i.sstatic.net/0MJFw.png My code is quite simple. views.py from django.c ...

djangobootstrap-4

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

javascripthtmlcsspdfgoogle-docs

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results? In Firefox, it shows as "10% 10px ...

javascriptjquerycss

In Chrome, the `Jquery $('input[name=""]').change(function will not be triggered unless there is an unhandled error following it

Here is a script that I've created to make certain inputs dependent on the selection of a radio button. The 'parent' input in this case is determined by the radio button choice. Upon document load, the script initially hides parent divs of ...

javascriptjqueryhtmlonchange

Unlocking the Mysterious Realm of HTML

I recently stumbled upon a mysterious combination of HTML attributes: <div vanisheffect="true" blinkcolor="red" fadeopacity="0.8"> Have you ever encountered something like this? And more importantly, does it have any impact on specific browsers? Is ...

htmlbrowsercss

interactive navigation menu with countdown feature

Looking to create an HTML/jQuery dropdown menu, but encountering a problem. The goal is for the div to slide down when the mouse hovers over the "games" navigation button and only disappear after 5 seconds of the mouse being out, not instantly. Here's ...

javascriptjqueryhtmlmenunavigation

"Activate the mat-checkbox based on the outcome of a certain process

I'm working with a mat-checkbox that triggers a mat-dialog when clicked. If the user clicks "confirm" in the dialog, I want the checkbox to be checked. If they click "cancel", I want it to remain unchecked. How can I achieve this? Below is the method ...

htmlangulartypescriptcheckboxangular-material

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

I have a webpage and I would like to zoom its body when it loads using jQuery. However, the CSS zoom feature is not working in Mozilla Firefox. This is what I currently am using: $("body").css("zoom", "1.05"); It worked in Chrome, Opera, and Edge, but un ...

javascriptjqueryhtmlcss

Implementing dynamic styling with Alpine JS when hovering

I am working with 2 color pickers, one for background and one for text. These are connected to the styles of a button <button :style="`background-color: ${bg_colour}; color: ${text_colour};`">TEST BUTTON</button> Everything is funct ...

cssalpine.js

I am looking to modify the anchor link and image source using JQuery based on the specific div ID

Looking to update the link of an anchor and source of an image inside this div when clicking on the FR button. I need help figuring out how to do this with JQuery. Here's the code: <div id="my_id"> <a href="wwww.google.com&qu ...

htmljquery

Show a message notifying the user of an incorrect password input

Hey there, currently I have a script set up which logs into live.com in this manner: WebBrowser1.Document.GetElementById("login").SetAttribute("value", txtUsername.Text) WebBrowser1.Document.GetElementById("passwd").SetAttribute("value", txtPass ...

htmlvb.netauthenticationcredentialsaccount

Placing a freshly created item into a designated array while ensuring it is positioned at Index Value [0] rather than at [arr.length-1]

I understand that it is usually recommended to add new objects at the end of an existing array without a name. However, I am interested in exploring a more complex scenario in order to learn. Specifically, I would like to add a new object at index [0] inst ...

phphtmlarraysjson

Switch to display only when selected

When I click on the details link, it will show all information. However, what I actually want is for it to toggle only the specific detail that I clicked on. Check out this example fiddle Here is the JavaScript code: $('.listt ul').hide(); $( ...

javascriptjqueryhtml

Guide on creating a toggle effect for a div with querySelector and addEventListener

I utilized the email and password divs provided by Bootstrap. The CSS for the id dropdownlogin includes display: none; in this post, I hope that I have shared adequate information. <script> document.addEventListener('DOMContentLoaded', ...

javascripthtmlcss

Switch images when hovering

I currently have two dropdown menus called NEW and SHOP. When I hover over the New Menu 1, it should display the corresponding image. Similarly, when hovering over New Menu 2, the related image should be shown in a div with the ".menu-viewer" class. Whil ...

jquerycss

Is it possible to include a class in a 'label' element?

Forgive me if this is a simple question, but I'm curious - is it possible to add a class directly to a 'label' tag without needing to enclose it in a 'span' tag for styling? As I delve into "CSS: The Missing Manual," the book instr ...

cssclasslabelformsstyling