Grow your CSS skills. Land your dream job.

Expanding menu in fixed height container

  • # February 21, 2013 at 4:43 pm

    Greetings, I have created a list navagation with hidden subitems. On hover the subitems appear and cause the rest of the list to expand. The only issue is there are elements under the list that jump up and down as the list is navagated. Is it possible to place the list in a static sized box to give it a designated piece of realestate?

    Example: http://abesgrandplan.blogspot.com

    List exists on the right hand sidebar.

    # February 21, 2013 at 5:13 pm

    Code transferred to Codepen

    http://codepen.io/anon/pen/KjbmJ

    It was a mess….

    You can’t use IDs (#name) more than once…you have to use classes (.)

    The original code had multiple unclosed list items…I’ve tidied everything up as much as I can.

    # February 21, 2013 at 5:56 pm

    Basically, the answer is no. You would have to work out the maximum height of your menu and use that as a guide to size the container.

    It’s a function of the menu that it grows in height. Perhaps another menu style?

    # February 21, 2013 at 7:21 pm

    I forked the above code and came up with a quick and easy jQuery solution that may help. I did jquery because it was, as I said, quick and easy, but this effect could be done with CSS3 transitions too (or close enough).

    http://codepen.io/sloveland/pen/JdrvH

    Hope it helps. Feel free to fork it yourself and play around; you could use icons in place of the plus symbol, make the icon change, make the menu slide back up with a conditional statement… etc. I recommend playing with it, and post it back up if you get stuck. =)

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