Crear un menú fuera de lienzo con Pure CSS

Vista prévia

Descripción

En este post vamos a crear un menú fuera de lienzo de la aplicación móvil que se deslizará hacia fuera desde el borde de la pantalla y empujar el contenido principal a la derecha. No se necesita JavaScript (jQuery).

Funcionamiento

Crear un menú de navegación fuera de lienzo mediante HTML lista desordenada.

<nav class="site-menu">

<h2>Menu</h2>

<ul>


<li>List Item 1</li>


<li>List Item 2</li>


<li>List Item 3</li>

</ul>
</nav>

Crea enlaces para abrir y cerrar el menú del lienzo.

<a href="#site-canvas" class="toggle-nav">&#x2261;</a>

<a href="#" class="close-canvas"></a>

Inserte otros contenidos en el documento HTML. El HTML completo debe ser así.

<div class="site-wrapper">

<div class="site-canvas" id="site-canvas">


<nav class="site-menu">



<h2>Menu</h2>



<ul>




<li>List Item 1</li>




<li>List Item 2</li>




<li>List Item 3</li>



</ul>


</nav>


<div class="site-content">



<header class="header"> <a href="#site-canvas" class="toggle-nav">&#x2261;</a>




<h1>Off-Canvas Menu with Pure CSS</h1>



</header>



<div class="content">




Your Main Content Goese Here



</div>


</div>


<a href="#" class="close-canvas"></a> </div>
</div>

Los estilos CSS/CSS3 requeridos para habilitar el menú fuera del lienzo. Modifica el CSS o añade tus propios estilos como desees.

.site-wrapper {

height: 800px; /* Temp */

overflow: hidden;

position: relative;

width: 100%;
}

.site-canvas {

height: 100%;

position: relative;

width: 100%;

-webkit-transform: translateX(0);

-moz-transform: translateX(0);

-ms-transform: translateX(0);

-o-transform: translateX(0);

transform: translateX(0);

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

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

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

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

transform: translate3d(0, 0, 0);

-webkit-transition: 300ms ease all;

-moz-transition: 300ms ease all;

-ms-transition: 300ms ease all;

-o-transition: 300ms ease all;

transition: 300ms ease all;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;
}

.site-canvas--active,
#site-canvas:target {

-webkit-transform: translateX(300px);

-moz-transform: translateX(300px);

-ms-transform: translateX(300px);

-o-transform: translateX(300px);

transform: translateX(300px);

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

-moz-transform: translate3d(300px, 0, 0);

-ms-transform: translate3d(300px, 0, 0);

-o-transform: translate3d(300px, 0, 0);

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

.site-menu {

background: #e74c3c;

color: White;

height: 100%;

left: -300px;

padding: 15px;

position: absolute;

top: 0;

width: 300px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;
}

.site-content { position: relative; }

.close-canvas {

background-color: transparent;

bottom: 0;

cursor: pointer;

display: none;

height: 100%;

left: 0;

position: absolute;

right: 0;

top: 0;

width: 100%;
}

#site-canvas:target .close-canvas { display: block; }

/* Extra... */

a { color: CornflowerBlue; }

.header {

background-color: #2c3e50;

padding: 15px;

position: relative;
}

.header a {

color: White;

text-decoration: none;
}

.toggle-nav {

font-size: 2.8em;

left: .3em;

margin-top: -.7em;

position: absolute;

top: 50%;
}

h1 {

color: White;

margin: 0;

padding-left: 1em;
}

.content { padding: 15px; }