Pages

Tuesday, November 26, 2013

Responsive menu in pure CSS

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