Navegación desplegable con respuesta mínima en CSS puro

Vista prévia

Descripción

Una navegación desplegable multinivel CSS pura que se convertirá en un menú de alternancia para dispositivos móviles en pantallas pequeñas.

Funcionamiento

Cree una navegación desplegable multinivel de una lista de NAV anidada como esta:

<nav>

<ul>


<li class="current"><a href="#">Home</a></li>


<li><a href="#">About</a></li>


<li><a href="#">Service</a></li>


<li class="has_children"><a href="#">Contact</a>



<ul>




<li><a href="#">Facebook</a></li>




<li><a href="#">Twitter</a></li>




<li><a href="#">Email</a></li>



</ul>


</li>


<li><a href="#">Portfolio</a></li>

</ul>
</nav>

Cree un botón de alternancia de menú con la entrada de casilla y la etiqueta.

<label class="toggle" for="toggle">&#9776; <span>Menu</span></label>
<input class="toggle" id="toggle" type="checkbox">

Los principales estilos CSS para la navegación desplegable en el escritorio.

nav ul ul { display: none; }

nav ul ul li { float: none; }

nav li { float: left; }

nav li a {

text-decoration: none;

display: inline-block;

margin: 10px 20px 5px 0;

padding: 8px 10px;
}

nav li a:link, nav li a:visited {

color: #646565;

background: #e8e9eb;
}

nav li a:link:hover, nav li a:visited:hover { color: black; }

nav li:hover ul {

display: inline-block;

position: absolute;
}

input.toggle, label.toggle { display: none; }

label.toggle {

font-weight: 900;

font-size: 1.2em;

padding: 10px 20px;
}

Convierta la navegación desplegable en un menú de alternancia cuando el tamaño de la pantalla sea inferior a 960px.

@media (max-width: 960px) {


nav { display: none; }


input.toggle,
.toggle span { display: none; }


input[type=checkbox]:checked ~ nav,
label.toggle {


display: block;


cursor: pointer;

}


nav li { float: none; }


nav li:hover ul {


display: block;


position: relative;

}


nav li ul { display: block; }


nav li ul li { margin-left: 20px; }


nav li a {


display: block;


margin-left: 20px;

}
}