Grow your CSS skills. Land your dream job.

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

  • # February 6, 2013 at 10:18 am

    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

    # February 7, 2013 at 12:11 am

    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.

    # February 7, 2013 at 5:02 am

    @yeeyang, Thanks!

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

    # April 4, 2013 at 8:30 pm

    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…

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".