Cool animated hamburger menu buttons in css

If you are smart, don’t use text symbols as close buttons. You know, those pesky screen readers read the symbols out loud and that can ruin the user experience. So don’t use an ‘X’ character as a close button. In this blog post I’ll show a nice css animation trick that you can use to make a layout more snappy and to counter screen-reader problems. Also, with voice controlled speakers getting more popular it is good to look at your source code like a crawler would. Tell the machine what is going on. Or just do that with schema. A possibility as well.

But to cut to the meat of this post, here is a nice animation you can use (and modify) to fancy up that boring hamburger menu. Did I mention this is a screen reader friendly alternative?

As shown above another advantage of not using characters but elements like the span is that with CSS3 the animation options are endless. When done properly the user experience on your site can improve dramatically.

For example make your hamburger button point to the place where the navigation pop up or change into a cross as a hint that you can close it by pushing the button. Making moves and changes in interface fluid helps the user transition from one screen to another.

An animation (if used properly) can be used to let the user know what the next step is in an eye catchy way. The thing is to be creative with what you got. Just a couple of spans can get you a long way. Just like the example below on how to create a close (or report) comment button with a snappy and animation.

How I go about creating something like this from scratch is thinking in elements and squares. These element can be shaped with rounded corners, rotated and coloured. The positioning is done by adding position: relative; to the parent object and then position: absolute; to the child objects so their position is related to the parent object. 

See the Pen Animated Hamburger into Arrow by the-beta-core (@the-beta-core) on CodePen.default

After I’m happy with the first position I go and create the :hover position for those same element. When I have too many I can stack them or make them opaque by adding opacity: 0; to the element. When the hover positions are defined I just add the simple attribute [animation] to all the elements that are moved. This to the starting element as well as the :hover element. Et voila. A nice animated icon is made. 

Pro tip: sometimes you can use the :before and :after tags instead of spans within the object. This means less HTML. Too bad a hamburger nav needs three mouldable elements to be recognisable.

There is one thing to keep in mind. Not every css code will do good on every browser. If you want to check what the cross-browser compatibility of a certain css attribute is, just throw it in here and you’ll know it quickly. https://caniuse.com/

Leave a Reply

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