CSS3 solo navegación fuera de lienzo con icono de alternancia animado

Vista prévia

Descripción

Un moderno CSS3 basado en la navegación fuera de lienzo con un icono de alternancia animado que permite deslizar hacia fuera un panel de navegación de la barra lateral desde el lado izquierdo de la ventana del navegador. No necesita JavaScript.

Funcionamiento

Cree el código HTML para un icono de menú para alternar la navegación fuera del lienzo.

<input id="menu" type="checkbox" name="menu" class="HiddenCheckbox"/>
<label for="menu" class="MenuIcon"></label>

Animación del icono del menú mediante transiciones y transformaciones CSS3.

.HiddenCheckbox { display: none; }

.MenuIcon {

cursor: pointer;

display: block;

float: left;

height: 30px;

position: relative;

width: 30px;

z-index: 2;
}

.MenuIcon::before {

-webkit-box-shadow: #999999 0 12px 0;

box-shadow: #999999 0 12px 0;

height: 6px;

-webkit-transform-origin: left top;

-ms-transform-origin: left top;

transform-origin: left top;

width: 30px;
}

.MenuIcon::after {

bottom: 0;

height: 6px;

-webkit-transform-origin: left bottom;

-ms-transform-origin: left bottom;

transform-origin: left bottom;

width: 30px;
}

.MenuIcon::before,
.MenuIcon::after {

background: #999999;

display: block;

content: '';

position: absolute;

-webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.4s 0.2s;

transition: box-shadow 0.2s linear, transform 0.4s 0.2s;
}

.HiddenCheckbox:checked ~ .MenuHeader {

opacity: 1;

-webkit-transform: none;

-ms-transform: none;

transform: none;
}

.HiddenCheckbox:checked ~ .MenuIcon::before {

-webkit-box-shadow: transparent 0 0 0;

box-shadow: transparent 0 0 0;

-webkit-transform: rotate(45deg) translate3d(6px, -3px, 0);

transform: rotate(45deg) translate3d(6px, -3px, 0);
}

.HiddenCheckbox:checked ~ .MenuIcon::after {

-webkit-transform: rotate(-45deg) translate3d(6px, 3px, 0);

transform: rotate(-45deg) translate3d(6px, 3px, 0);
}

.HiddenCheckbox:checked ~ .Menu { left: 0; }

Cree el código HTML para una navegación fuera del lienzo y, a continuación, envuélvalo junto con el icono de menú en un elemento primario con la clase de ' MenuContainer '.

<div class="MenuContainer">

<input id="menu" type="checkbox" name="menu" class="HiddenCheckbox"/>

<label for="menu" class="MenuIcon"></label>

<h2 class="MenuHeader">Nav Menu</h2>

<nav class="Menu">


<ul class="Menu-list">



<li class="Menu-item"><a href="https://wikicss.com/" target="_blank" class="Menu-link">Home</a></li>



<li class="Menu-item"><a href="https://wikicss.com/" target="_blank" class="Menu-link">About</a></li>



<li class="Menu-item"><a href="https://wikicss.com/" target="_blank" class="Menu-link">Contact</a></li>


</ul>

</nav>
</div>

El CSS necesario para el estilo de la navegación fuera de lienzo.

.MenuContainer {

display: inline-block;

margin: 20px;
}

.Menu {

background: #333;

bottom: 0;

left: -90%;

position: absolute;

top: 0;

width: 90%;

-webkit-transition: left 0.4s;

transition: left 0.4s;
}

.Menu-list {

list-style-type: none;

margin: 60px 0 0;

padding: 0;
}

.Menu-item { margin: 0; }

.Menu-link {

color: #fff;

display: block;

overflow: hidden;

padding: 8px 22px;

position: relative;

text-decoration: none;

z-index: 1;
}

.Menu-link::before {

background: #444;

bottom: 0;

content: '';

left: 0;

position: absolute;

right: 100%;

top: 0;

-webkit-transition: right 0.4s;

transition: right 0.4s;

z-index: -1;
}

.Menu-link::after {

content: attr(href);

color: #fff;

float: right;

opacity: 0;

-webkit-transition: opacity 0.8s, -webkit-transform 0.4s;

transition: opacity 0.8s, transform 0.4s;

-webkit-transform: translate3d(100%, 0, 0);

transform: translate3d(100%, 0, 0);
}

.Menu-link:hover::before { right: 0; }

.Menu-link:hover::after {

opacity: 0.5;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}