Menú de hamburguesa adaptable en CSS puro
| Autor: | dneustadt |
|---|---|
| Views Total: | 3,630 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 4, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Este es un menú de múltiples niveles adaptable a CSS que expande el botón de alternar de hamburguesa en un navegador desplegable horizontal en el escritorio o un menú lateral fuera de lienzo en el móvil.
Funcionamiento
Incluya la hoja de estilo principal FLYOUT-menu. CSS en la cabecera del documento.
<link rel="stylesheet" href="flyout-menu.css">
Incluya la hoja de estilo principal FLYOUT-menu. CSS en la cabecera del documento.
<input type="checkbox" class="menu-trigger">
Cree un menú multinivel a partir de listas HTML anidadas como estas.
<ul class="menu" role="menu"> <li class="start"> <a href="#"> <svg preserveAspectRatio="xMidYMid meet" focusable="false" viewBox="-5 -5 34 34"> <g><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"></path></g> </svg> </a> </li> <li> <a href="#">Level 1</a> <ul> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a> <ul> <li><a href="#">Level 4</a></li> <li><a href="#">Level 4</a></li> <li><a href="#">Level 4</a></li> </ul> </li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> </ul> </li> <li> <a href="#">Level 1</a> <ul> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> </ul> </li> <li> <a href="#">Level 1</a> <ul> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> </ul> </li> </ul>
Cree un elemento de superposición para el Nav fuera de lienzo en la vista móvil.
<div class="overlay"></div>
