Bootstrap Snippet menu 01 using HTML CSS jQuery

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

"menu 01"
Bootstrap 3.3.0 Snippet by ipoelnet

Related: See More

Questions / Comments:

"menu 01" Bootstrap 3.3.0 Snippet by ipoelnet

Related: See More

Questions / Comments:

"menu 01"
Bootstrap 3.3.0 Snippet by ipoelnet