Menú desplegable responsive Nav con Pure CSS

Vista prévia

Descripción

Una navegación multi-nivel CSS, totalmente adaptable, que contrae automáticamente el menú horizontal normal en un menú desplegable que se puede conmutable en pantallas pequeñas.

Funcionamiento

Cargue la hoja de estilo principal responsive-menu. CSS en la cabecera del documento HTML.

<link rel="stylesheet" href="css/responsive-menu.css">

Agregue los botones de menú y submenús a la navegación de la siguiente manera:

<nav class="nav-bar">

<label for="toggle" class="nav-bar__label">Menu</label>

<input type="checkbox" id="toggle" class="nav-bar__toggle">

<ul class="nav-bar__list">


<li class="nav-bar__list-item">




<a href="#" class="nav-bar__link">Menu Item 1</a>


</li>


<li class="nav-bar__list-item">




<a href="#" class="nav-bar__link">Menu Item 2</a>


</li>


<li class="nav-bar__list-item">




<a href="#" class="nav-bar__link">Menu Item 3</a>


</li>


<li class="nav-bar__list-item">




<label for="toggle-sub-1" class="nav-bar__sub-label">Menu Item 4</label>




<input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle">




<ul class="nav-bar__list">






<li class="nav-bar__list-item">








<a href="#" class="nav-bar__link">Menu Item 4.1</a>






</li>






<li class="nav-bar__list-item">








<a href="#" class="nav-bar__link">Menu Item 4.2</a>






</li>






<li class="nav-bar__list-item">








<a href="#" class="nav-bar__link">Menu Item 4.3</a>






</li>




</ul>


</li>


<li class="nav-bar__list-item">




<a href="#" class="nav-bar__link">Menu Item 5</a>


</li>

</ul>
</nav>