Creating a Hamburger Menu with pure CSS  
Tags: html, css, css3
Published: 2019-11-08 16:27:16

---
title: Creating a Hamburger Menu with pure CSS  
published: True
description: Article
tags: HTML5, CSS, CSS3
---
 ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2xgy47u105l19na4rrp1.jpeg)
In Web Development, animating and adding interactivity on certain events creates a much better user interaction if done correctly. JavaScript is a full-fledged dynamic programming language that when applied to an HTML document, can provide that dynamic interactivity on websites. However, some interactivity can be done without the use of JavaScript. In this post, we’re going to create a "Hamburger Menu" with just HTML and CSS. 
Lets kick it off with crafting a simple HTML file.
The page have two sections, the <code>menu</code> and the <code>showcase</code>. In the menu section, I created a <code>div</code> element with a class <code>menu-wrap</code>, in which I have an <code>input</code> element with type <code>checkbox</code> and class <code>.toggler</code> which is to add specific styles to the checked state, a <code>div</code> with a class <code>hamburger</code>, an empty <code>div</code> and another <code>div</code> with class <code>menu</code>. The last <code>div</code> element with class <code>menu</code> have an unordered list which is the content of the hamburger menu (Home, About, Services, and Contact).
I have two CSS files for this project, <code>style.css</code> and <code>menu.css</code>.
<code>Style.css</code> is just basic styling on the HTML. It add styling for the content of the <code>header</code> with classes; <code>.showcase</code>, <code>.container</code>, <code>.showcase-inner</code>, and <code>.btn</code>. There's a <code>:before</code> pseudo element on the <code>.showcase</code> class that gives the shade of the background-color in <code>.showcase</code> to the image in the pseudo element.
In my <code>menu.css</code> I set the <code>menu-wrap</code> to a fixed position because I want the menu to stay at the top even when scrolling the page. The class toggler have an opacity of zero so that the element <code>input</code> with type <code>checkbox</code> doesn't show the checkbox on the page. In creating the horizontal bars, I started with creating the middle bar i.e On the class hamburger, I used the empty <code>div</code> element to create the middle horizontal bar. Using the same <code>.hamburger</code> class and the empty <code>div</code> I use the <code>:before</code> and <code>:after</code> pseudo selector. Top position of the <code>:after</code> selector will be positive value of the value used before so it make the three horizontal, bars.
The <code>:before</code> and <code>:after</code> pseudo selector act as the 1st and the 3rd bar respectively, and the empty <code>div</code> acts as the 2nd bar. I’ve given all these elements ease-in-out transition so that all the transformation will be smoothly. The 1st bar and the 3rd bar transform (rotate) in 90 degrees to create an X on click.
 Since .toggler is a checkedbox, the visibility property on the <code>.menu-wrap</code> class and <code>.toggler: checked</code> will be "visible" i.e the visibility from the <code>.menu-wrap</code> and <code>.menu</code> which was hidden initially is now visible in  <code>.toggler:checked</code>. 
 The first <code>div</code> in the class <code>menu</code> will have the transform (scale) property and the second <code>div</code> with the opacity property so that when the bars are clicked (checked), it display the menu (the unordered list). 
 You can get the files from this GitHub repo:
 https://github.com/iamdejean/Hamburger-Menu
Thanks for the read.