Pure CSS Slide Out Menu is navigation out of a drawer that slides and pushes the main content to the right when opened in HTML and pure CSS.

hamburger menu push content, sliding hamburger menu, push menu codepen, sidebar push content, bootstrap left slide menu example, css sidebar navigation menu codepen

How to make use of it:

1. Create a toggle to navigate the tray. In this case, we will be using Font Awesome Iconic Font for the icon.

<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon"><i class="fa fa-bars"></i></label>

2. Create the main content with the list of drawers on the web page.

<div class="content-container">
  Main Content Here
</div>
<div class="slideout-sidebar">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Blog</li>
    <li>Contact</li>
  </ul>
</div>

3. Design the main content and drawer menu.

/* -- Slideout Sidebar -- */
.slideout-sidebar {
  position: fixed;
  top: 0;
  left: -190px;
  z-index: 0;
  width: 150px;
  height: 100%;
  padding: 20px;
  background-color: #212121;
  transition: all 300ms ease-in-out;
}
/* -- Slideout Sidebar -- */
.slideout-sidebar {
  position: fixed;
  top: 0;
  left: -190px;
  z-index: 0;
  width: 150px;
  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);
}

4. Enable the menu toggle icon.

#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;
}

5. CSS to make drawer navigation on the small screen.

@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;
      }
  }
  
}

Sliding Push Navigation Menu, Pure CSS Slide Out Menu Plugin/Github, slide and push menus with css3 transitions

See Demo And Download

Official Website(jameszedd): Click Here

This superior jQuery/javascript plugin is developed by jameszedd. For extra advanced usage, please go to the official website.