Topic: How to create a Nested Dropdown

ramyakinkor free asked 10 years ago


How to create a nested dropdown

Michal Szymanski staff answered 7 years ago


Tushar Raj free answered 7 years ago


This is a workaround. I am surprised that such a big library doesn't provide a basic feature. I have dropped the plan to use this library any more.


Atul Dhone free answered 10 years ago


Yes Yes!! Thank you so so so muchhhhhhh!!!!!!!!!! That's i wont actually............... Really thank you again from my heart :)))))))))))))))

I created Nested Dropdown with MDB4. Is this what you want? html:
<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Basic dropdown</button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>

        <div class="dropdown-submenu">
            <a class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown" href="#">Something else here</a>

            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-submenu">
                    <a class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown" href="#">Something else here</a>

                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" type="button" data-toggle="dropdown" href="#">Something else here</a>

                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
CSS:
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu .dropdown-menu {
    top:0;
    left:100%;
}
JS:
$('.dropdown-submenu .dropdown-toggle').on("click", function(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).next('.dropdown-menu').toggle();
});

Arch free commented 8 years ago

can not show my side. Can u pls have an idea how to make like mega menu for three level with bootstrap packages?

Atul Dhone free answered 10 years ago


Thanks you for your reply! But this code is not working in mdbootstrap, it is only working in bootsrap 3 This is mdbootstrap Navigation link, there is no code for multilevel navigation http://mdbootstrap.com/components/navbar/

Hi, Atul! Check the website that I attached in my previous answer. That should help you

Atul Dhone free answered 10 years ago


How to create a multilevel Nested Dropdown in md bootstrap? please guide..

Check this code. It's easy to change it to MDB4

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags