"t1"
Bootstrap 3.3.0 Snippet by arthit

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav>
<ul class="list-unstyled main-menu">
<!--Include your navigation here-->
<li class="text-right"><a href="#" id="nav-close">X</a></li>
<li><a href="#">Menu One <span class="icon"></span></a></li>
<li><a href="#">Menu Two <span class="icon"></span></a></li>
<li><a href="#">Menu Three <span class="icon"></span></a></li>
<li><a href="#">Dropdown</a>
<ul class="list-unstyled">
<li class="sub-nav"><a href="#">Sub Menu One <span class="icon"></span></a></li>
<li class="sub-nav"><a href="#">Sub Menu Two <span class="icon"></span></a></li>
<li class="sub-nav"><a href="#">Sub Menu Three <span class="icon"></span></a></li>
<li class="sub-nav"><a href="#">Sub Menu Four <span class="icon"></span></a></li>
<li class="sub-nav"><a href="#">Sub Menu Five <span class="icon"></span></a></li>
</ul>
</li>
<li><a href="#">Menu Four <span class="icon"></span></a></li>
<li><a href="#">Menu Five <span class="icon"></span></a></li>
</ul>
</nav>
<div class="navbar navbar-inverse navbar-fixed-top">
<!--Include your brand here-->
<a class="navbar-brand" href="#">Off Canvas Menu</a>
<div class="navbar-header pull-right">
<a id="nav-expander" class="nav-expander fixed">
MENU ·<i class="fa fa-bars fa-lg white"></i>
</a>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
a.nav-expander {
background: none repeat scroll 0 0 #000000;
color: #FFFFFF;
display: block;
font-size: 15px;
font-weight: 400;
height: 50px;
margin-right: 0;
padding: 1em 1.6em 2em;
position: absolute;
right: 0;
text-decoration: none;
text-transform: uppercase;
top: 0;
transition: right 0.3s ease-in-out 0s;
width: 130px;
z-index: 12;
transition: right 0.3s ease-in-out 0s;
-webkit-transition: right 0.3s ease-in-out 0s;
-moz-transition: right 0.3s ease-in-out 0s;
-o-transition: right 0.3s ease-in-out 0s;
}
a.nav-expander:hover {
cursor: pointer;
}
a.nav-expander.fixed {
position: fixed;
}
.nav-expanded a.nav-expander.fixed {
right: 20em;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function(){
//Navigation Menu Slider
$('#nav-expander').on('click',function(e){
e.preventDefault();
$('body').toggleClass('nav-expanded');
});
$('#nav-close').on('click',function(e){
e.preventDefault();
$('body').removeClass('nav-expanded');
});
// Initialize navgoco with default options
$(".main-menu").navgoco({
caret: '<span class="caret"></span>',
accordion: false,
openClass: 'open',
save: true,
cookie: {
name: 'navgoco',
expires: false,
path: '/'
},
slide: {
duration: 300,
easing: 'swing'
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit

Questions / Comments: