The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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?


    List exists on the right hand sidebar.

    # February 21, 2013 at 5:13 pm

    Code transferred to Codepen

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

    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.

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed