Watch carefully – at department stores, restaurants, arenas, on the bus – you’ll notice something. Something alarming. Every single freaking person is on a smart phone. Yes, everyone. Jess got a text from her Grandma yesterday. Her Grandma! If your website isn’t responsive, easy, and quick to use on a mobile phone that all of these people have, you’re doing something wrong.
I’ve used a few different ways of creating off-canvas navigations, making the website feel more like an app where the navigation is hidden “behind” the current viewport, and the active screen is animated, sliding out of the way. I like this, I do, but it’s cumbersome – it often requires modernizer, lots of jQuery window calculations and event binding, CSS animations, and lots more. Typically it calls for building a second navigation, which defeats the “responsive” idea. Adding on, it’s no longer the norm of popular apps to have off-canvas sliders, it’s not a good direction.
Things are changing, getting simpler, and cleaner. Myself, I’m on a minimal binge – in both design and code, so I’ve written a new, much smaller and simpler responsive navigation:
The HTML
The CSS
Copy/paste this and it looks like crap, so lets focus on the functionality of it here.
The desktop and mobile nav are differentiated by our @media query.
Normal desktop looks like a normal nav, when we’re less than 960px wide, we’re display a label as a navigation drawer, which when clicked, alters the input‘s :checked pseudo element and determines the visibility / drawer status of nav.
It doesn’t get much more simpler than this for a responsive navigation.