Pure CSS OFF-Canvas alternar menú-navslider

Vista prévia

Descripción

navslider es una navegación fuera de lienzo CSS/LESS pura que utiliza la transición CSS3 y los trucos de transformación para revelar un menú de navegación en la barra lateral cuando el visitante se desplaza sobre el botón de alternancia.

Funcionamiento

Cree la navegación fuera del lienzo con un botón de alternancia.

<nav class="menu-container">

<a href="#" class="menu-btn"></a>

<div class="menu-slide">


<ul class="menu-list">



<li class="menu-item"><a href="#">Home</a></li>



<li class="menu-item"><a href="#">Works</a></li>



<li class="menu-item"><a href="#">Services</a></li>



<li class="menu-item"><a href="#">About</a></li>



<li class="menu-item"><a href="#">Contact</a></li>


</ul>

</div>
</nav>

Los estilos principales de CSS/CSS3 para la navegación.

.menu-container:hover .menu-slide {

-o-transform: translate(270px, 0);

-moz-transform: translate(270px, 0);

-ms-transform: translate(270px, 0);

-webkit-transform: translate(270px, 0);

transform: translate(270px, 0);

opacity: 1;
}

.menu-container .menu-btn {

color: #333333;

position: fixed;

top: 10px;
 left: :10px;

cursor: pointer;

z-index: 10000;

font-size: 19px;

text-decoration: none;
}

.menu-container .menu-btn:hover { color: #666666; }

.menu-container .menu-slide {

margin: 0;

padding: 0;

list-style: none;

background-color: #e0e0e0;

height: 100%;

left: -270px;

top: 0;

width: 270px;

overflow-y: auto;

z-index: 10000;

-moz-transition: 0.3s ease-in-out;

-o-transition: 0.3s ease-in-out;

-webkit-transition: 6s ease-in-out;

transition: 0.3s ease-in-out;

position: fixed;

opacity: 0;
}

.menu-container .menu-slide .menu-list {

padding: 0;

margin: 0;

list-style: none;
}

.menu-container .menu-slide .menu-list .menu-item a {

padding: 8px;

display: block;

text-decoration: none;

color: #333333;

transition: 0.2s ease-in-out;

-moz-transition: 0.2s ease-in-out;

-webkit-transition: 0.2s ease-in-out;

-ms-transition: 0.2s ease-in-out;

-o-transition: 0.2s ease-in-out;

font-weight: 300;

font-family: 'Roboto', sans-serif;
}

.menu-container .menu-slide .menu-list .menu-item a:hover {

color: #FFF;

background-color: #333;

transition: 0.2s ease-in-out;

-moz-transition: 0.2s ease-in-out;

-webkit-transition: 0.2s ease-in-out;

-ms-transition: 0.2s ease-in-out;

-o-transition: 0.2s ease-in-out;
}