How to make Pure CSS Hamburger Menu

In CSS Tutorial, Navigation Last updated Mar 21, 2017
Pure CSS Hamburger Menu

Did you find Pure CSS Hamburger Menu yet? If not then here we have it for you. You may find a lot of tutorials related to hamburger menu but these are using Jquery or Javascript? We are going to build hamburger menu by using CSS only. You don’t need to rely on javascript anymore in this case. Due to CSS3, we have a lot of property and elements which allow building something which was only possible with javascript before.

The Hamburger Menu are mostly used in websites and web apps whether you like or not, they are very popular and recognizable UI action button. When user click on hamburger icon, it open up a fullscreen overlay which show a stand web site navigation.

Many other effects can be used with Hamburger Menu like off-canvas, fold-out, slide out Menu , Fly-Out and few others but here we will take a look fullscreen overlay one.

Pure CSS Hamburger Menu Markup

Ok, let’s get started. We don’t need to write a lot of HTML code; it’s straightforward and easy. We have only a few lines of code. First of all, we have a checkbox which will allow us to perform a toggle function. By default, the checkbox will be hidden as we don’t want to show and we will use the label element to design and style the hamburger Icons.

 <input id="toggle" type="checkbox"/> <label class="hamburger" for="toggle"> <div class="top"></div> <div class="meat"></div> <div class="bottom"></div> </label> 

Next, we will define the navigation and we have define the div with class name nav. We have place the inner div called nav-wrapper and then we will have the set of links defined.

 <div class="nav"> <div class="nav-wrapper"> <nav><a href="#">Home</a><a href="#">About</a><a href="#">Blog</a><a href="#">Contact</a></nav> </div> </div> 

Pure CSS Hamburger Menu Styling

There are few another basic styling which we are not going to mention here, but you will find the demo and download source code.

Here will take a look main styles. Ok, so first, we will position the hamburger to set it on the top right of the page so that we will use the position absolute with the width and height as our size need for hamburger icon.

 .hamburger { position: absolute; width: 50px; height: 45px; top: 40px; right: 30px; z-index: 5; } 

The divs inside a label require to make rectangular lines, and we will style them using the background CSS property.

 .hamburger div { position: relative; width: 50px; height: 5px; border-radius: 3px; background-color: #aa00ff; margin-top: 7px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #toggle { display: none; } 

When the user clicks on hamburger icon then we need to change it’s designed to close icon and to do that, we need to set the rotated value to -45deg, so it will rotate it and make it look like a close icon.

 #toggle:checked + .hamburger .top { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: 22.5px; } #toggle:checked + .hamburger .meat { -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -5px; } #toggle:checked + .hamburger .bottom { -webkit-transform: scale(0); transform: scale(0); } #toggle:checked + .hamburger + .nav { top: 0; } 

We need to fix the navigation, so it covers all the page.

 nav { position: fixed; width: 100%; height: 100%; background-color: #9b59b6; top: -100%; left: 0; right: 0; bottom: 0; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } 

finally, we will style the navigation menu links

 nav { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } nav a { margin-top: 1.25em; color: #eee; opacity: 0; text-decoration: none; font-size: 2.3em; letter-spacing: 3px; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } 

That’s it. Please check out the demo for working example as we didn’t explain everything here. You can also download the source code and make customization as you want.

Leave a Reply

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