Bootstrap Snippet sidebar offcanvas using HTML CSS Bootstrap 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 ---------->
    <div class="container-fluid" >
        
        <div class="row row-offcanvas row-offcanvas-left">
            <div class="container">
                <p class="visible-xs">
                    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Menu</button>
                </p>
            </div>
            
            <div class="col-xs-12 col-sm-4 sidebar-offcanvas" id="sidebar" >
                <a class="visible-xs btn btn-primary btn-xs pull-right" data-toggle="offcanvas">CERRAR</a>
                <ul>
                     <li><a href="http://mispicaderos.com/" class="btn btn-blanco text-left ">MISPICADEROS.COM</a></li>
                     <li><a href="http://placesforlove.com/" class="btn btn-blanco text-left ">PLACESFORLOVE.COM</a></li>
                     <li><a href="http://trovacacamporella.com/" class="btn btn-blanco text-left ">TROVACAMPORELLA.COM</a></li>  
                     <li><a href="http://mispicaderos.com/" class="btn btn-blanco text-left ">MISPICADEROS.COM</a></li>
                     <li><a href="http://placesforlove.com/" class="btn btn-blanco text-left ">PLACESFORLOVE.COM</a></li>
                     <li><a href="http://trovacacamporella.com/" class="btn btn-blanco text-left ">TROVACAMPORELLA.COM</a></li> 
                </ul>
            </div><!--/.sidebar-offcanvas-->
                    
            <div class="col-md-8 col-sm-8 col-xs-12">
                CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  
                CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  
                CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  
                CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  
                CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  
                CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  
                CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO  CONTENIDO 
                CONTENIDO  CONTENIDO  
            </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
/******offcanvas*********/
html, body {
  overflow-x: hidden;
}
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 0;
  }
  .row-offcanvas-left {
    left: 0;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; 
  }
  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -100%; 
  }
  .row-offcanvas-left  .sidebar-offcanvas.active {
    left: 0%;
  }
  .row-offcanvas-right.active {
    right: 50%; 
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
$(document).ready(function() {  
    $('[data-toggle="offcanvas"]').click(function () {
        $('.sidebar-offcanvas').toggleClass('active');
    });
        
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"sidebar offcanvas"
Bootstrap 3.3.0 Snippet by joseanmola

Related: See More

Questions / Comments:

"sidebar offcanvas" Bootstrap 3.3.0 Snippet by joseanmola

Related: See More

Questions / Comments:

"sidebar offcanvas"
Bootstrap 3.3.0 Snippet by joseanmola