submenus to n+ levels with scrollbar issues

Bootstrap Studio Help
1

Hi All,

I'm using bootstrap 3.3.7. I have written a menu that will give submenus to nth level using the following basic pattern:

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
            <div class="navbar-collapse collapse">
                <ul class='nav navbar-nav'>
                    <li class="dropdown">
                        <a href="#">
                                    <span></span> CREATE REPORT
                                    <span></span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-submenu not-visible"><a href="#"><span>Choose a type of report.</span><i class="fa fa-close pull-right icon-dropdown"></i></a></li>
                                </ul>
                                <ul class="dropdown-menu main scrollable-menu" role="menu">
                                    <li class="dropdown-submenu level-1" >
                                        <a href="#"> Profiles <img src="images/right_chevron.png" /></a>
                                        <ul class="dropdown-menu level-2 scrollable-menu">
                                            <li role="menuitem"><a href="#">Profile 1</a></li>
                                            <li role="menuitem"><a href="#">Profile 2</a></li>
                                            <li role="menuitem"><a href="#">Profile 3</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu">
                                        <a href="#">Analysing<img src="images/right_chevron.png" /></a>
                                        <ul class="dropdown-menu level-2 scrollable-menu" role="menu">
                                            <li><a href="">one</a></li>
                                            <li><a href="">two</a></li>
                                            <li><a href="">Three</a></li>
                                        </ul>
                                    </li>
                             </ul>                        
                    </li>
                </ul>
            </div>
   </div>
 </nav>

without the scrollable-menu class attached this all works, but because some of my menus are large I am attempting to add scroll bard with

.scrollable-menu {
height: auto;
max-height: 300px;
overflow-x: hidden;
   }

It correctly places the scrollbar on my first level menu, but when I hover over the first item with a submenu it tries to show the secondlevel wihin the first level view, as opposed to outside when scrolling isn't attached. how can show the second level correctly.

2

You need to take a good look at your code, it's not formatted correctly for dropdowns. you can get a good idea by checking out menus like Smartmenu https://codecanyon.net/item/smartmenu-responsive-jquery-mega-menu/19501519?s_rank=2 or even the Yamm3 Menu http://geedmo.github.io/yamm3/#

3

Jo, My code above isn't complete it's too big to paste. As mentioned it works fine using the base bootstrap classes of dropdown-menu etc. and it displays to nth levels. the issue I have is that some of the levels are large. so to reduce the length I attempt to restrict the height by adding my scrollable-menu class. when I do this. the submenus then fail to show alongside its parent, but instead attempts to show inside the parent container. I don't have the luxury of being able to use other templates. My remit is to use bootstrap only.

4

I see, well not much I or anyone else can probably do to help without seeing the code fully. A link to the page would probably be the best way to get more help on this.

I know what you mean on the big menus though. I have one client that needed a really really deep menu when we first started, can't tell you how much money and time I wasted trying to find a menu that would allow at least 4 or more levels deep. Wasn't an easy task that much I can say. When I finally found one (MenuMaker) we got it all set up, spent weeks on this alone, and then .... they decided to condense it to a single dropdown level! Needless to say I charged them extra for the wasted time lol.

Anyways you can see the menu in it's glory, which does allow for an almost infinite number of drop-downs here: https://presbyteryofsa.org/ It's no longer lots of levels, but the code is there that may help you dig up what might be giving you issues.

5

Hi Jo,

Thanks for trying to help. I found this interesting article and demo https://css-tricks.com/popping-hidden-overflow/ which gives a flavour of what I'm trying to achieve. This has set me off on what I think is the right track to implement this behaviour with bootstrap. I have now managed to achieve first dropdown with scrolling then on selection of an item a second level menu with scrollbar beside the first. I need to go down to at least 5 levels. This is a proof of concept with the intention of putting placehoders on the page then building the menu's from the backend and injecting them onto the page since the menu items may be available on one day but not another.

6

Nice, I like that concept and will look further into that myself too as I usually end up with a few clients a year that have multi level dropdowns and the default Bootstrap nav doesn't allow for it that I'm aware of. Thanks for the link share. :)