Craig Rushforth February 2016

bootstrap 3, problems with collapsed menu over slideshow

I have a site in development which is looking Ok, but I have a problem which only occurs with the collapsed menu, and only on the home page.

On the homepage there is a full width slideshow, if i try and navigate to a dropdown item, eg the gallery, the menu closes. It isn't an issue on any other page, and I am finding it difficult to debug.

http://test.forthwebsolutions.com

Answers


Nikhil Nanjappa February 2016

This is a very common Twitter Bootstrap behavior using the data-toggle="dropdown".

To avoid this, the most simplest trick is - attach a click event handler on the internal dropdown menu and simply add event.stopPropagation(). Like so.

$('li.dropdown.inside-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

and obviously for that you need to also add the class that i mentioned above to the internal dropdown menus. For example:

<li class="dropdown inside-dropdown-menu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Galleries <i class="fa fa-angle-down"></i></a>
    <ul class="dropdown-menu open">
        <li><a href="/gallery.php">Image Gallery</a></li>
        <li><a href="/video_gallery.php">Video Gallery</a></li>
    </ul>
</li>

Additional Information : If your curious, there are alternative methods as well if you do not want to use event.stopPropagation() which is mentioned here in this SO thread

Post Status

Asked in February 2016
Viewed 2,580 times
Voted 11
Answered 1 times

Search




Leave an answer