Uno de los
elementos constantes en los sitios adaptables a dispositivos móviles es la navegación,
muchas veces nos encontramos con el problema de tener un menú desplegable y no
poder pasarlo completamente a dispositivos móviles por falta de espacio.
Es por eso
que en este tutorial aprenderemos como hacer un menú de navegación desplegable
a 1 nivel y adaptable a dispositivos móviles, abarcando el mismo espacio que
los menús tradicionales.
Aquí tienes
un demo del menú que estaremos haciendo:
Para este
tutorial te recomiendo que primero veas este tutorial similar, en el que
hacemos igualmente un menu adaptable a dispositivos moviles pero que no es
desplegable. (En este tutorial si lo haremos desplegable).
Recursos
Lo primero
que necesitamos es saber que recursos usaremos, para este menú usaremos HTML,
CSS y JavaScript para ser mas específicos JQuery, además de los iconos de
icomoon.
Link de
Jquery: http://code.jquery.com/jquery-latest.js
Link de
Icomoon: https://icomoon.io/
Tutorial como hacer un menú desplegable adaptado a dispositivos móviles (Responsive Design)
Estructura
Para comenzar con nuestro menú tenemos que crear la estructura, asi que creamos los siguientes archivos a nuestro proyecto:
- index.html -> El archivo donde crearemos la estructura de nuestro menu
- estilos.css -> El archivo donde le daremos estilos a nuestro menu
- main.js -> El archivo donde usaremos jquery para mostrar / ocultar el menú asi como los submenus.
Así que enlazamos nuestros archivos css, jquery y javascript a nuestro proyecto, tambien es importante que agregues los iconos de icomoon, si no sabes como hacerlo aquí tienes un tutorial:
Ahora si continuemos con el código, pero antes una cosa mas, no te olvides del meta viewport que sin el nuestro menú se vería igual en dispositivos móviles y en desktops. Aquí te lo dejo por si lo necesitas.
Meta Viewport
Nuestro
<head> debería quedar asi:
Y para la estructura de nuestro menu la dejaremos de la siguiente manera:
Es mucho código pero lo explicare, se divide en 2 partes, la primera parte es un div al que le aplicamos la clase llamada menu_bar, este div es el que incluye el botón, el botón rojo que podemos ver en la versión móvil y con el que mostraremos y ocultaremos el menu lateralmente.
La segunda parte es el menú, un típico menú hecho a base de listas, pero como pueden ver los elementos
li que tienen un submenu dentro tienen una clase llamada .submenú y dentro del li, y después del a esta otra lista, que es el sub menu, este sub menú tiene la clase .children
El codigo CSS es muy sencillo, aquí lo dejo:
* {
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {background:#FEFEFE;}
.menu_bar {
display:none;
}
header {
width: 100%;
}
header nav {
background:#023859;
z-index:1000;
max-width: 1000px;
width:95%;
margin:20px auto;
}
header nav ul {
list-style:none;
}
header nav ul li {
display:inline-block;
position: relative;
}
header nav ul li:hover {
background:#E6344A;
}
header nav ul li a {
color:#fff;
display:block;
text-decoration:none;
padding: 20px;
}
header nav ul li a span {
margin-right:10px;
}
header nav ul li:hover .children {
display:block;
}
header nav ul li .children {
display: none;
background:#011826;
position: absolute;
width: 150%;
z-index:1000;
}
header nav ul li .children li {
display:block;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.5);
}
header nav ul li .children li a {
display: block;
}
header nav ul li .children li a span {
float: right;
position: relative;
top:3px;
margin-right:0;
margin-left:10px;
}
header nav ul li .caret {
position: relative;
top:3px;
margin-left:10px;
margin-right:0px;
}
@media screen and (max-width: 800px) {
body {
padding-top:80px;
}
.menu_bar {
display:block;
width:100%;
position: fixed;
top:0;
background:#E6344A;
}
.menu_bar .bt-menu {
display: block;
padding: 20px;
color: #fff;
overflow: hidden;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
.menu_bar span {
float: right;
font-size: 40px;
}
header nav {
width: 80%;
height: calc(100% - 80px);
position: fixed;
right:100%;
margin: 0;
overflow: scroll;
}
header nav ul li {
display: block;
border-bottom:1px solid rgba(255,255,255,.5);
}
header nav ul li a {
display: block;
}
header nav ul li:hover .children {
display: none;
}
header nav ul li .children {
width: 100%;
position: relative;
}
header nav ul li .children li a {
margin-left:20px;
}
header nav ul li .caret {
float: right;
}
}
Este codigo es el que nos bastara para tener el diseño de nuestro menú, tanto en versión desktop como en versión movil, te recomiendo que veas el tutorial en video ya que en el explico a detalle cada parte del código.
Nota: Si pruebas este código css sin antes hacer el siguiente paso de javascript no veras ningún menú en la versión movil, porque en este código lo hemos desaparecido mediante la propiedad
right:0; Por lo que el menú existe, pero esta desplazado de derecha a izquierda un 100%.
Código Javascript (Jquery):
$(document).ready(main);
var contador = 1;
function main () {
$('.menu_bar').click(function(){
if (contador == 1) {
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
// Mostramos y ocultamos submenus
$('.submenu').click(function(){
$(this).children('.children').slideToggle();
});
}
Fuente: http://www.falconmasters.com/web-design/menu-desplegable-adaptable-dispositivos-moviles/
){kind=link}
0 Comentarios