Navegación lateral básica con CSS puro
| Autor: | devsloveit |
|---|---|
| Views Total: | 3,071 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 21, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Sólo otra solución CSS para crear una barra lateral fuera del lienzo de navegación utilizando transiciones y transformaciones HTML y CSS sin formato.
Funcionamiento
Descargue el zip e importe la hoja de estilo OFF-Canvas. CSS en el encabezado de la página HTML.
<link rel="stylesheet" href="off-canvas.css">
La estructura HTML principal para la barra lateral de navegación y el elemento de desencadenador.
<div class="d-off-canvas-wrapper d-example"> <input type="checkbox" id="d-off-canvas-trigger"> <label for="d-off-canvas-trigger" class="d-off-canvas-trigger"> <span>Trigger</span> </label> <label for="d-off-canvas-trigger" class="d-off-canvas-helper"></label> <div class="d-off-canvas" data-comes-from="right"> Here goes your content. </div> </div>
Estilo de la barra lateral de navegación en el CSS.
.d-example .d-off-canvas {
max-width: 320px;
background-color: red;
} Estilo de la superposición de fondo cuando la navegación barra lateral está activa.
.d-off-canvas-helper {
background-color: black;
}
