Hamburger Collections

Resource 1: fullPage.js

Álvaro Trigo's tech blog on fullPage.js contains the article, "10+ Hamburger Menu Examples[CSS Only]" written by Luke Embrey. This article goes over what a hamburger menu is, what it is used for, different styles of menu icons (kebabs, hot dogs, chocolate, etc.), and a list of 11 different kinds of hamburger menus with included HTML and CSS code. Each style contains a responsive display that allows a user to see each animation, a link to Codepen that allows editing of the code to see how it will display on a web page with a user's own content, and a brief description of each animation and what makes it a good design. #5 on the list is a collection of 12 different hamburger styles with different animations.

Resource 2: Jonsuh.com

Web Developer Jonathan Suh's page "Tasty CSS-animated hamburgers" contains 17 unique hamburger menu styles with different themes, ranging from 3D spinning animations to "boring" transitions with no animation. Each theme is displayed in its own colored tile, and beneath the tiles is a detailed guide on hamburger usage, customization, accessibility guidelines, and browser support.

Resource 3: Slider Revolution

Dirk Gavor authored an article for the Resources section of the Slider Revolution blog titled, "Cool CSS Hamburger Menu Icons and Their Animations" which contains hundreds of different hamburger menu styles from different users. Many require Javascript or other additional coding for their functionality, but they each contain a Codepen window which displays the full code required and a link allowing the user to edit the code and add their own content to see how it will display if used on their own web page. There is also a list of FAQ's related to hamburger menus and their usage at the bottom of the article which contains useful information and links to other articles about CSS coding.

Summary

All the resources listed above contain many different kinds of hamburger menus as well as useful breakdowns of how to make them work, where to use them, and the benefits of using them. There are near endless ways to animate a hamburger menu in ways that are visually appealing and unique. Some menu styles were as simple as turning the hamburger into an X with no transition, and some had very smooth and intricate animation. These are only a few of the many similar pages I encountered which also compile hamburger styles and coding tips for each. Browsing any of these pages are guaranteed to provide inspiration and new knowledge of how to design aesthetically pleasing menus.