Offcanvas Navigation Menu

Offcanvas Navigation Menu

HTML

<div class="container-fluid">
     <div class="row">
       <div class="menuWrapper w-100">
         <button class="trigger">
           <span class="iconBar"></span>
           <span class="iconBar"></span>
           <span class="iconBar"></span>
         </button>

         <div class="menu mt-4 pt-5">
           <div class="menuContainer">
             <ul class="navbar-nav mr-auto p-3">
               <li class="nav-item active">
                 <a class="nav-link" href="#"
                   ><i class="fa fa-home mr-1"></i> Home</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-music mr-1"></i> Music</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-play-circle mr-1"></i> Video</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-comment-alt mr-1"></i> Messages</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-bell mr-1"></i> Notifications</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-cog"></i> Settings</a
                 >
               </li>
               <!--  -->
               <li class="nav-item active">
                 <a class="nav-link" href="#"
                   ><i class="fa fa-home mr-1"></i> Home</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-music mr-1"></i> Music</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-play-circle mr-1"></i> Video</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-comment-alt mr-1"></i> Messages</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-bell mr-1"></i> Notifications</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-cog"></i> Settings</a
                 >
               </li>
               <li class="nav-item active">
                 <a class="nav-link" href="#"
                   ><i class="fa fa-home mr-1"></i> Home</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-music mr-1"></i> Music</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-play-circle mr-1"></i> Video</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-comment-alt mr-1"></i> Messages</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-bell mr-1"></i> Notifications</a
                 >
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="#"
                   ><i class="fas fa-cog"></i> Settings</a
                 >
               </li>
               <!--  -->
             </ul>
           </div>
         </div>
         <div class="siteContainer bg-white">
           <div class="siteWrapper">
             <div class="site">
               <div class="container">
                 <div class="row">
                   <div class="col-md-12">
                     <h1 class="text-center">
                       Offcanvas Navigation Menu 
                     </h1>
                   </div>
                 </div>
                 <!--              -->
                 <div class="row">
                   <div class="col-md-12">
                     <p class="text-justify">
                       Lorem ipsum, dolor sit amet consectetur adipisicing
                       elit. Tempore ratione doloremque explicabo voluptatibus
                       cupiditate rerum suscipit dignissimos voluptatum nobis
                       sed dicta non et velit, cum neque architecto quia quam
                       perspiciatis. Lorem, ipsum dolor sit amet consectetur
                       adipisicing elit. Cupiditate aut perferendis deleniti
                       perspiciatis recusandae laboriosam numquam minima
                       assumenda id eum blanditiis veritatis eveniet incidunt
                       eius, distinctio ipsum, in doloribus totam?
                     </p>
                   </div>
                 </div>
                 <!--              -->
                 <div class="row">
                   <div class="col-md-12">
                     <p class="text-justify">
                       Lorem ipsum, dolor sit amet consectetur adipisicing
                       elit. Tempore ratione doloremque explicabo voluptatibus
                       cupiditate rerum suscipit dignissimos voluptatum nobis
                       sed dicta non et velit, cum neque architecto quia quam
                       perspiciatis. Lorem, ipsum dolor sit amet consectetur
                       adipisicing elit. Cupiditate aut perferendis deleniti
                       perspiciatis recusandae laboriosam numquam minima
                       assumenda id eum blanditiis veritatis eveniet incidunt
                       eius, distinctio ipsum, in doloribus totam?
                     </p>
                   </div>
                 </div>
                 <!--              -->
                 <div class="row">
                   <div class="col-md-12">
                     <p class="text-justify">
                       Lorem ipsum, dolor sit amet consectetur adipisicing
                       elit. Tempore ratione doloremque explicabo voluptatibus
                       cupiditate rerum suscipit dignissimos voluptatum nobis
                       sed dicta non et velit, cum neque architecto quia quam
                       perspiciatis. Lorem, ipsum dolor sit amet consectetur
                       adipisicing elit. Cupiditate aut perferendis deleniti
                       perspiciatis recusandae laboriosam numquam minima
                       assumenda id eum blanditiis veritatis eveniet incidunt
                       eius, distinctio ipsum, in doloribus totam?
                     </p>
                   </div>
                 </div>
                 <!--              -->
                 <div class="row">
                   <div class="col-md-12">
                     <p class="text-justify">
                       Lorem ipsum, dolor sit amet consectetur adipisicing
                       elit. Tempore ratione doloremque explicabo voluptatibus
                       cupiditate rerum suscipit dignissimos voluptatum nobis
                       sed dicta non et velit, cum neque architecto quia quam
                       perspiciatis. Lorem, ipsum dolor sit amet consectetur
                       adipisicing elit. Cupiditate aut perferendis deleniti
                       perspiciatis recusandae laboriosam numquam minima
                       assumenda id eum blanditiis veritatis eveniet incidunt
                       eius, distinctio ipsum, in doloribus totam?
                     </p>
                   </div>
                 </div>
                 <!--              -->
                 <div class="row">
                   <div class="col-md-12">
                     <p class="text-justify">
                       Lorem ipsum, dolor sit amet consectetur adipisicing
                       elit. Tempore ratione doloremque explicabo voluptatibus
                       cupiditate rerum suscipit dignissimos voluptatum nobis
                       sed dicta non et velit, cum neque architecto quia quam
                       perspiciatis. Lorem, ipsum dolor sit amet consectetur
                       adipisicing elit. Cupiditate aut perferendis deleniti
                       perspiciatis recusandae laboriosam numquam minima
                       assumenda id eum blanditiis veritatis eveniet incidunt
                       eius, distinctio ipsum, in doloribus totam?
                     </p>
                   </div>
                 </div>
                 <!--              -->
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Questrial");
$fontFamily: "Questrial", sans-serif;
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
$color1: #f863a2;
$color2: #f98367;
$white: #ffffff;
* {
  font-family: $fontFamily;
}

