Responsive Mobile Menu

Una de las cuestiones más importantes al construir nuestros sitio web adaptable es el menú.

Comenzamos construyendo nuestro menú como siempre, una lista desordenada:

Podemos usar un div o la etiqueta HTML5 <nav> </nav> para crear el bloque del menú, al fin y al cabo, le daremos el diseño en el estilo.

Nos surge la necesidad de crear la hoja de estilos y darle la estética a éste menú, además de vincularla en la cabecera:

  <head>  <link href="estilos.css" rel="stylesheet" type="text/css">  </head>    

Y en la hoja de estilos le damos el diseño al menú:

  .menu { 	display:block; 	position:relative; 	width:100%; 	padding:0px; 	margin:0 auto !important; 	text-align: center; 	line-height:19px !important; } .menu * {//Cualquier elemento dentro del div "menu" 	-webkit-tap-highlight-color:transparent !important; 	font-family:Arial; } .menu a { 	color:#ebebeb; 	text-decoration:none; }  .menu ul { 	display:block; 	width:auto !important; 	margin:0 auto !important; 	overflow:hidden; 	list-style:none; }    

Una vez construida esta parte, debemos empezar con la funcionalidad que daremos por JS. Concretamente tenemos que asegurarnos de vincular a la galería de jquery en la cabecera de nuestra página.

También debemos poner la sentencia que impide el zoom que por defecto realizan los navegadores móviles, puedes ver más información en el artículo de Navegadores Móviles: Meta viewport:

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>   

Y además tenemos que creaer nuestro propio archivo de js, el cuál enlazaremos también en la cabecera:

Ahora quedan las funciones y los estilos que tomarán cuando detecte que es un móvil dónde se está viendo la web, así que en las funciones establecerá esa relación, de cuál es el menú principal, qué estilos debe tomar. Lo pongo aquí:

  function responsiveMobileMenu() {	 		$('.menu').each(function() { 			 			 			 			$(this).children('ul').addClass('menu-main-list'); 			 			 			var $style = $(this).attr('data-menu-style'); 				if ( typeof $style == 'undefined' ||  $style == false ) 					{ 						$(this).addClass('graphite'); 					} 				else { 						$(this).addClass($style); 					} 	 			 			var $width = 0; 				$(this).find('ul li').each(function() { 					$width += $(this).outerWidth(); 				});  			 			if ($.support.leadingWhitespace) { 				$(this).css('max-width' , $width*1.05+'px'); 			} 			 			else { 				$(this).css('width' , $width*1.05+'px'); 			} 		 	 	}); } function getMobileMenu() { 	 	$('.menu').each(function() {	 				var menutitle = $(this).attr("data-menu-title"); 				if ( menutitle == "" ) { 					menutitle = "Menu"; 				} 				else if ( menutitle == undefined ) { 					menutitle = "Menu"; 				} 				var $menulist = $(this).children('.menu-main-list').html(); 				var $menucontrols =""; 				$(this).prepend("<div class='menu-toggled menu-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul>&ly;/div>");  		}); }  function adaptMenu() { 	  	 	$('.menu').each(function() { 			var $width = $(this).css('max-width'); 			$width = $width.replace('px', '');  			if ( $(this).parent().width() < $width*1.05 ) { 				$(this).children('.menu-main-list').hide(0); 				$(this).children('.menu-toggled').show(0); 			} 			else { 				$(this).children('.menu-main-list').show(0); 				$(this).children('.menu-toggled').hide(0); 			} 		}); 		 }  $(function() {  	 responsiveMobileMenu(); 	 getMobileMenu(); 	 adaptMenu();  	  	 $('.menu-toggled, .menu-toggled .menu-button').click(function(){ 	 	if ( $(this).is(".menu-closed")) { 		 	 $(this).find('ul').stop().show(300); 		 	 $(this).removeClass("menu-closed"); 	 	} 	 	else { 		 	$(this).find('ul').stop().hide(300); 		 	 $(this).addClass("menu-closed"); 	 	} 		 	});	  });  $(window).resize(function() {  	adaptMenu(); });    

Y finalmente incluimos los estilos que produce el JS:

  .menu .menu-main-list, .menu .menu-main-list li { 	margin:0px; 	padding:0px; } .menu ul li ul, .menu ul li ul li, .menu ul li ul li a { 	display:none !important; 	height:0px !important; 	width:0px !important; }  .menu .menu-main-list li { 	display:inline; 	padding:padding:0px; 	margin:0px !important; } .menu-toggled { 	display:none; 	width:100%; 	position:relative; 	overflow:hidden; 	margin:0 auto !important; } .menu-button:hover { 	cursor:pointer; } .menu .menu-toggled ul { 	display:none; 	margin:0px !important; 	padding:0px !important; } .menu .menu-toggled ul li { 	display:block; 	margin:0 auto !important; }   .menu.graphite .menu-main-list li a { 	display:inline-block; 	padding:8px 30px 8px 30px; 	margin:0px -3px 0px -3px; 	font-size:15px; 	text-shadow:1px 1px 1px #333333; 	background-color:#444444; 	border-left:1px solid #555555; 	background-image:url('menu-img/graphite-menu-bg.png'); 	background-repeat:repeat-x; } .menu.graphite .menu-main-list li a:hover { 	background-image:url('../rmm-img/graphite-menu-bg-hover.png'); } .menu.graphite .menu-main-list li:first-child a { -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .menu.graphite .menu-main-list li:last-child a { 	-webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .menu.graphite .menu-toggled { 	width:95%; 	background-color:#555555; 	min-height:36px; 	border-radius:6px; } .menu.graphite .menu-toggled-controls { 	display:block; 	height:36px; 	color:white; 	text-align:left; 	position:relative; 	background-image:url('menu-img/graphite-menu-bg.png'); 	background-repeat:repeat-x; 	border-radius:6px; } .menu.graphite .menu-toggled-title { 	position:relative; 	top:9px; 	left:15px; 	font-size:16px; 	color:white; 	text-shadow:1px 1px 1px black; } .menu.graphite .menu-button { 	display:block; 	position:absolute; 	right:15px; 	top:8px; }  .menu.graphite .menu-button span { 	display:block; 	margin-top:4px; 	height:2px; 	background:white; 	width:24px; } .menu.graphite .menu-toggled ul li a { 	display:block; 	width:100%; 	background-color:#555555; 	text-align:center; 	padding:10px 0px 10px 0px; 	border-bottom:1px solid #333333; 	border-top:1px solid #777777; 	text-shadow:1px 1px 1px #333333; } .menu.graphite .menu-toggled ul li a:active { 	background-color:#444444; 	border-bottom:1px solid #444444; 	border-top:1px solid #444444; }  .menu.sapphire .menu-main-list li a { 	display:inline-block; 	padding:8px 30px 8px 30px; 	margin:0px -3px 0px -3px; 	font-size:15px; 	text-shadow:1px 1px 1px #3e587b; 	background-color:#537b9f; 	border-left:1px solid #3e587b; 	background-image:url('menu-img/sapphire-menu-bg.png'); 	background-repeat:repeat-x; } .menu.sapphire .menu-main-list li a:hover { 	background:#3e597b; } .menu.sapphire .menu-main-list li:first-child a { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .menu.sapphire .menu-main-list li:last-child a { 	-webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .menu.sapphire .menu-toggled { 	width:95%; 	background-color:#537b9f; 	min-height:36px; 	border-radius:6px; } .menu.sapphire .menu-toggled-controls { 	display:block; 	height:36px; 	color:white; 	text-align:left; 	position:relative; 	background-image:url('menu-img/sapphire-menu-bg.png'); 	background-repeat:repeat-x; 	border-radius:5px; } .menu.sapphire .menu-toggled-title { 	position:relative; 	top:9px; 	left:15px; 	font-size:16px; 	color:white; 	text-shadow:1px 1px 1px #3e587b; } .menu.sapphire .menu-button { 	display:block; 	position:absolute; 	right:9px; 	top:7px; 	width:20px; 	padding:0px 7px 0px 7px; 	border:1px solid #3e587b; 	border-radius:3px; 	background-image:url('menu-img/sapphire-menu-bg.png'); 	background-position:top; }  .menu.sapphire .menu-button span { 	display:block; 	margin:4px 0px 4px 0px; 	height:2px; 	background:white; 	width:20px; } .menu.sapphire .menu-toggled ul li a { 	display:block; 	width:100%; 	background-color:#537698; 	text-align:center; 	padding:10px 0px 10px 0px; 	border-bottom:1px solid #3c5779; 	border-top:1px solid #6883a6; 	text-shadow:1px 1px 1px #333333; } .menu.sapphire .menu-toggled ul li a:active { 	background-color:#3c5779; 	border-bottom:1px solid #3c5779; 	border-top:1px solid #3c5779; } .menu.sapphire .menu-toggled ul li:first-child a {  	border-top:1px solid #3c5779 !important; }  .menu.minimal a { 	color:#333333; } .menu.minimal a:hover { 	opacity:0.7; } .menu.minimal .menu-main-list li a { 	display:inline-block; 	padding:8px 30px 8px 30px; 	margin:0px -3px 0px -3px; 	font-size:15px; } .menu.minimal .menu-toggled { 	width:95%; 	min-height:36px; } .menu.minimal .menu-toggled-controls { 	display:block; 	height:36px; 	color:#333333; 	text-align:left; 	position:relative; } .menu.minimal .menu-toggled-title { 	position:relative; 	top:9px; 	left:9px; 	font-size:16px; 	color:#33333; } .menu.minimal .menu-button { 	display:block; 	position:absolute; 	right:9px; 	top:7px; }  .menu.minimal .menu-button span { 	display:block; 	margin:4px 0px 4px 0px; 	height:2px; 	background:#333333; 	width:25px; } .menu.minimal .menu-toggled ul li a { 	display:block; 	width:100%; 	text-align:center; 	padding:10px 0px 10px 0px; 	border-bottom:1px solid #dedede; 	color:#333333; } .menu.minimal .menu-toggled ul li:first-child a { 	border-top:1px solid #dedede; }  

El resultado:

Menú web

Menú móvil

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s