0

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!

Greg Fielding
  • 421
  • 2
  • 7
  • 19

2 Answers2

2

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

Community
  • 1
  • 1
Gregg Duncan
  • 2,457
  • 1
  • 9
  • 18
  • This is getting closer... I added the code and it's almost working. The difference it is only working when you click on the 3rd level deep of the menu. For example: "Awesome Bike 1". – Greg Fielding Sep 08 '15 at 23:12
  • The list item "Sample" needs to scroll up and it also has the class "dropdown-submenu". – Greg Fielding Sep 08 '15 at 23:13
  • That code snippet is registering a click event. In order to do that you need to wrap it in the $(document).ready(function(){ ... click event code here .. } or the shortcut $(function(){ ... click event code here ... }. – Gregg Duncan Sep 09 '15 at 15:57
  • Greg, like this? '$(document).ready(function (){ $('.dropdown-submenu').click(function() { $('html, body').animate({ scrollTop: $(this).offset().top }, 600); }); });' – Greg Fielding Sep 09 '15 at 17:00
  • Yes. The jquery method $(document).ready(function(){ ... }); runs as soon as the DOM is fully loaded. This assures all objects matching the selector of your event listeners are loaded before assigning the event listener to them. If the assignment of the event listener runs before your $('.dropdown-submenu') is part of the DOM the click event doesn't get assigned to it. – Gregg Duncan Sep 09 '15 at 17:10
  • Weird. It's working, but still on the wrong link. Any ideas how I can get "Sample" to scroll up when clicked? – Greg Fielding Sep 09 '15 at 17:42
  • See if this works. Instead of adding the click event to the dropdown-submenu, which is the
  • . Add it to the anchor tag.change it to - $(document).ready(function (){ $('.dropdown-submenu a').click(function() { $('html, body').animate({ scrollTop: $(this).offset().top }, 600); }); }); - You have a lot of click events going on when these menu options are clicked if any of these returns a false it will stop the rest from working. It's best to combine all these click event listeners into one.
    • – Gregg Duncan Sep 09 '15 at 18:09
  • Gregg thank you so much. That works great. '$(document).ready(function (){ $('.dropdown-submenu a').click(function() { $('html, body').animate({ scrollTop: $(this).offset().top }, 600); }); });' – Greg Fielding Sep 11 '15 at 18:17
  • Any idea how I could reverse it? Meaning, when a "child" menu item is closed, then the menu scrolls back to the parent location? – Greg Fielding Sep 11 '15 at 18:18
  • Thanks again @GreggDuncan... that code didn't work. I tried substituting some different classes, but no luck. I ran it through js link and there were a couple of errors. http://www.javascriptlint.com/online_lint.php – Greg Fielding Sep 14 '15 at 01:03