CSS Sliding Sidenav

CSS-Sliding-Sidenav.markdown

CSS Sliding Sidenav

CSS sliding sidenav that pushes all of the content to the right. JS used to toggle class. Click anywhere outside of the sidenav menu to close it. Based on Bourbon Refills Sliding Menu. Works in IE11 - IE7.

A Pen by David Bullock on CodePen.

License.

index.haml

.outer-wrapper
  .inner-wrapper
    .container
      .navbar
        %h2
          Navbar
        %button.btn-navbar
          Open Sidenav
        .sidenav
          %h3
            Sidenav
          %p
            Click anywhere outide of the sidenav to close it.
    .sidenav-background

script.js

$(document).ready(function(){
  $('.btn-navbar,.sidenav-background').on('click touchstart',function (e) {
    $('.inner-wrapper,.sidenav,.sidenav-background,.btn-navbar').toggleClass('active');
    e.preventDefault();
  });
});

style.scss

@import "bourbon";
$transition-sidenav: all 0.25s linear;
$sidenav-width: 50%; // change this to suit viewport

* {
  box-sizing: border-box;
  &:before,
  &:after {
    box-sizing: border-box;
  }
}

body {
  margin: 0;
  font-family: $helvetica;
  font-size: 14px;
}

.container {
  width: 100%;
  max-width: 940px;
  margin-right: auto;
  margin-left: auto;
}

.navbar {
  border: 1px solid #ccc;
  padding: 10px;
  background: #f1f1f1;
}

.sidenav {
  width: $sidenav-width !important;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 9999;
  color: #f1f1f1;
  background: gray;
  transition: $transition-sidenav;
  padding: 10px;
}

.outer-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.inner-wrapper {
  position: relative;
  width: 100%;
  left: 0;
  transition: $transition-sidenav;
}

.btn-navbar {
  background-color: #ccc;
  padding: 12px 18px;
  border: none;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  font-size: 14px;

  &:hover {
    background-color: gray;
    color: white;
  }
}

// Sidenav active
.inner-wrapper.active {
  left: $sidenav-width;
  min-height: 1500px;
}

.sidenav.active {
  z-index: 9999;
  left: -$sidenav-width;
}

.btn-navbar.active {
  background-color: red;
  color: white;
}

.sidenav-background {
  z-index: 9998;
  @include position(fixed, 0px 0px 0px 0px);
  visibility: hidden;
  opacity: 0;
  background: black;
  &.active {
    opacity: 0.4;
    visibility: visible;
  }
}