← back to WGD home

Hamburger Menus

Resource #1

fullPage.js article

This article includes several examples of CSS hamburger menus. It also shows the code required to create the animations and navigation link layouts. I like this article because it includes a wide variety of creations. It also has both the animations for the actual hamburger and x icon and examples for how to lay out the navigation that appears when it is clicked.

Resource #2

jonsuh.com

I like this article because it provides a wide variety of animations that can be done with 3 simple bars created by span elements. There are 17 different options given on this simple user-friendly site. However, it is not very straightforward about how to create these animations, since I would have to either inspect element or download the source code and look at the css file. Nonetheless, this page gives me inspiration for the different ways I could animate the three bars.

Resource #3

codepen.io

CodePen creators have made many different hamburger menu icons, as well as countless other projects with html, css, and javascript. This specific pen shows four of the same icon animated differently and created with the span element. I like this example because it is very easy to look above and refer to the CSS and HTML code that was used to create these animations. However, it does not give any ideas for how to format the actual navigation that comes when the icon is clicked; it only provides the icons.

Summary

There are countless resources and articles that can provide inspiration for hamburger menus. These menus are a very popular way to style the navigation of a website as an increasing number of website visitors use their phones to search the web.