Hamburger Menus

Hamburger Resource 1

The first site I chose was the Digital Design Journal site at digitaldesignjournal. They showcased about 70 different options from various web developers. A few were fairly basic but a large number of them, although interesting and eye-catching, were above my skill level to try to reproduce, especially since a good number of them utilized Javascript in their coding.

Hamburger Resource 2

The next site I looked at was templatefor at templatefor. This page started with a nice introduction to the usefulness of using CSS to build hamburger menus and the benefits a hamburger menu brings to a website. There were 30 examples given. There was some overlap with the previous site, as some of the same examples were showcased. However, this site did show a few more basic styles than the other site.

Hamburger Resource 3

Looking further, I came upon Simple Web Learning at simpleweblearning. There were only 3 examples given. The first was the most basic, with the next 2 building a little on the basic code. It was definitely not as flashy as the other two sites, but I liked this site because I am at the basic level so I was happy that I recognized the syntax.

Summary

Looking at all the various options was an entertaining rabbit hole to visit. The first two sites had buttons to link to a demo of each of the menus in action and to their source codes. However a lot of the examples used Javascript and animations which seemed pretty involved for me. Also I did not recognize some parts of the code such as the use of "$". I may get to that point at some time in the future, but not yet.

That doesn't mean though that there weren't a few examples which really caught my eye. One was StarWars (StarWars Menu). The parts of the hamburger menu were styled as little light sabers which subtly changed colors when clicked. The drop down menu has a similar style to our class example with vertical bars to the left of the link anchors although each one was a different color and stayed in place. Another one was Atomic Hamburger (Atomic Hamburger Menu). Too cute especially with the little electron going in its orbit. And last but not least, there is Flipping Hamburgers (Flipping Hamburger Menu) which was described as drumsticks flipping through the air.

One thought I did bring away from this was that even though a number of these menus were fun to see and showed the skill and cleverness of the developer, there is something to think about. When designing a home page for a site, it would be good to keep in mind what the particular home page being worked on wants to accomplish. The navigation menu is an important part of a website for the sites usability but there may also be other important content present that might be overshadowed by too fancy a menu, although if it engages an end user and keeps them on the site, that would be a desirable outcome.