Get a free trial // 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


    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]( “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?



    # 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; }


    .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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed