Faster Collapsible Menu for Mobile

I have noticed that there is a half second or so delay between when you touch the .navbar-toggle and when the dropdown menu flies out. This short delay might relate to how mobile browsers detect a click(). It seems that binding touchstart() to .navbar-toggle does the trick.

$(document).ready(function(){
$('.navbar-toggle').bind( "touchstart", function(e){
e.preventDefault();
$('.navbar-collapse').collapse('toggle');
});
});

It’s important to note that touchstart() will interfere with mobile scrolling, so if your “hamburger” or .navbar-toggle target is larger than default it might be better to avoid this patch.

Andrew Van Wart

About Andrew Van Wart

One of the Bay Area's original adopters of Responsive Web Design principles (RWD), Andrew is our front end developer responsible for executing and engineering solutions from UI to fully functional responsive web solutions. He is also well versed in visual design and has a passion for making informed, data-driven design decisions.
  • http://www.facebook.com/profile.php?id=100003469666430 Aina

    Nice! I was just about to create my own stuooiln for this, but decided to give google a try to see if I could save myself some time. I’ll I have to do is modify the .click to .hover and maybe add some easing.Thanks man!