Navegación de fundido de salida/out adaptable en CSS puro

Vista prévia

Descripción

Se trata de una navegación de respuesta mínima que transforma el menú horizontal en un menú de alternancia de pantalla completa con animaciones de fundido de salida y fuera. Escrito en CSS/CSS3 puro.

Funcionamiento

Cree una navegación de cabecera normal para la página web multiplataforma.

<header class="header">

<nav>


<ul>



<li><a href="#">Item 1</a></li>



<li><a href="#">Item 2</a></li>



<li><a href="#">Item 3</a></li>



<li><a href="#">Item 4</a></li>



<li><a href="#">Item 5</a></li>


</ul>

</nav>
</header>

Crear los controles de alternancia de menú móvil.

<input type="checkbox" class="menu-toggle" id="menu-toggle">
<div class="mobile-bar">

<label for="menu-toggle" class="menu-icon">


<span></span>

</label>
</div>

El CSS necesario para la navegación del sitio.

/**---- Fade-In/Out Effect ----**/

.menu-toggle:checked ~ .header {

visibility: visible;

opacity: 1;

-webkit-transition-delay: 0s;

transition-delay: 0s;
}

/**---- Header ----**/

.header {
	visibility: hidden;
	opacity: 0;

position: fixed;

top: 0;

left: 0;

padding-top: 60px;

width: 100%;

height: 100%;

background-color: #E53935;

overflow-y: scroll;

text-align: center;

color: #eee;
	-webkit-transition: opacity 300ms ease-in, visibility 0s ease-in 300ms;
	transition: opacity 300ms ease-in, visibility 0s ease-in 300ms;
}

.header nav,
.header ul {

height: 100%;
}

.header li {

border-bottom: 1px solid #eee;
}

.header a {

display: block;

padding: 35px;

-webkit-transition: background-color 300ms ease-in;

transition: background-color 300ms ease-in;
}

.header a:hover {

background-color: #C62828;
}

El CSS para los controles de alternancia de menú móvil.

/**---- Mobile Bar ----**/

.menu-toggle {

display: none;
}

.mobile-bar {

z-index: 10;

position: fixed;

top: 0;

left: 0;

padding: 0 25px;

width: 100%;

height: 60px;

background-color: #E53935;

-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/**---- Menu Icon ----**/

.menu-icon {

display: block;

position: relative;

width: 25px;

height: 100%;

cursor: pointer;

-webkit-transition: -webkit-transform 300ms ease-in;

transition: -webkit-transform 300ms ease-in;

transition: transform 300ms ease-in;

transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
}

.menu-icon > span {

display: block;

position: absolute;

top: 55%;

margin-top: -0.3em;

width: 100%;

height: 0.3em;

border-radius: 1px;

background-color: #eee;

-webkit-transition: -webkit-transform 300ms ease-in;

transition: -webkit-transform 300ms ease-in;

transition: transform 300ms ease-in;

transition: transform 300ms ease-in, -webkit-transform 300ms ease-in;
}

.menu-icon > span:before,
.menu-icon > span:after {

content: "";

position: absolute;

width: 100%;

height: 100%;

border-radius: 1px;

background-color: #eee;

-webkit-transition: -webkit-transform 300ms ease;

transition: -webkit-transform 300ms ease;

transition: transform 300ms ease;

transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.menu-icon > span:before {

-webkit-transform: translateY(-0.6em);

transform: translateY(-0.6em);
}

.menu-icon > span:after {

-webkit-transform: translateY(0.6em);

transform: translateY(0.6em);
}

/**---- Menu Icon Effects ----**/

.menu-toggle:checked + .mobile-bar .menu-icon {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);
}

.menu-toggle:checked + .mobile-bar span:before,
.menu-toggle:checked + .mobile-bar span:after {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);
}

Cree la magia en las consultas de medios CSS.

@media (min-width: 720px) {

.mobile-bar {


display: none;

}



.header {


z-index: 5;


position: relative;


left: 0;


padding-top: 0;


width: 100%;


height: auto;


overflow: auto;


visibility: visible;


opacity: 1;

}


.header li {


display: inline-block;


margin-right: -6px; /* fix the inline-block gap */


border: none;

}


.header a {


padding: 12px 45px;

}
}