"side menu"
Bootstrap 3.3.0 Snippet by evarevirus

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 ---------->
<div class="view">
<main class="page">
<div class="transform-container">
<div class="catalog">
<span class="menu-opener"></span>
<span class="profile-opener"></span>
<img src="http://cdn.zmescience.com/wp-content/uploads/2011/04/mallard.jpg" alt="" />
<img src="http://cdn.zmescience.com/wp-content/uploads/2011/04/mallard.jpg" alt="" />
</div>
</div>
</main>
<div class="overlay"></div>
<div class="nav-slide side-menu">
<h2>MENU</h2>
<ul>
<li>Nav item 01</li>
<li>Nav item 02</li>
<li>Nav item 03</li>
<li>Nav item 04</li>
<li>Nav item 05</li>
</ul>
</div>
<div class="nav-slide side-profile">
PROFILE MENU
</div>
</div>
<script>
$('.menu-opener').on('click', function() {
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
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background: #EAEAEC;
height: 100%;
position: relative;
-webkit-tap-highlight-color: rgba(29, 29, 31, 0.1);
}
.menu-opener {
width: 50px;
height: 50px;
cursor: pointer;
background: #FFF;
background: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) no-repeat 20px 15px;
background-size: 60%;
display: block;
}
.profile-opener {
width: 50px;
height: 50px;
cursor: pointer;
background: #FFF;
background: url(http://images.pajezy.com/notes/profile.png) no-repeat 5px 20px;
background-size: 60%;
display: block;
position: absolute;
right: 0;
top: 0;
}
.view {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: