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. height: auto; is not directly supported, so we instead animate the max-height property. 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.
* the :checked selector 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.
Live demo on CodePen.io
No comments:
Post a Comment