Download Responsive Off-canvas Sidebar Navigation With jQuery And CSS3

This time I will share jQuery Plugin and tutorial about Responsive Off-canvas Sidebar Navigation With jQuery And CSS3, hope it will help you in programming stack.

File Size:	2.37 KB
Views Total:	8444
Last Update:	5 years ago
Publish Date:	5 years ago
Official Website:	Go to website
License:	MIT

Demo Download

A jQuery/CSS3 based responsive, off-canvas navigation where the sidebar menu is displayed by sliding the entire page to the left (or right) side when toggled.

How to use it:

1. Create the sidebar navigation that is hidden on page load.

01
<div class="sidebar">

02
  <ul class="sidebar-list">

03
    <li class="sidebar-item">

04
      <a href="#" class="sidebar-anchor">Item 1</a>

05
    </li>

06
    <li class="sidebar-item">

07
      <a href="#" class="sidebar-anchor">Item 2</a>

08
    </li>

09
    <li class="sidebar-item">

10
      <a href="#" class="sidebar-anchor">Item 3</a>

11
    </li>

12
  </ul>

13
</div>

2. Create a button to toggle the sidebar navigation.

1
<div class="nav-right visible-xs">

2
  <div class="button" id="btn">

3
    <div class="bar top"></div>

4
    <div class="bar middle"></div>

5
    <div class="bar bottom"></div>

6
  </div>

7
</div>

3. Insert another hidden toggle button into the main content.

01
<main>

02
  <nav>

03
    <div class="nav-right hidden-xs">

04
      <div class="button" id="btn">

05
        <div class="bar top"></div>

06
        <div class="bar middle"></div>

07
        <div class="bar bottom"></div>

08
      </div>

09
    </div>

10
  </nav>

11
</main>

4. Insert another hidden toggle button into the main content.

001
main {

002
  z-index: 2;

003
  position: relative;

004
  height: 100%;

005
  background-color: #2D3142;

006
  -webkit-transition: transform .7s ease-in-out;

007
  -moz-transition: transform .7s ease-in-out;

008
  -ms-transition: transform .7s ease-in-out;

009
  -o-transition: transform .7s ease-in-out;

010
  transition: transform .7s ease-in-out;

011
}

012
 
013
.sidebar {

014
  height: 100%;

015
  width: 400px;

016
  position: fixed;

017
  top: 0;

018
  z-index: 1;

019
  right: 0;

020
  background-color: #EF8354;

021
}

022
 
023
.move-to-left {

024
  -webkit-transform: translateX(-400px);

025
  -moz-transform: translateX(-400px);

026
  -ms-transform: translateX(-400px);

027
  -o-transform: translateX(-400px);

028
  transform: translateX(-400px);

029
}

030
 
031
nav { padding-top: 30px; }

032
 
033
.sidebar-list {

034
  padding: 0;

035
  margin: 0;

036
  list-style: none;

037
  position: relative;

038
  margin-top: 150px;

039
  text-align: center;

040
}

041
 
042
.sidebar-item {

043
  margin: 30px 0;

044
  opacity: 0;

045
  -webkit-transform: translateY(-20px);

046
  -moz-transform: translateY(-20px);

047
  -ms-transform: translateY(-20px);

048
  -o-transform: translateY(-20px);

049
  transform: translateY(-20px);

050
}

051
 
052
.sidebar-item:first-child {

053
  -webkit-transition: all .7s .2s ease-in-out;

054
  -moz-transition: all .7s .2s ease-in-out;

055
  -ms-transition: all .7s .2s ease-in-out;

056
  -o-transition: all .7s .2s ease-in-out;

057
  transition: all .7Share this:Facebook
Tweet
WhatsApp
Related posts:Free Download Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js
Free Download Smooth Sticky Header In jQuery – sp.stickyHeader.js
Free Download Powerful Calendar Plugin With jQuery – Calendar.js