Download Responsive Off-canvas Navigation with Gooey Transition Effect

This time I will share jQuery Plugin and tutorial about Responsive Off-canvas Navigation with Gooey Transition Effect, hope it will help you in programming stack.

File Size:	4.92 KB
Views Total:	6455
Last Update:	6 years ago
Publish Date:	6 years ago
Official Website:	Go to website
License:	MIT

Demo Download

A jQuery & CSS / CSS3 based responsive off-canvas push navigation that comes with a cool gooey transition effect as you resize the browser window.

How to use it:

1. Include the Font Awesome 4 for navigation icons.

`1`	`<link` `rel="stylesheet"` `href="/path/to/font-awesome.min.css">`

2. Create an off-canvas sidebar navigation for your website.

01
<aside>

02
  <h2>Sidebar <a href="https://www.jqueryscript.net/tags.php?/Navigation/">Navigation</a></h2>

03
  <nav class="site-nav">

04
    <a class="active" href="#"><i class="fa fa-home"></i> Home</a>

05
    <a href="#"><i class="fa fa-gears"></i> Services</a>

06
    <a href="#"><i class="fa fa-envelope"></i> Contact</a>

07
    <a href="#"><i class="fa fa-book"></i> Blog</a>

08
  </nav> 

09
  <footer>

10
    <a href=""><i class="fa fa-sign-out fa-rotate-180"></i> Logout</a>  

11
  </footer>

12
</aside>

3. Create a toggle button which allows you to open / close the sidebar navigation.

`1`	`<button` `id="menu"` `title="<a href="https://www.jqueryscript.net/menu/">Menu</a>"><i` `class="fa fa-bars fa-2x"></i></button>`

4. The core CSS styles for the sidebar navigation.

01
aside {

02
  position: fixed;

03
  height: 100%;

04
  width: 100%;

05
  color: #fff;

06
  left: -100%;

07
  background-color: #2A3744;

08
  padding: 20px;

09
  -moz-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);

10
  -o-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);

11
  -webkit-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);

12
  transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);

13
}

14
 
15
aside a {

16
  padding: 8px;

17
  color: rgba(255, 255, 255, 0.7);

18
  font-weight: 300;

19
  -moz-transition: background-color 0.3s, color 0.3s;

20
  -o-transition: background-color 0.3s, color 0.3s;

21
  -webkit-transition: background-color 0.3s, color 0.3s;

22
  transition: background-color 0.3s, color 0.3s;

23
}

24
 
25
aside a:hover { color: #fff; }

26
 
27
aside a i, aside a img {

28
  width: 20px;

29
  text-align: center;

30
  margin-right: 6px;

31
}

32
 
33
aside .site-nav a { margin-bottom: 3px; }

34
 
35
aside .site-nav a.active, aside .site-nav a:hover { background-color: rgba(0, 0, 0, 0.3); }

36
 
37
aside .site-nav a.active i { color: #24FFCE; }

38
 
39
aside footer {

40
  margin-top: 10px;

41
  padding-top: 10px;

42
  border-top: 1px solid rgba(0, 0, 0, 0.3);

43
  width: 100%;

44
  position: absolute;

45
  bottom: 40px;

46
  left: 0;

47
  padding-left: 10px;

48
}

49
 
50
aside footer a { padding: 8px; }

5. The required CSS styles for your main content.

1
<section>

2
  Main content here

3
</section>

1
section {

2
  -moz-transition: margin-left 0.4s ease;

3
  -o-transition: margin-left 0.4s ease;

4
  -webkit-transition: margin-left 0.4s ease;

5
  transition: margin-left 0.4s ease;

6
}

6. Make them responsive.

01
@media (min-width: 639px) {

02
 
03
body.nav-open section { margin-left: 250px; }

04
 
05< 

source : jqueryscript.net
Share 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