CSS sólo apagado-lienzo navegación utilizando CSS pseudo-clase

Vista prévia

Descripción

Un CSS puro, amigable para móviles < a href = "https://wikicss.com/tag/off-canvas-menu/" > sistema de navegación fuera de lienzo construido con Plain HTML/CSS/CSS3 y < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/: focus-dentro de" target = "_ blank" rel = "noopener noreferrer" >: foco-dentro de Pseudo-clase CSS.

Funcionamiento

Cree el código HTML para la navegación fuera del lienzo.

<div id="nav-container">

<div class="bg"></div>

<div class="button" tabindex="0">


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


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


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

</div>

<div id="nav-content" tabindex="0">


<ul>



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



<li><a href="#0">Services</a></li>



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



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



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


</ul>

</div>
</div>

El CSS para el botón de alternar hamburguesa.

.button {

position: relative;

display: flex;

flex-direction: column;

justify-content: center;

z-index: 1;

-webkit-appearance: none;

border: 0;

background: transparent;

border-radius: 0;

height: 70px;

width: 30px;

cursor: pointer;

pointer-events: auto;

margin-left: 25px;

touch-action: manipulation;

-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.icon-bar {

display: block;

width: 100%;

height: 3px;

background: #aaa;

transition: .3s;
}

.icon-bar + .icon-bar { margin-top: 5px; }

#nav-container:focus-within .button {

pointer-events: none;
}

#nav-container:focus-within .icon-bar:nth-of-type(1) {

transform: translate3d(0, 8px, 0) rotate(45deg);
}

#nav-container:focus-within .icon-bar:nth-of-type(2) {

opacity: 0;
}

#nav-container:focus-within .icon-bar:nth-of-type(3) {

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

El principal CSS/CSS3 para la navegación fuera de lienzo.

#nav-container {

position: fixed;

height: 100vh;

width: 100%;

pointer-events: none;
}

#nav-container .bg {

position: absolute;

top: 70px;

left: 0;

width: 100%;

height: calc(100% - 70px);

visibility: hidden;

opacity: 0;

transition: opacity .3s, visibility 0s;

background: #000;
}

#nav-container:focus-within .bg {
 visibility: visible;
 opacity: .6;
}

#nav-container * { visibility: visible; }

#nav-content {

margin-top: 70px;

padding: 20px;

width: 90%;

max-width: 300px;

position: absolute;

top: 0;

left: 0;

height: calc(100% - 70px);

background: #ececec;

pointer-events: auto;

-webkit-tap-highlight-color: rgba(0,0,0,0);

transform: translateX(-100%);

transition: transform .3s;

will-change: transform;

contain: paint;
}

#nav-content ul {

height: 100%;

display: flex;

flex-direction: column;
}

#nav-content li a {

padding: 10px 5px;

display: block;

text-transform: uppercase;

transition: color .1s;
}

#nav-content li a:hover { color: #BF7497; }