Pure CSS Hamburger Menu – In 5 minutes.

Pure CSS Hamburger Menu – In 5 minutes.

Summary: In this video, you’ll learn how to build a CSS hamburger menu.

Step 1 – HTML Boiler Plate

Before we begin make sure you have a basic HTML boiler plate

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
      <h1>Hello World!</h1>
        <script src="basic.js" async defer>
           
        </script>
    </body>
</html>

Step 2 – HTML <input> and <label> tags

Inside your HTML file create an input with type of checkbox and label tags like so:

<input id="menu" type="checkbox">
<label for="menu"></label>

Now What is connecting those 2 ?
Well that’s

  • ID attribute in the input field with the value of menu
  • The for attribute in the label tag

That’s it for the HTML. Now let’s move on to the CSS part.


Step 3 – Adding CSS

Let’s style the body tags first

/*
* CSS File ?
 */
 body {
     background: #636e72;
     height: 100%;
 }

You can check the checkbox it’s still visible. Now let’s hide it.


Step 4 – Hiding the HTML input checkbox

Let’s select the input field with type of checkbox by its ID.
id=”menu” but in CSS file and set visibility to hidden like this:

#menu {
     visibility: hidden;
 }

Now check it and its hidden.


The rest of the code

 /*hamburger*/
 label,
 label::before,
 label::after {
     position: absolute;
     width: 100px;
     height: 15px;
     border-radius: 5px;
     background: #fff;  
     transition: 0.6s;
     -webkit-transition: 0.6s; 
 }
/* label */
 label  {
     cursor: pointer;
     top: 50%;
     left: 50%;
     margin-left: -50%;
     margin-right: -7.5;
 }
/* style ::before and ::after */
 label::before {
     content: "";
     transform: translateY(-30px);
 }
 label::after {
    content: "";
    transform: translateY(30px);
}

/* animate when checked */
#menu:checked + label {
    width: 0px;
}
#menu:checked + label::before {
    transform: rotate(45deg) translate(0px);
}
#menu:checked + label::after {
    transform: rotate(-45deg) translate(0px);
}

Leave a Reply

Your email address will not be published. Required fields are marked *