Horizontal slide-out menu using jquery and css, buggy on open….help!

[maxheartless]

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](http://jsfiddle.net/qg68n/7/ “jsfiddle slider”)

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

[yeeyang]

looks fine to me in chrome. saw the issue on ff.

I changed your:

.flyout { display: inline-block; white-space: nowrap; margin-top: 0px; }

to

.flyout { float: right; white-space: nowrap; margin-top: 0px; }

and that seemed to do the trick.

[maxheartless]

@yeeyang, Thanks!

That’s fixed the problem.
Thanks for taking the time to look at it & work through it, appreciate it.

[rusel1989]

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…

[Author]

Posts