CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdrop-down-menusubmenu
Greg Fielding
Greg Fielding

Reputation: 557

Dropdown Submenus that Slide Up When Open

I am building a long menu that also contains submenus. Here's the link: http://ws2.5giants.com/ - shrink your browser down below 768 pixels to see the mobile view. In the dropdown menu, click "Sample" and you can the current menu behavior.

I am trying to copy the behavior on http://www.porsche.com/usa/ where when you click on a sub-menu item, that item scrolls to the top of the menu as the submenu expands. For example, shrink your window, open the window, and click "Models".

Does anyone know how they did this?

Thanks!

Upvotes: 0

Views: 665

Answers (2)

Gregg Duncan
Gregg Duncan

Reputation: 2725

Khargoosh is correct. When you click a menu item it collapses all the other menu items then scrolls to the top of the clicked item.

Try this:

Editied to show how to scroll back to the top when the dropdown is clicked to close it. 

$(document).ready(function (){ 
    $('.dropdown-submenu a').click(function() {
        if($(this).parent().find('ul.dropdown-menu').is(':visible'))
            $('html, body').animate({ scrollTop: $('navbar-nav').offset().top }, 600);
        }else{
            $('html, body').animate({ scrollTop: $(this).offset().top }, 600);
    }); 
});

Give the credit to Steve from this post: jQuery scroll to element

Upvotes: 2

khargoosh
khargoosh

Reputation: 1520

when you click on a sub-menu item, that item scrolls to the top of the menu > as the submenu expands

I don't think this actually describes what is happening on the linked website. To me, it looks like the inactive submenus are collapsed, the clicked submenu is expanded, and the windows scrolls down to the first entry.

You can use (for example) jQuery .scrollTop() to get the vertical scrollbar position for the clicked element and to then set the vertical scrollbar position to that element.

Upvotes: 0

Related Questions