Mostrar/ocultar menú de navegación con JavaScript y CSS3

Vista prévia

Descripción

Un sistema de navegación adaptable para dispositivos móviles que utiliza consultas de medios CSS3 para detectar el tamaño de la pantalla y transforma la navegación horizontal normal en un menú Mostrar/ocultar con un botón de alternancia en pantallas pequeñas.

Funcionamiento

Cree un menú de navegación a partir de una lista de NAV.

<nav id="nav" role="navigation">

<div class="show_menu_btn"




data-target="#nav ul"




data-shown-text="Hide menu"




data-hidden-text="Show menu">



 Show menu

</div>

<ul>


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


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


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


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





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

</ul>
</nav>

Estilo del menú de navegación.

#nav ul { margin: 1em 0; }

#nav ul li { padding: 0.5em; }

#nav ul li:hover { background: #88b47f; }

#nav ul a {

display: block;

font-size: 1em;

color: #eee;

border-bottom: none;
}

Estilo del botón de alternancia de menú.

.show_menu_btn {

width: 35%;

margin: 0 auto;

padding: 0.3em;

cursor: pointer;

text-align: center;

background: #88b47f;
}

Los trucos de CSS3 para el menú de alternancia móvil.

@media screen and (max-width: 599px) {

.no-js .show_menu_btn { display: none; }

.no-js #nav ul { display: block; }

.js .show_menu_btn { display: block; }

.js #nav ul { display: none; }

}

@media screen and (min-width: 600px) {

.show_menu_btn { display: none; }

#nav ul { display: block; }

}

@media screen and (max-width: 599px) {

#nav ul { display: block; }

#nav ul li {

display: block;

text-align: center;

border-bottom: 1px solid #6f6f7a;
}
}

@media screen and (min-width: 600px) {

#nav { overflow: hidden; }

#nav ul li {

width: 7em;

float: left;

margin-right: 1em;
}
}

El JavaScript.

var show_menu = document.querySelector('.show_menu_btn');

show_menu.addEventListener('click', function(event) {


var target = document.querySelector(show_menu.getAttribute('data-target'));



if (target.style.display == "none") {




target.style.display = "block";




show_menu.innerHTML = show_menu.getAttribute('data-shown-text');



} else {




target.style.display = "none";




show_menu.innerHTML = show_menu.getAttribute('data-hidden-text');


}
});