La navegación lateral de Hamburger responsive en Pure JavaScript-Omega. js
| Autor: | SelMaK-fr |
|---|---|
| Views Total: | 109 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 5, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Omega. js es un moderno sistema de navegación móvil de primer diseño para la Web.
Utiliza consultas de medios CSS para detectar el tamaño de la pantalla y contraer la barra de navegación normal en una barra lateral de hamburguesa (también conocida como navegación fuera de lienzo).
Pulse o haga clic en el botón de hamburguesa para alternar la navegación de la barra lateral deslizándose hacia fuera desde el borde de la pantalla.
See also:
Funcionamiento
Importe los archivos JavaScript y CSS de Omega en el documento.
<link rel="stylesheet" href="assets/css/omega.css"> <script src="assets/js/omega.js"></script>
Crea el HTML para la navegación de la barra lateral y listo.
<div id="omega"> <div id="omega-content"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="omega-links"> <a href="#" class="button">Link 1</a> <a href="#" class="button button-outline ">Link 2</a> </div> </div> <button id="omega-button">☰</button> <div id="omega-sidebar"> <div id="omega-sidebar-header"></div> <div id="omega-sidebar-body"></div> </div> <div id="omega-overlay"></div> </div>
