Minimalist Sidebar Navigation With jQuery And Font Awesome

This is a super small responsive sidebar navigation (aka off-canvas menu) built with HTML, CSS/CSS3, jQuery and Font Awesome.

How to use it:

1. Create the sidebar navigation which should be hidden on page load.

<div class="sidebar hide-sidebar">
  <ul class="centered">
    <li><i class="fa fa-home" aria-hidden="true"></i> Home</li>
    <li><i class="fa fa-info-circle" aria-hidden="true"></i> About</li>
    <li><i class="fa fa-folder" aria-hidden="true"></i> Projects</li>
    <li><i class="fa fa-paper-plane" aria-hidden="true"></i> Contact</li>
  </ul>
</div>

2. Create a toggle button to reveal the sidebar navigation on click.

<nav>
  <ul>
    <li class="menu"><i class="fa fa-bars" aria-hidden="true"></i></li>
  </ul>
</nav>

3. The primary CSS/CSS3 styles. Feel free to override and modify the CSS rules to create your own styles.

nav ul {
  position: relative;
  z-index: 1;
  width: inherit;
  height: 60px;
}

nav ul li {
  line-height: 60px;
  padding: 0 20px;
  float: left;
  font-size: 26px;
  opacity: 0.6;
  color: #FFF;
  cursor: pointer;
  transition: all 1s
}

.sidebar {
  position: absolute;
  top: 0;
  height: inherit;
  width: 300px;
  background-image: linear-gradient(to left, rgba(0,0,0,0.0), rgba(0,0,0,0.5));
  transition: left 1s;
}

.sidebar ul { width: inherit; }

.sidebar ul li {
  margin: 50px 10px;
  padding: 10px;
  color: #FFF;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 1s;
}

.sidebar ul li:hover { opacity: 1; }

.hide-sidebar { left: -300px; }

.show-sidebar { left: 0; }

.menu-clicked {
  transform: scale(1.25);
  opacity: 1;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

4. Insert the latest version of jQuery JavaScript library into the webpage.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

5. The jQuery script to handle the sidebar navigation as you click on the toggle button.

$('.menu').click(function() {
  $(this).toggleClass('menu-clicked');
  $('.sidebar').toggleClass('show-sidebar hide-sidebar');
});

---

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