height: auto;

max-height

:checked

Having menus that gracefully adapt to the size of your screen can be troublesome. Inspired by the collapsible menu of Bootstrap , here is a pure CSS implementation using the checkbox trick to toggle visibility.The example attached features a smaller menu when the screen is narrower than 900px and is collapsed then narrower than 650px. I encourage you to test whatever suits you best.On collapse toggle, the height and visibility are animated for a smooth transition.is not directly supported, so we instead animate theproperty. The downside is that you need to specify the max-height your menu will ever have. If you set this too high, you will experience a slight graphic glitch.The toggle handle is also inspired from Bootstrap, but with minimal markup.* theselector is not supported prior to IE9, you may use a polyfill like http://selectivizr.com/ if you need to.Happy coding !To test it, resize your browser.