Pure CSS OFF-Canvas bootstrap Navigation

Vista prévia

Descripción

Una extensión CSS para bootstrap que le permite crear un menú de navegación fuera del lienzo para su proyecto Web.

Funcionamiento

Cree una barra de navegación de bootstrap como esta:

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid">


<a class="navbar-brand" href="#">Sample</a>


<label for="off_canvas" class="navbar-toggle custom1">



<span class="sr-only">Toggle navigation</span>



<span class="icon-bar"></span>



<span class="icon-bar"></span>



<span class="icon-bar"></span>


</label>

</div>
</nav>

Cree el código HTML para el menú fuera del lienzo.

<div class="off-canvas">

<input type="checkbox" id="off_canvas" />

<div class="cstm-shade">


<div class="cstm-navi">



<div class="cstm-navi-content">




<ul class="nav nav-pills nav-stacked">





<li role="presentation" class="active">






<a href="#">







<span class="glyphicon glyphicon-home"></span>







Home






</a>





</li>





<li role="presentation">






<a href="#">







<span class="glyphicon glyphicon-heart"></span>







Favourites






</a>





</li>





<li role="presentation">






<a href="#">







<span class="glyphicon glyphicon-user"></span>







Profile






</a>





</li>





<li role="presentation">






<a href="#">







<span class="glyphicon glyphicon-cog"></span>







Account Settings






</a>





</li>





<li role="presentation">






<a href="#">







<span class="glyphicon glyphicon-off"></span>







Logout






</a>





</li>




</ul>



</div>


</div>

</div>
</div>

Los estilos CSS principales.

.custom1 {

display: block;

cursor: pointer;
}

.off-canvas > .cstm-shade {

width: 0;

height: 0;

position: fixed;

top: 0;

left: 0;

transition: background 0.5s ease, width 0s ease 0.5s, height 0s ease 0.5s;
}

.off-canvas > input[type="checkbox"] {

display: none;
}

.off-canvas > input[type="checkbox"]:checked ~ .cstm-shade {

background: rgba(0, 0, 0, 0.75);

width: 100%;

height: 100%;

transition: background 0.5s ease;
}

.off-canvas > .cstm-shade > .cstm-navi {

background: white;

width: 300px;

height: 100%;

position: fixed;

right: -300px;

transition: right 0.5s ease;
}

.off-canvas > input[type="checkbox"]:checked ~ .cstm-shade > .cstm-navi {

right: 0;
}

.cstm-navi-content {

padding: 20px;

padding-top: 80px;
}