"side navbar"
Bootstrap 3.3.0 Snippet by naimansari

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 ---------->
<div id="primary-navigation">
<a href="#">menu</a>
</div>
<div id="secondary-navigation">
<a href="#">links</a>
<a href="#">links</a>
<a href="#">links</a>
<a href="#">links</a>
<a href="#">links</a>
</div>
<main id="main">
</main>
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
#primary-navigation {
background:#000;
color:#fff;
display:inline-block;
position:fixed;
top:0;
right:0;
z-index:9999;
}
#primary-navigation a {
color:#fff;
padding:15px 10px;
display:block;
}
#secondary-navigation {
position:fixed;
top:50px;
right:0px;
width:200px;
height:500px;
background:#000;
color:#fff;
transition:all 0.4s ease-out;
transform:translateX(200px);
}
#secondary-navigation.opened {
transform:translateX(0px);
transition:all 0.4s ease-out;
}
body{
perspective: 600px;
perspective-origin: 100% 50%;
}
#main {
background:#f33;
width:100%;
height:500px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
$(document).ready(function(){
$("#primary-navigation").click(function(){
$("#secondary-navigation").toggleClass('opened');
$("#main").toggleClass('slide-left');
$("#main").toggleClass('animate');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: