Glitch in DropDown Menu - Please help

[littlebirdy]

OK I am a newbie JS or Jquery developer. I built this DropDown menu
https://dl.dropboxusercontent.com/u/12360312/dd.html

But in mobile view the 2nd level drop down menu gives a jerk or glitch while opening downwards. Its a Bootstrap style menu.

Can anybody help me to solve it.

Thank you.

PS: I don’t understand whether its a CSS or JS issue. So I am creating this thread in the JS section.

[PaulOB]

Hi,

You’ve set the nav to 30px high in your css so you only get animation to 30px and then it just jumps the rest because the element is much taller. You seem to have set a height to cover up the fact that you didn’t contain your floats. If you contain your floats then you don;t need the height and the animation will be smoother.

e.g.

/*1st level*/
nav {
	background-color:#008ed0;
	/*height:30px;*/
}
nav:after{/* contain floats*/
	content:"";
	display:table;
	clear:both;
}

I generally avoid the jquery animation routines as they are always slow and jumpy on mobiles. I prefer to use velocity.js for animation which is just as easy to use and will work with jquery. It’s pretty easy to add in and the difference is immediately noticable on mobile.

Another point worth mentioning is that mobiles will never get to use your mobile menu unless you add in the viewport meta tag. Without this tag in place mobiles will just get the larger desktop view scaled very small and will not action the media queries at the correct width.

[littlebirdy]

Thank you Thank you Thank you Paul

Glitch gone. And Thanks for the Mobile viewport point too. In real websites I use it.

Now just need to fig. out Velocity. OK Paul, do I need to change any of my JQuery code? In Velocity it says “replace all instances of jQuery’s $.animate() with $.velocity().”

In my code I have not used any JQuery Animate() method. Have I ?

Thank you again

[PaulOB]

@littlebirdy

In my code I have not used any JQuery Animate() method. Have I ?

You’ve used the slideDown and slideUp jquery routines and velocity has its own version of those.

$element.velocity("slideDown", { duration: 1500 })
$element.velocity("slideUp", {  duration: 1500 });

[littlebirdy]

OK Thank you