HTML y CSS sólo OFF-Canvas cajón de navegación

Vista prévia

Descripción

Sólo otro < a href = "https://wikicss.com/tag/drawer-menu/" > OFF-Canvas navegación del cajón construido sobre CSS, CSS3 y CheckBox elemento.

Funcionamiento

Cree la navegación de cajón fuera de lienzo como estas:

<aside class="DrawerMenu">



<div class="MenuContainer">


<nav class="Menu">



<a href="#">Menu Item 01</a>



<a href="#">Menu Item 02</a>



<a href="#">Menu Item 03</a>



<a href="#">Menu Item 04</a>



<a href="#">Menu Item 05</a>



<a href="#">Menu Item 06</a>



<a href="#">Menu Item 07</a>



<a href="#">Menu Item 08</a>



<a href="#">Menu Item 09</a>



<a href="#">Menu Item 10</a>



<a href="#">Menu Item 11</a>



<a href="#">Menu Item 12</a>



<a href="#">Menu Item 13</a>



<a href="#">Menu Item 14</a>



<a href="#">Menu Item 15</a>


</nav>

</div>



<label for="DrawerMenuTrigger" class="MenuOverlay"></label>


</aside>

Cree un elemento de desencadenador para alternar la navegación del cajón.

<label for="DrawerMenuTrigger" class="OpenMenuButton">OPEN MENU</label>
<input type="checkbox" id="DrawerMenuTrigger" hidden>

El CSS para habilitar el elemento de desencadenador basado en la casilla de verificación para abrir la navegación del cajón.

.OpenMenuButton { cursor: pointer; }

.DrawerMenu {

position: fixed;

z-index: 99;

width: 100vw;

height: 100vh;

top: 0;

bottom: 0;

-webkit-transform: translateX(-100%);

transform: translateX(-100%);

-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);

transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);

transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);

transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);

display: -ms-grid;

display: grid;

grid-template-areas: 'MENU OVERLAY';

-ms-grid-columns: 15fr 5fr;

grid-template-columns: 15fr 5fr
}

@media (min-width: 30em) {

.DrawerMenu {

-ms-grid-columns: 5fr 10fr;

grid-template-columns: 5fr 10fr;
}
}

#DrawerMenuTrigger:checked ~ .DrawerMenu {

-webkit-transform: none;

transform: none;
}

.MenuContainer {

grid-area: 'MENU';

background-color: rgb(102, 51, 153);

box-sizing: border-box;

padding: 24px;

overflow: auto;

-webkit-overflow-scrolling: touch;
}

.Menu {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-flow: column wrap;

flex-flow: column wrap
}

.Menu a {

text-decoration: none;

color: #FFFFFF;

display: block;

padding: 16px 0;
}

.Menu a + a { border-top: 1px solid rgba(255, 255, 255, .1); }

.MenuOverlay { grid-area: 'OVERLAY'; }