Mobile-Friendly Sidebar In Few Minutes

Slide Animation, Swipe, and SPA-friendly

Sidebar is a way of page navigation, especially convenient for mobile SPA applications, which ensure that certain page elements are always in view.

HTML

• Blocker is used to covering the full screen in a half-transparent mode in mobile devices

<div class="sidebar">
  <div class="blocker"></div>
  <div class="content">
    Sidebar Content
  </div>
</div>

CSS

.sidebar { /* it's a mobile sidebar, blocker and content */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* to cover the whole screen */
  height: 100vh;
  padding: 0;  /* to override the default padding */
  background: rgba(0,0,0, .5); /* half transparent background */
  display: none;
  z-index: 99999; /* to be on top of any other elements */
}
.sidebar.visible {
  display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker { 
  position: absolute;
  width: 100%;
  height: 100%;
}
/* user content */
.sidebar .content {
  position: absolute;
  top: 0;
  left: 0;
  background: #FFF;
  height: 100%;
  width: 250px;
  left: -50%;   /* will be animated to left: 0, by animation */
  animation: slide 0.5s forwards;
}
@keyframes slide {
  100% { left: 0; }
}