Off-canvas One Page Scroll Navigation In jQuery

A fancy hamburger button to toggle an off-canvas menu that enables the visitor to smoothly scroll through fullscreen page sections by clicking the anchor links.

How to use it:

1. Create content sections for the one page scroll web app.

<div class="content" id="main">
  <h2>Page Section 1</h2>
</div>
<div class="content" id="news">
  <h2>Page Section 2</h2>
</div>
<div class="content" id="feedback">
  <h2>Page Section 3</h2>
</div>
<div class="content" id="maps">
  <h2>Page Section 4</h2>
</div>
<div class="content" id="contacts">
  <h2>Page Section 5</h2>
</div>

2. Make the sections fullscreen.

.content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

3. Create the off-canvas navigation. Note that the anchor links must point to their corresponding sections as follows:

<div class="burger">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="menu">
  <span class="btn btn-close">&times;</span>
  <ul>
    <li><a href="#main">Page 1</a></li>
    <li><a href="#news">Page 2</a></li>
    <li><a href="#feedback">Page 3</a></li>
    <li><a href="#maps">Page 4</a></li>
    <li><a href="#contacts">Page 5</a></li>
  </ul>
</div>

4. The necessary CSS styles for the off-canvas navigation.

* {
  transition: all 0.2s;
}
.burger {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #FFFFFF;
  position: fixed;
  top: 20px;
  left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 98;
}
.burger span {
  height: 2px;
  width: 20px;
  background: black;
  margin: 2px;
}
.burger:hover {
  cursor: pointer;
}
.burger:hover span:first-child {
  width: 10px;
  transform: rotate(33deg) translate(6px, 0px);
}
.burger:hover span:last-child {
  width: 10px;
  transform: rotate(-33deg) translate(6px, 0px);
}
.menu {
  width: 20%;
  height: 100vh;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: all 0.4s;
}
.menu_active {
  transform: translateX(0%);
  transition: all 0.4s;
}
.menu .btn-close {
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: center;
  font-size: 25px;
  line-height: 20px;
  height: 25px;
  width: 25px;
  color: purple;
  padding: 0;
  border: 0;
}
.menu .btn-close:hover {
  color: purple;
  transform: rotate(180deg);
}
.menu ul {
  list-style-type: none;
}
.menu ul li {
  margin: 10px;
  font-size: 25px;
}
.menu ul li a {
  color: #ffffff;
  text-decoration: none;
}
.menu ul li a:hover {
  color: purple;
}

5. Load the needed jQuery JavaScript library at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

6. The jQuery script to activate the off-canvas navigation.

$(document).ready(function() {
  var menuLink = $('.burger');
  var menu = $('.menu');
  var close = $('.btn-close');
  var navLink = $('ul li a');
  var content = $('.content');

  menuLink.click(function() {
    menu.toggleClass('menu_active');
  });

  close.click(function() {
    menu.toggleClass('menu_active');
  });

  navLink.on('click', function(event) {
    event.preventDefault();
    var target = $(this).attr('href');        
    var top = $(target).offset().top;        
    $('html, body').animate({scrollTop: top}, 500);
    menu.toggleClass('menu_active');
  });

  content.click(function() {
    menu.toggleClass('menu_active');
  });
});

---

This awesome jQuery plugin is developed by wp-kurila. For more Advanced Usages, please check the demo page or visit the official website.