One of the main elements of the whole site was the navigation methods which would be used through the whole site as the design incorporated a burger menu design, another element of which I had never developed before and wanted to add to the design, allowing for the site to responsive and work on any device. As I had never worked on a burger menu before, a pure CSS burger menu was the desired option as it has been taking me a long time to learn and understand how to apply JavaScript, it might be easier to work on the burger menu using CSS.

To begin the development of the burger menu a large amount of research was put into how to create burger menus, not only the animation of the different lines but the animation of the navigation options coming across the screen. To understand this sites called sitepoint and sevenspark were used to underline the elements which needed to be included into the CSS of the burger menu, along with the layout of what the HTML should look like. Whilst researching into burger menus a pin on codePen was come accross, showing a burger menu which had been developed using only CSS. The code from this pin was taken into a brackets folder to look at the different elements and change them around to create a style which I was looking for. After looking through the code, the menu was changed from the left hand side to the right, along with changing the opacity, colours and options through the menu. The other elements which were changed on the menu were the font which has been used and finally the size of the menu pop up. Changing the size of the menu was the most challenging part of this section of development as I was having troubles defining which part of the code would change where the menu came out to and then which section took the menu away, but after much editing, the element the sizes were changed to allow for the menu to span across the whole of the screen.

After the burger menu had been created in a separate file, the code was then taken into the actual file of the website to see how it would work on the site. To begin with not all of the elements worked as some of the code which was already on the style sheet was clashing with the code which had been used on the navigation. To overcome this, all the variable names which had been used throughout the burger menu were changed and the code which was affecting the menu had their variable names changed as well, allowing for the menu to work alongside the other elements of the page. The final issue which was found with the navigation menu was that some of the elements on the page, including some images and the contact form were overlapping the menu as the user scrolled down the page, which was a massive issue. After researching into this, it was learnt that a z-index could be used to place content in front of other content, allowing for the navigation to be on a separate layer almost to all of the other elements on the page.

 

Overall the development of the burger menu has improved my skills within CSS and CSS animations along with connecting elements between HTML and CSS to develop separate moving objects which overlap others.

Bibliography:

How To Create a Menu Icon. 2019. How To Create a Menu Icon. [ONLINE] Available at: https://www.w3schools.com/howto/howto_css_menu_icon.asp. [Accessed 12 April 2019]

Jonathan Suh. 2019. Hamburgers by Jonathan Suh. [ONLINE] Available at: https://jonsuh.com/hamburgers/. [Accessed 12 April 2019]

Jelena Jovanovic. Pure CSS Sidebar Toggle Menu. [ONLINE] Available at: https://codepen.io/plavookac/pen/qomrMw. [Accessed 12 April 2019]

SevenSpark. 2019. Diagnosis: z-index (submenu hidden behind content) – UberMenu Troubleshooter Diagnosis. [ONLINE] Available at: https://sevenspark.com/diagnosis/z-index-submenu-hidden-behind-content. [Accessed 12 April 2019]

The SitePoint Forums. 2019. How Do I Bring The Dropdown Menu In Front Of Other Graphic? – HTML & CSS – The SitePoint Forums. [ONLINE] Available at: https://www.sitepoint.com/community/t/how-do-i-bring-the-dropdown-menu-in-front-of-other-graphic/5780. [Accessed 12 April 2019]