- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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.
@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…