CSS only responsive drop-down menu

wf-mobile-screenshotRecently I decided to redesign my father’s copywriting site. I wanted to keep the look of the site, which he liked, but update the design to be responsive. One of the biggest challenges for me when designing any site is working with the site navigation. Styling it for different screen sizes, and implementing drop-down navigation on smaller screens, is a dark art. But I figured now was as good time as any to tackle it head on.

I wanted to keep the solution as simple as possible, and after looking at several solutions, I settled on the solution demo’d here: http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css. This solution uses a checkbox to toggle the navigation on mobile devices as detailed here. Taking the checkbox out of the label puts it on the same plane as the menu button. The CSS changes the display property of the menu from none to block when the checkbox is checked. A pretty cool and simple technique.

If I wanted to take this further, I could probably change the way the menu is hidden from display none to height or max-height of 0. Then I could animate the height or max-height property when the checkbox is checked. And I probably should do something about the text of the Menu button. Right now it says “Show Menu” regardless of whether the menu is actually showing or not. I suppose I could change the text with javascript, but that would kind of defeat the purpose of a CSS-only drop-down menu. Things to ponder for the future…

 

Leave a Reply

Your email address will not be published. Required fields are marked *