"menu 01"
Bootstrap 3.3.0 Snippet by ipoelnet

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 ---------->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<!-- NAVBAR -->
<div class="navbar navbar-fixed-top">
<button id="bouton" type="button" class="btn btn-default navbar-btn toggle-bouton">
<i class="icon-indent-right"></i>
</button>
</div>
<!-- CORPS -->
<div id="main" class="viewport">
<div class="frame">
<div id="menu" class="menu-slide affix">
<!-- MENU -->
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#" class="toggle-bouton"><i class="icon-home"></i> lien 1</a>
</li>
<li>
<a href="#" class="toggle-bouton"><i class="icon-edit"></i> lien 2</a>
</li>
<li>
<a href="#" class="toggle-bouton"><i class="icon-lock"></i> lien 3</a>
</li>
<li>
<a href="#" class="toggle-bouton"><i class="icon-list"></i> lien 3</a>
</li>
<li>
<a href="#" class="toggle-bouton"><i class="icon-user"></i> lien 4</a>
</li>
</ul>
</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
.viewport {
position: absolute;
margin: 0;
padding: 0;
top: 70px;
right: 0;
bottom: 0;
left: 0;
}
.frame {
margin: 0;
padding: 0;
position: absolute;
width: 200%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}
.menu-slide {
-webkit-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
-webkit-transition: 500ms;
-o-transition: 500ms;
transition: 500ms;
position: relative;
margin: 0;
padding: 0;
width: 230px;
height: auto;
float: left;
background-color: #eee;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(toggle());
function toggle(){
var hide = true;
$('.toggle-bouton').on('click',function (event){
if (hide) {
$('#menu').addClass("menu-slide-show");
$('#corp').addClass("corp-show");
hide = false;
}else {
$('#menu').removeClass("menu-slide-show");
$('#corp').removeClass("corp-show");
hide = true;
}
});
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: