#html

CSS Menu/Nav Hamburger Animation

CSS Menu/Nav Hamburger Animation

While finally buying a Keurig today, I (oddly) decided to do my research on my phone instead of desktop, and also (oddly) decided to go to Keurig.ca instead of my normal stomping ground of Amazon.ca. While there, I was distracted in a nerdy daze by the animation they added to their hamburger navigation, immediatly stoped everything and went to code it myself.

A very polished touch to a now very common element:

https://gist.github.com/davidsword/3ca3347ae8cf763a3a7bf89270ff340f

I used CSS3 var for easy line weight changing. Playing around with EASE also gives the button much more life. (It took two cups of coffee to write and refine that).

Much More Modern & Micro Mobile Menu

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

https://gist.github.com/davidsword/5158dca143293ef72ddb4b2d279cde30

The CSS

https://gist.github.com/davidsword/94ba84eea2854445f3843b5673ad17ca

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.