Pure CSS Slide Out Menu with Hamburger Button

Pure CSS Slide Out Menu with Hamburger Button

by

Often in websites, you might have seen on the navbar that we have a menu icon which slides out from right, left, top or bottom on clicking it. In this tutorial, we are going to create some similar menu to create. We will create a pure CSS slide out menu with a hamburger button. The main content will be pushed and slid out the menu on click on the hamburger button. The button will have a toggle effect.

We will be using, HTML checkbox to toggle the side menu by checking if the box is checked or unchecked. With the help of CSS properties, we will make the menu functional without involving JavaScript. Let’s get started with the code.

HTML structure:

This structure has four parts. The input checkbox, label element, content container and the side navigation. Inside the label, we will place the hamburger button. We can use the font-awesome icon for the menu button. For that we have to link the font awesome icon library in the head section of the HTML file.

Make sure you follow the same order as given in the code below to make the application work.

Demo

See the Pen Untitled by Arpit Mittal (@codingiseasy) on CodePen.

HTML

<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon"><i class="fa fa-bars"></i></label>
<div class="content-container">
 <div class="site-title">
   <h1>Coding Is Easy</h1>
 </div>
 <div class="content">
   <p>Your content goes here...</p>
 </div>
</div>
<div class="slideout-sidebar">
 <ul>
   <li>Home</li>
   <li>Tutorial</li>
   <li>About Us</li>
   <li>Blog</li>
   <li>Contact</li>
 </ul>
</div>

Inside the list tags, you can always go and add anchor tags in order to navigate to other pages.

JS/jQuery (Menu Icon – Font Awesome)

Make sure to link font awesome library in the section.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

CSS

.content-container {
 position: relative;
 z-index: 0;
 padding: 20px;
 max-width: 700px;
 margin: 0 auto;
 overflow: hidden;
 transition: all 300ms ease-in-out;
}
.site-title {
 text-align: center;
 border-bottom: 1px solid #111111;
 margin-bottom: 24px;
}
.site-title h1 {
 font-weight: 300;
 text-transform: uppercase;
 letter-spacing: 10px;
}
img {
 width: 100%;
}
.content p {
 line-height: 1.6em;
 margin-bottom: 24px;
}
.slideout-sidebar {
 position: fixed;
 top: 0;
 left: -250px;
 z-index: 0;
 width: 220px;
 height: 100%;
 padding: 20px;
 background-color: #212121;
 transition: all 300ms ease-in-out;
}
.slideout-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
 
.slideout-sidebar ul li {
 cursor: pointer;
 padding: 18px 0;
 border-bottom: 1px solid rgba(244,244,244,0.4);
 color: rgba(244,244,244,0.7);
}
 
.slideout-sidebar ul li:last-child {
 border-bottom: 0;
}
 
.slideout-sidebar ul li:hover {
 color: rgba(244,244,244,1);
}
#menu-toggle {
 display: none;
}
 
.menu-icon {
 position: absolute;
 top: 18px;
 left: 30px;
 font-size: 24px;
 z-index: 1;
 transition: all 300ms ease-in-out;
}
 
 
 
/*-- The Magic --*/
#menu-toggle:checked ~ .slideout-sidebar {
 left: 0px;
}
 
#menu-toggle:checked + .menu-icon {
 left: 210px;
}
 
#menu-toggle:checked ~ .content-container {
 padding-left: 190px;
}
/* -- Media Queries -- */
 
@media (max-width: 991px) {
 
 .content-container {
   max-width: 480px;
 }
 
}
 
@media (max-width: 767px) {
 
 .content-container {
   max-width: 100%;
   margin: 30px auto 0;
 }
#menu-toggle:checked ~ .content-container {
   padding-left: 0;
 }
 
 .slideout-sidebar ul {
   text-align: center;
   max-width: 200px;
   margin: 30px auto 0;
 }
 
 .menu-icon {
   left: 20px
 }
 
 #menu-toggle:checked ~ .slideout-sidebar {
   width: 100%;
 }
 
 #menu-toggle:checked + .menu-icon {
   left: 87%;
   color: #fafafa;
 }
 
 @media screen 
   and (max-width: 736px)
   and (orientation: landscape) {
    
     .slideout-sidebar {
       padding: 0;
     }
    
     .slideout-sidebar ul {
       max-width: 100%;
       margin: 60px auto 0;
     }
    
     .slideout-sidebar ul li {
       display: inline-block;
       border-bottom: 0;
       width: 72px;
       padding: 18px 24px;
       margin: 0 6px 12px;
       color: #ffffff;
       background-color: #777;
     }
 
 }
 
}

Check out the page for yourself in the Code IDE that you have used to create the application.

A good understanding of advanced CSS is needed to write this code. Brush up those parts wherever you get stuck.

Hope the tutorial was useful to you and you enjoyed creating the menu project. Drop a comment if you have any doubt.

Leave a Comment