Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Expanding menu in fixed height container

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #42909

    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.

    #125598
    Paulie_D
    Member

    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.

    #125602
    Paulie_D
    Member

    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?

    #125613
    sloveland
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.