As user experience dominates most of our web design discussions, it’s important that we take a closer look at this thing we call the “hamburger” menu.
In case you missed it, I’ve touched on the prowess of the hamburger menu before. I’ve discussed the best ways to declutter a website with a number of minimizing tricks and tools. I’ve also dipped into navigation menu best practices, which included reasoning why a hamburger menu might be right for your WordPress website’s design.
Now that we’ve already established how powerful a design element the hamburger menu can be for websites, let’s focus on what more you can do to enhance its presence through animation.
Hamburger menus help us achieve a variety of goals:
- Sleek and minimal design
- Emphasis on more important content or navigational elements
- Simplified communication between the website and your visitor
- Consistency between mobile and desktop design
In addition, the hamburger menu has become a well-recognized symbol to many users. This now makes your job as a designer/developer easier. Tuck your navigation away behind the menu symbol and then spend your creative energies on everything surrounding the navigation – including the animation of the menu itself.
Animation – no matter how small it is – helps bring visitors’ focus to a menu that may be simple by its very nature, but still worthy of attention. And by securing their attention on the navigation, you can more effectively drive visitors through your conversion funnel.
Think that animation might not be right for your hamburger menu or maybe you’re just unsure of how it can make a difference? Check out these examples of slick hamburger animations in action:
- MoreSleep
- DesignCouch
- The St. Louis Browns
- Masi Tupungato
- Threadslike
- Zaarly Employee Handbook
- Rokkan
- Maecia
- DeModern
- Newton Running
Note: Since this post was originally published, some of the sites shown below have updated their website design and may no longer use hamburger menus or the site itself no longer exists. Refer to the animated images for the hamburger menu examples mentioned in the content.
1. MoreSleep
For anyone who likes the idea of using the hamburger menu but is a little nervous about deviating from the standard top-aligned navigation many users are familiar with, check this one out at MoreSleep. The navigation stays neatly tucked away inside the hamburger symbol. When someone clicks on it, however, that standard navigation layout drops down into place, giving this site a cool little animation while sticking to more traditional styling.
2. Design Couch
This hamburger menu design plays around with traditional navigational layouts. The animation on this one at Design Couch is simple and clean as we watch the hamburger button change to an “X” while the navigation falls down into place. With another click of the button, the navigation hides away and the “X” goes back to the three lines that tell us where the menu items are.
3. The St. Louis Browns
The St. Louis Browns website hamburger menu blends in seamlessly with the design.
This baseball-themed website for The St. Louis Browns puts a creative spin on the hamburger menu, swapping out the standard three-lined symbol for a baseball alongside the word “MENU.” The animation for this one, is in and of itself, fairly simple: with a click of the baseball, a semi-opaque overlay appears over the screen and the navigation menu drops down vertically.
4. Masi Tupungato
The Masi Tupungato website features a classic turn on hamburger menu design.
The Masi Tupungato vineyard’s website keeps the animation simple, clean, and engaging. Hover over the hamburger menu symbol and watch the icon spin around. Click on the symbol and watch it turn into an “X.” Hover over each of the page options and watch as accent lines appear beside them.
5. Threadslike
In an argument for using animation and colors that align well with branding, Threadslike does just that with their animated hamburger menu. The animation and resulting fullscreen menu are similar to what the Masi Tupungato vineyard did, but it’s important to note how well the striking white-on-black overlay meshes with this fashion site’s overall styling.
6. Zaarly Employee Handbook
The Zaarly employee handbook is pretty cool. The entire website is dedicated to introducing employees to Zaarly in a unique and creative way. Their use of an animated and colorful hamburger menu only adds to the allure of learning more about this company’s culture.
7. Rokkan
Since the Rokkan website already makes great use of animation, it only makes sense that they’d include a little of it in their hamburger menu. Unlike many examples you’ll find of hamburger menus, Rokkan puts a unique spin not necessarily on the animation piece of the navigation, but in how they present the page and hover options.
8. Maecia
The Maecia website’s hamburger menu features a click grid.
French digital agency Maecia’s slide-in hamburger menu is a thing of beauty. It gets a number of things right. For starters, it’s responsive. Secondly, the animation is simple and mirrors the other types of animations you’ll find on the site. Lastly, rather than rely solely on small movements to indicate a page hover, they’ve also made great use of color which I expect is great for increasing engagement.
9. DeModern
The DeModern website has a cool asymmetrically designed hamburger menu.
Here is another example of a European agency, DeModern, putting their own branded twist on the hamburger menu. In addition to creating what at first seems to be a simple yet stylized pull-out menu, the page transition animations mirror that same stylization, creating a very elegant and well-thought out design.
10. Newton Running
Since the focus of the Newton Running website is on running shoes, it makes sense that they’d want to have strong movement in their navigation to reflect that underlying theme. This particular hamburger menu creates an almost completely different web page for their navigation, and it works beautifully.
Wrapping Up
As we recently saw in tests conducted around logo placement, any changes that deviate from the expected and potentially interrupt the user experience can have a detrimental effect on your website.
In each of the cases above, however, the hamburger menus still reside within the top part of the website where a user would expect to find them. Having said that, it’s still important to A/B split test to make sure that a hamburger menu – much less an animated one – is right for your website. Some studies suggest that hamburger menus can be just as effective as a standard navigation so long as they’re paired with the word “MENU”.
Hamburger menus may be a great way to clean up your site and get creative with directing traffic through your conversion funnel, but not at the expense of your user’s experience. Again, it’s up to you to discover what works best for your users, so put in the time to find that sweet spot between menu location, icon, wording, and animation.
Editor’s Note: This post has been updated for accuracy and relevancy. [Originally Published: March 2017 / Revised: February 2022]
Tags:
