Menú adaptable para dispositivos móviles con JS y CSS3 media queries

Vista prévia

Descripción

Una navegación móvil amigable y totalmente adaptable que utiliza JavaScript y CSS3 para convertir el menú horizontal en una lista desplegable conmutable cuando el tamaño de la pantalla es menor que un punto de interrupción específico.

Funcionamiento

Cree una navegación de sitio normal como esta:

<nav>

<div id="menu_button_wrapper">



<div id="menu_button">





Menu&nbsp;&nbsp;





<div id="hamburger">







<span></span>







<span></span>







<span></span>





</div>



</div>



<div class="clearfix"></div>

</div>



<ul id="menu_list">



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



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



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



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



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

</ul>
</nav>

Cargue el JavaScript del núcleo al final del documento.

<script src="js/script.js"></script>

Estilo de la navegación.

nav {

font-family: Helvetica;

text-align: right;

text-transform: uppercase;

background-color: #222;
}

nav ul {

width: 90%;

max-width: 1024px;

margin: 0 auto;

list-style-type: none;
}

nav ul li { display: inline-block; }

nav ul li a {

color: #9d9d9d;

font-weight: bold;

text-decoration: none;

display: inline-block;

padding: 1em;

box-sizing: border-box;
}

nav ul li a:hover { color: white; }

.current_page { background-color: black; }

.current_page a { color: white; }

#menu_button_wrapper { display: none; }

.hidden { display: none; }

Estilos CSS adaptables para pantallas más pequeñas.

@media (max-width: 760px) {


#menu_button_wrapper {


display: block;


padding: 1em;


color: #9d9d9d;


border-bottom: 1px solid #101010;


-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1);


box-shadow: 0 1px 0 rgba(255,255,255,.1);


margin-bottom: .5em;

}


#menu_button {


box-sizing: border-box;


float: right;


padding: .5em 1em;


border: 1px solid #333;


border-radius: 5px;


color: white;


-webkit-touch-callout: none;


-webkit-user-select: none;


-khtml-user-select: none;


-moz-user-select: none;


-ms-user-select: none;


user-select: none;

}


#menu_button:hover {


cursor: pointer;


background-color: #333;

}


#hamburger {


float: right;


padding-top: .15em;

}


#menu_button span {


display: block;


background-color: #fff;


width: 1.2em;


height: .15em;


border-radius: 1px;


margin-bottom: .2em;

}


nav ul {


width: 100%;


margin: 0 auto;


padding: 0;


box-sizing: border-box;

}


nav ul li { display: block; }


nav ul li a { width: 100%; }


}

Registro de cambios

08/18/2018

• reescribió completamente