El menú desplegable responsive compatible con CSS para móviles puro

Vista prévia

Descripción

Un menú adaptable de CSS puro creado por < a href = "https://codepen.io/andornagy" target = "_ blank" rel = "noopener" > andornagy que cambia automáticamente a un menú desplegable conmutable en un punto de interrupción especificado basado en CSS3 media queries.

Funcionamiento

Cree un menú de navegación multinivel normal utilizando la lista desordenada anidada. Utiliza la casilla de verificación & técnica de etiqueta para alternar los submenús.

<nav>

<div id="logo">Your Logo here</div>

<label for="drop" class="toggle">Menu</label>

<input type="checkbox" id="drop" />

<ul class="menu">


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


<li>



 <!-- First Tier Drop Down -->



<label for="drop-1" class="toggle">Service +</label>



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



<input type="checkbox" id="drop-1"/>



<ul>




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




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




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



</ul>


</li>


<li>







 <!-- First Tier Drop Down -->



<label for="drop-2" class="toggle">Portfolio +</label>



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



<input type="checkbox" id="drop-2"/>



<ul>




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




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




<li>











 <!-- Second Tier Drop Down -->





<label for="drop-3" class="toggle">Works +</label>





<a href="#">Works</a>





<input type="checkbox" id="drop-3"/>





<ul>






<li><a href="#">HTML/CSS</a></li>






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






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





</ul>




</li>



</ul>


</li>


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


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


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


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

</ul>
</nav>

Los estilos CSS principales para el menú de navegación.

nav {

margin: 0;

padding: 0;

background-color: #254441;
}

#logo {

display: block;

padding: 0 30px;

float: left;

font-size: 20px;

line-height: 60px;
}

nav:after {

content: "";

display: table;

clear: both;
}

nav ul {

float: right;

padding: 0;

margin: 0;

list-style: none;

position: relative;
}

nav ul li {

margin: 0px;

display: inline-block;

float: left;

background-color: #254441;
}

nav a {

display: block;

padding: 0 20px;

color: #FFF;

font-size: 20px;

line-height: 60px;

text-decoration: none;
}

nav ul li ul li:hover { background: #000000; }

nav a:hover { background-color: #000000; }

nav ul ul {

display: none;

position: absolute;

top: 60px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {

width: 170px;

float: none;

display: list-item;

position: relative;
}

nav ul ul ul li {

position: relative;

top: -60px;

left: 170px;
}

li > a:after { content: ' +'; }

.toggle, [id^=drop] {
 display: none;
}

li > a:only-child:after { content: ''; }

Las consultas de medios CSS3 para definir cómo funciona el menú de navegación en dispositivos móviles (tamaño de pantalla < 768px).

@media all and (max-width : 768px) {

#logo {

display: block;

padding: 0;

width: 100%;

text-align: center;

float: none;
}

nav { margin: 0; }

.toggle + a,
 .menu { display: none; }

.toggle {

display: block;

background-color: #254441;

padding: 0 20px;

color: #FFF;

font-size: 20px;

line-height: 60px;

text-decoration: none;

border: none;
}

.toggle:hover { background-color: #000000; }

[id^=drop]:checked + ul { display: block; }

nav ul li {

display: block;

width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #000000; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #212121; }

nav ul ul {

float: none;

position: static;

color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {

display: block;

width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {

display: block;

width: 94%;
}

}