CSS solo menú fuera de lienzo con reducción del contenido principal

Vista prévia

Descripción

Sin embargo, otro concepto de menú fuera de lienzo CSS puro que revela un menú de navegación de pantalla 0ff, mientras que la reducción del contenido principal como se ve en la página de demostración.

Funcionamiento

Construya el marcado HTML para el menú fuera del lienzo con un botón de alternancia usando la casilla de verificación & trucos de etiqueta.

<div class="container">

<input type="checkbox" id="new" style="display:none;">

<h1>OffCanvas Menu</h1>

<nav>


<ul>



<li><a href="#">Home</a></li>



<li><a href="#">About</a></li>



<li><a href="#">Contact</a></li>



<li><a href="#">Blog</a></li>



<li><a href="#">Social</a></li>


</ul>

</nav>

<main>


<label class="toggleMenu" for="new">



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



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



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


 </label>


Main Content Goes Here

</main>
</div>

Los principales estilos CSS para el menú fuera del lienzo.

nav { width: 30%; }

nav ul {

list-style-type: none;

padding: 0;

width: 70%;

margin: 100px auto 0;
}

nav ul li {

font-size: 1.7em;

transform: translateX(-30px);

-webkit-transform: translateX(-30px);

-moz-transform: translateX(-30px);

-o-transform: translateX(-30px);

-ms-transform: translateX(-30px);

opacity: 0;
}

nav ul li:nth-child(1) {

transition: all 0.3s ease-out 0.2s;

-webkit-transition: all 0.3s ease-out 0.2s;

-moz-transition: all 0.3s ease-out 0.2s;

-o-transition: all 0.3s ease-out 0.2s;

-ms-transition: all 0.3s ease-out 0.2s;
}

nav ul li:nth-child(2) {

transition: all 0.3s ease-out 0.4s;

-webkit-transition: all 0.3s ease-out 0.4s;

-moz-transition: all 0.3s ease-out 0.4s;

-o-transition: all 0.3s ease-out 0.4s;

-ms-transition: all 0.3s ease-out 0.4s;
}

nav ul li:nth-child(3) {

transition: all 0.3s ease-out 0.6s;

-webkit-transition: all 0.3s ease-out 0.6s;

-moz-transition: all 0.3s ease-out 0.6s;

-o-transition: all 0.3s ease-out 0.6s;

-ms-transition: all 0.3s ease-out 0.6s;
}

nav ul li:nth-child(4) {

transition: all 0.3s ease-out 0.8s;

-webkit-transition: all 0.3s ease-out 0.8s;

-moz-transition: all 0.3s ease-out 0.8s;

-o-transition: all 0.3s ease-out 0.8s;

-ms-transition: all 0.3s ease-out 0.8s;
}

nav ul li:nth-child(5) {

transition: all 0.3s ease-out 1s;

-webkit-transition: all 0.3s ease-out 1s;

-moz-transition: all 0.3s ease-out 1s;

-o-transition: all 0.3s ease-out 1s;

-ms-transition: all 0.3s ease-out 1s;
}

nav ul li a {

text-decoration: none;

display: block;

padding: 10px 0;

text-align: center;

margin-top: 5px;

color: #fff;

position: relative;
}

nav ul li a::before, nav ul li a::after {

content: " ";

height: 100%;

position: absolute;

top: 0;

background-color: #03A9F4;

width: 0;

transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

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

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

-ms-transition: all 0.3s ease-in-out;
}

nav ul li a::before { left: 0; }

nav ul li a::after { right: 0; }

nav ul li a:hover {

color: #03A9F4;

text-decoration: none;

text-shadow: 0 0 2px #03A9F4;
}

nav ul li a:hover::before, nav ul li a:hover::after {

width: 5px;

box-shadow: 0 0 5px 1px #03A9F4;

-webkit-box-shadow: 0 0 5px 1px #03A9F4;

-moz-box-shadow: 0 0 5px 1px #03A9F4;

-o-box-shadow: 0 0 5px 1px #03A9F4;

-ms-box-shadow: 0 0 5px 1px #03A9F4;
}

Las reglas CSS requeridas para el botón de alternancia de menú.

input:checked ~ main {

height: 100%;

box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.7);

-webkit-box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.7);

-moz-box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.7);

-o-box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.7);

-ms-box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.7);

transform: scale(0.6);

-webkit-transform: scale(0.6);

-moz-transform: scale(0.6);

-o-transform: scale(0.6);

-ms-transform: scale(0.6);

right: -12%;

cursor: pointer;

overflow: hidden;
}

input:checked ~ main h1 { margin-top: 75.5px; }

input:checked ~ main .toggleMenu {

position: absolute;

width: 100%;

top: 0;

left: 0;

height: 100%;

z-index: 10;
}

input:checked ~ nav ul li {

transform: translateX(0);

-webkit-transform: translateX(0);

-moz-transform: translateX(0);

-o-transform: translateX(0);

-ms-transform: translateX(0);

opacity: 1;
}

input:checked ~ nav ul li:nth-child(1) {

transition: all 0.3s linear 0;

-webkit-transition: all 0.3s linear 0;

-moz-transition: all 0.3s linear 0;

-o-transition: all 0.3s linear 0;

-ms-transition: all 0.3s linear 0;
}

input:checked ~ nav ul li:nth-child(2) {

transition: all 0.3s linear 0;

-webkit-transition: all 0.3s linear 0;

-moz-transition: all 0.3s linear 0;

-o-transition: all 0.3s linear 0;

-ms-transition: all 0.3s linear 0;
}

input:checked ~ nav ul li:nth-child(3) {

transition: all 0.3s linear 0;

-webkit-transition: all 0.3s linear 0;

-moz-transition: all 0.3s linear 0;

-o-transition: all 0.3s linear 0;

-ms-transition: all 0.3s linear 0;
}

input:checked ~ nav ul li:nth-child(4) {

transition: all 0.3s linear 0;

-webkit-transition: all 0.3s linear 0;

-moz-transition: all 0.3s linear 0;

-o-transition: all 0.3s linear 0;

-ms-transition: all 0.3s linear 0;
}

input:checked ~ nav ul li:nth-child(5) {

transition: all 0.3s linear 0;

-webkit-transition: all 0.3s linear 0;

-moz-transition: all 0.3s linear 0;

-o-transition: all 0.3s linear 0;

-ms-transition: all 0.3s linear 0;
}

main .toggleMenu {

background-color: transparent;

cursor: pointer;

padding: 10px;

display: block;

width: 30px;
}

main .toggleMenu span.bar {

display: block;

width: 28px;

height: 5px;

margin: 4px 1px;

background-color: #888;
}

Los estilos CSS requeridos para el contenedor principal.

.container {

position: fixed;

width: 100%;

height: 100%;

background-color: #222;
}

.container main {

border: 1px solid #ddd;

height: 100%;

width: 100%;

position: fixed;

top: 0;

right: 0;

background-color: #fff;

overflow-x: hidden;

overflow-y: scroll;

transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;
}
}