SalientAnimal Posted January 23, 2014 Share Posted January 23, 2014 Hi All, I have just finished putting together an accordion style menu and I have having a problem getting my sub-menu to display properly. The problem is that the height of each sub-menu differs based on the amount of sub menu items, but the code I am currently using uses a fixed height statement. How can I get the height to auto adjust based on the number of sub-menu items. My current setting is: .accordion li:target > .sub-menu { height: 132px; } Quote Link to comment Share on other sites More sharing options...
SalientAnimal Posted January 23, 2014 Author Share Posted January 23, 2014 (edited) Found the solution... Just changed the px height to 100%. However, now the animated slide effect of the menu is not working. And that was the only change I made. Edited January 23, 2014 by SalientAnimal Quote Link to comment Share on other sites More sharing options...
adam_bray Posted January 24, 2014 Share Posted January 24, 2014 Instead of animating the height which is fluid, why not animate the max-height? Start off and set the max height to 0, then change it to 1000px so it can expand depending on the content. If you get stuck then I've done a tutorial on this - http://www.adam-bray.com/blog/92/Animated+CSS+Accordion/ Quote Link to comment Share on other sites More sharing options...
SalientAnimal Posted January 27, 2014 Author Share Posted January 27, 2014 Thanks for this, I am going to take a look at your tutorial. I'm always looking to learn more where I can. Seems my site's menus are giving me loads of problems. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.