04 Research and Documentation - Hamburger Collections

Location 1

The first website I found to learn more about navigational hamburgers was the blog on alvarotrigo.com: https://alvarotrigo.com/blog/hamburger-menu-css/. In this first website I visited I learned more about what the pros and cons are of hamburger menu, alongside some examples with code. Since the hamburger menu is very common, I did not think much about the cons. But the navigational menu itself could spark curiosity and interaction. Perhaps a visitor comes to the New Leaf Sculpture website looking for wood carvings, but then from the navigational menu also sees we offer stone carvings (which can be more lucrative) due to a "Stone Artwork" name for a navigational menu item. It really makes you think about what visitors will see first on a mobile view! It was also neat to see how varied hamburger menus can be!

Location 2

The second website I found to learn more about navigational hamburgers was “10 Awesome CSS Hamburger Menus” on: https://dev.to/webdeasy/10-awesome-css-hamburger-menus-1iho. I really enjoyed seeing the examples with code on this page! One of them inspired me to try one of the navigational menus I created with the two lines disappearing into one line. I wanted to get others to work, but could not seem to translate their code into something that would work without knowing more about CSS and JavaScript.

Location 3

The third website I found to learn more about navigational hamburgers was from sliderrevolution.com: https://www.sliderrevolution.com/resources/css-hamburger-menu/. Again, there were hamburgers on this website I would love to try and utilize, but did not understand the code well enough to try and implement it into my assignment. I thought the hamburgers that used squiggly, snake-like lines to move around was neat! I also like how another one forms a circle around the "X".

Summary of Documentation

There were not any specific examples with provided code, but I found the article on justinmind.com provided even more information regarding the pros and cons of the hamburger menu: https://www.justinmind.com/ui-design/hamburger-menu. It was interesting to learn even more about the history of how it came to be. This article also showed popular websites and how they use the hamburger icon. I never thought too deeply about this little icon called the hamburger and how much creativity and code can go into it! Since one website I know I will be recreating as I learn more from this program is our business website. Since we usually have quite the variety of people use our website (ones that love technology and ones that don't), I'll be keeping in mind how the navigation and landing page will look, not just on desktop, but on mobile. Often when we are at festivals, people quick pull up the website on their phone, so I'd like to invest more time in the mobile version of our website - including most likely adding a hamburger menu! I also appreciated how in this module we discussed the importance of adding accessibility into the navigation as well. I look forward to learning even more about the JavaScript code provided in the future!