I've been trying to make a horizontal slider that works as follows...
1) User clicks on menu item
2) Sub-menu slides out to the right.
3) When the user clicks on the menu item again, the menu slides back.
As you can see, if you click on 'Services', the entire menu is pushed down before bouncing back up on completion of the slide-out process.
I want it to be smooth so that it all the text is on one line.
I've tried it with mouseover and mouseout events and i solved the bouncing issue with setting same height to .flyout and nav li...changing display: inline-block; to float: right; on .flyout doesn't work in my case...
Hi,
I've been trying to make a horizontal slider that works as follows... 1) User clicks on menu item 2) Sub-menu slides out to the right. 3) When the user clicks on the menu item again, the menu slides back.
My jsfiddle
As you can see, if you click on 'Services', the entire menu is pushed down before bouncing back up on completion of the slide-out process. I want it to be smooth so that it all the text is on one line.
What am I doing wrong?
Thanks
Max
looks fine to me in chrome. saw the issue on ff.
I changed your:
to
and that seemed to do the trick.
@yeeyang, Thanks!
That's fixed the problem. Thanks for taking the time to look at it & work through it, appreciate it.
I've tried it with mouseover and mouseout events and i solved the bouncing issue with setting same height to .flyout and nav li...changing display: inline-block; to float: right; on .flyout doesn't work in my case...