Hamburger Collections

Resource 1 - W3 Schools

The W3 Schools site offers some great information on the basics of constructing a hamburger menu. The example linked above uses some basic JavaScript, which seemed even more straightforward than using a checkbox option. Though obviously, JavaScript isn't something we've learned yet! But it was interesting to play around with the test code on that page to see what changes would do to it.

This page also had a different version of a hamburger icon with pop down (or over) menu that used a bit of JavaScript. In these the hamburger did not change though.

Resource 2 - CSS Tricks

The CSS Tricks site often has a neat tip to share on a coding hack. I found the site linked above that used CSS with SVG animation to create a fun effect when clicked. I love that this technique is a bit more fluid and not just about rotating lines. It definitely adds some interest to the icon.

I also loved this menu that was made using the transform: scale() option. The hambuger lines grow to a large size to display the menu in them. This is an innovative way to add in a menu that is very unique compard to normal drop down hamburger menus. It was also really interesting to look at their JavaScript for this and see how they handled the opening of the menu and adding code for the close task.

Resource 3 - Codepen.io

Codepen is one of my favorite sites to learn new techniques in web design. Their site offers a place for other coders to share their designs and tricks to create fun things with HTML, CSS, & JavaScript. One thing I love about this site is the ability to play with the code and change it to see how it affects the end product. This is a great way to learn more about how to work with CSS and what all it can do. I did a search for "hamburger menu" on this site and found some amazing things! I found that a lot of them implemented JavaScript and animations to create some unique designs. Here are a few of my favorites:

Summary

After looking at all of these sites and ideas for hamburger menus, I can see that you are truly only limited by your imagination in creating a unique hamburger menu for a site. Learning new skills like animations and JavaScript can really open up the options on what you can create. But I also found that even within CSS, you can do some really cool things that enhance a page, keep it on brand, and create a fun, user-friendly experience for everyone - whether on a desktop or a mobile device. I can't wait to play with more of these options to create some unique user menus for sites I build.