Navegación Push adaptable en CSS puro

Vista prévia

Descripción

Un menú CSS solo adaptable que transforma la navegación horizontal normal del sitio en un < a href = "https://wikicss.com/tag/push-menu/" > OFF-Canvas Push menu en dispositivos móviles.

Funcionamiento

Cree el código HTML para la barra de menús móvil & icono 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>

Cree una navegación del sitio de encabezado de la siguiente manera:

<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>

Inserte el contenido principal en el elemento ' container '.

<div class="container">

main content here
</div>

El CSS para la barra móvil & icono 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: #333;

-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;

transition: -webkit-transform 300ms ease;

transition: transform 300ms ease;

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

.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;

transition: -webkit-transform 300ms ease;

transition: transform 300ms ease;

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

.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);
}

El CSS básico para la navegación del sitio.

.header {

position: fixed;

top: 0;

left: -35%;

padding-top: 60px;

width: 70%;

height: 100%;

background-color: #333;

overflow-y: scroll;

text-align: center;

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;
}

.header nav, .header ul { height: 100%; }

.header li { border-bottom: 1px solid #eee; }

.header a {

display: block;

padding: 20px;

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

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

.header a:hover { background-color: #222; }

El CSS básico para el contenido principal.

.container {

position: relative;

top: 60px;

padding: 35px 20px;

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;
}

El CSS para el efecto fuera del lienzo.

.menu-toggle:checked ~ .header {

-webkit-transform: translateX(50%);

transform: translateX(50%);

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

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

.menu-toggle:checked ~ .container {

-webkit-transform: translateX(70%);

transform: translateX(70%);

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

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

Estilo del menú fuera del lienzo cuando el tamaño de la pantalla es inferior a 720px:

@media (min-width: 720px) {

.menu-toggle:checked ~ .header {

-webkit-transform: translateX(0);

transform: translateX(0);

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

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

.menu-toggle:checked ~ .container {

-webkit-transform: translateX(0);

transform: translateX(0);

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

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

.mobile-bar { display: none; }

.header {

z-index: 5;

position: relative;

left: 0;

padding-top: 0;

width: 100%;

height: auto;

overflow: auto;
}

.header li {

display: inline-block;

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

border: none;
}

.header a { padding: 12px 45px; }

.container { top: 0; }
}