Bootstrap Snippet Nav Swipe (Pull left) using HTML CSS Javascript

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
<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 ---------->
<aside id="secundary" role="complementary">
    <button id="btn-menu-secundary-open" class="btn btn-default"><span class="glyphicon glyphicon-menu-hamburger"></span> MENU</button>
    <button id="btn-menu-secundary-close" class="btn btn-default menu-secundary-active"><span class="glyphicon glyphicon-remove"></span> CLOSE</button>
    <nav class="hidden-print hidden-xs hidden-sm">
        <ul class="nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </nav>
</aside>
<main id="primary" role="main">
    <div class="container">
        <div class="row">
            <h1 class="page-header">Hello World</h1>
        </div>
    </div>
</main>
<!-- TIP: Use with EMMET
aside#secundary[role="complementary"]>button#btn-menu-secundary-open.btn.btn-default{<span class="glyphicon glyphicon-menu-hamburger"></span> MENU}+button#btn-menu-secundary-close.btn.btn-default.menu-secundary-active{<span class="glyphicon glyphicon-remove"></span> CLOSE}+nav.hidden-print.hidden-xs.hidden-sm>ul.nav>li*5>a[href="#"]{Link $}
main#primary[role="main"]>div.container>div.row>h1.page-header{Hello World}
-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#primary { width: auto; }
#primary.menu-secundary-active { margin-left: 200px; }
#secundary { background: black; width: 200px; height: 100%; position: fixed; overflow-y: auto; margin-left: -200px; padding-top: 50px; }
#secundary.menu-secundary-active {  margin-left: 0;  }
#btn-menu-secundary-open,
#btn-menu-secundary-close { position: fixed; left: 10px; top: 10px; z-index: 1; }
#btn-menu-secundary-open.menu-secundary-active,
#btn-menu-secundary-close.menu-secundary-active { display: none; }
/* TIP: Use with SCSS or SASS
#primary, #secundary {
   @include transition(margin-left ease-in-out .15s);
}
*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
jQuery(document).ready(function($) {
    $('#btn-menu-secundary-open, #btn-menu-secundary-close').click(function() {
        $('#primary, #secundary, #btn-menu-secundary-open, #btn-menu-secundary-close').toggleClass( 'menu-secundary-active' );
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Nav Swipe (Pull left)"
Bootstrap 3.3.0 Snippet by adammacias

Related: See More

Questions / Comments:

"Nav Swipe (Pull left)" Bootstrap 3.3.0 Snippet by adammacias

Related: See More

Questions / Comments:

"Nav Swipe (Pull left)"
Bootstrap 3.3.0 Snippet by adammacias