Slide Out Navigation Bar only using HTML/CSS (no JS)

Author: 

Russel Rogers

Description: 

Slide out from the left navigation.

Kind:

CSS, HTML

CSS:

.page-content {
  position: relative;
  z-index: 0;
  -webkit-transition: all 0.15s ease-out 0;
     -moz-transition: all 0.15s ease-out 0;
          transition: all 0.15s ease-out 0;
  background: #eee;
}

.toggle {
  text-decoration: none;
  font-size: 30px;
  color: black;
  -webkit-transition: all 0.15s ease-out 0;
     -moz-transition: all 0.15s ease-out 0;
          transition: all 0.15s ease-out 0;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1;
  cursor: pointer;
  
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: -190px;
  -webkit-transition: all 0.15s ease-out 0;
     -moz-transition: all 0.15s ease-out 0;
          transition: all 0.15s ease-out 0;
  width: 120px;
  padding: 30px;
  background: #333;
  z-index: 0;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  color: rgba(255, 255, 255, 0.8);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  margin-bottom: 16px;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

.sidebar li:hover {
  color: rgba(255, 255, 255, 1);
}

#sidebartoggler {
  display: none;
}

  #sidebartoggler:checked + .page-wrap .sidebar {
    left: 0px; }

  #sidebartoggler:checked + .page-wrap .toggle {
    left: 200px; }

  #sidebartoggler:checked + .page-wrap .page-content {
    padding-left: 180px; }

/*Basic video link styling*/
iframe {
  padding: 50px 50px;
}

HTML:

  ☰
  
Place all webpage content into .page-content class
  

  
  Just video link, you don't need this 
    
  
  


  

    

      
Nav 1
      
Nav 2
      
Nav 3
      
Nav 4
      
Nav 5
    
  
  

URL:

• https://codepen.io/rrogerss/pen/dPqbMj