Material inspirado lado OFF-Canvas NAV with Pure JavaScript
| Autor: | thomasxbanks |
|---|---|
| Views Total: | 1,940 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 8, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Un material de navegación inspirado en el diseño de materiales escrito en ES 6 que permite al usuario alternar un menú fuera del lienzo desde el borde, mientras que difuminan el contenido principal.
Funcionamiento
Instale el navegador lateral en su proyecto Web.
Incluya la fuente icónica de los iconos de materiales para los iconos.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Cree el menú fuera del lienzo en una lista de navegación.
<nav id="primary-nav"> <ul> <li><i class="material-icons">home</i>Home</li> <li><i class="material-icons">add</i>Add</li> <li><i class="material-icons">bubble_chart</i>Ideas</li> <li><i class="material-icons">insert_photo</i>Insert a Photo</li> <li><i class="material-icons">headset</i>Audio Options</li> <li><i class="material-icons">cast</i>Cast Options</li> <li><i class="material-icons">nature_people</i>Man Tree</li> <li><i class="material-icons">tag_faces</i>Are you Happy?</li> <li><i class="material-icons">settings</i>Settings</li> </ul> </nav>
Crear un botón de alternar menú de hamburguesa.
<button id="primary-nav-toggle" class="material-icons" aria-label="toggle navigation">menu</button>