.ease {
  transition: all ease 0.25s;
}
.bgGradient {
  background-image: linear-gradient($color1, $color2);
}
body {
  @extend .bgGradient;
  height: 100vh;
}
.menuWrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  .trigger {
    height: rem(50px);
    width: rem(50px);
    position: fixed;
    z-index: 9999;
    top: 10px;
    left: 10px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    outline: 0;
    border-radius: rem(500px);
    @extend .bgGradient;
    .iconBar {
      display: inline-flex;
      height: rem(2px);
      width: rem(24px);
      margin: rem(3px) auto;
      background-color: $white;
      position: relative;
      border-radius: rem(10px);
      @extend .ease;
    }
  }
  .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 997;
    width: rem(220px);
    max-width: rem(220px);
    .navbar-nav {
      .nav-link {
        color: $white;
        &:hover {
          color: darken($white, 10%);
        }
      }
    }
  }
}

.siteContainer {
  position: relative;
  z-index: 998;
  @extend .ease;
}

/*active states*/
.menuWrapper.active {
  .trigger {
    .iconBar {
      position: absolute;
      background-color: $white;
      &:nth-child(2) {
        display: none;
      }
      &:first-child {
        transform: rotate(45deg);
      }
      &:last-child {
        transform: rotate(-45deg);
      }
    }
  }
  .siteContainer {
    transform: scale(0.85) translatex(rem(240px));
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Questrial");
* {
  font-family: "Questrial", sans-serif;
}

.ease, .siteContainer, .menuWrapper .trigger .iconBar {
  transition: all ease 0.25s;
}

.bgGradient, .menuWrapper .trigger, body {
  background-image: linear-gradient(#f863a2, #f98367);
}

body {
  height: 100vh;
}

.menuWrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.menuWrapper .trigger {
  height: 3.125rem;
  width: 3.125rem;
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
  outline: 0;
  border-radius: 31.25rem;
}
.menuWrapper .trigger .iconBar {
  display: inline-flex;
  height: 0.125rem;
  width: 1.5rem;
  margin: 0.1875rem auto;
  background-color: #ffffff;
  position: relative;
  border-radius: 0.625rem;
}
.menuWrapper .menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 997;
  width: 13.75rem;
  max-width: 13.75rem;
}
.menuWrapper .menu .navbar-nav .nav-link {
  color: #ffffff;
}
.menuWrapper .menu .navbar-nav .nav-link:hover {
  color: #e6e6e6;
}

.siteContainer {
  position: relative;
  z-index: 998;
}

/*active states*/
.menuWrapper.active .trigger .iconBar {
  position: absolute;
  background-color: #ffffff;
}
.menuWrapper.active .trigger .iconBar:nth-child(2) {
  display: none;
}
.menuWrapper.active .trigger .iconBar:first-child {
  transform: rotate(45deg);
}
.menuWrapper.active .trigger .iconBar:last-child {
  transform: rotate(-45deg);
}
.menuWrapper.active .siteContainer {
  transform: scale(0.85) translatex(15rem);
}

JAVASCRIPT

$(document).ready(function() {
  var setHeight = function() {
    $(".siteWrapper").slimscroll({
      height: document.documentElement.clientHeight
    });
    $(".menuContainer").slimscroll({
      height: document.documentElement.clientHeight - 60
    });
  };
  $(".trigger").on("click", function() {
    $(".menuWrapper").toggleClass("active");
  });
  setHeight();
  $(window).resize(function() {
    setHeight();
  });
});

 

Add a Comment

Your email address will not be published. Required fields are marked *