Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Menú Responsivo

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 21 de Marzo de 2019
  • 2 min de lectura | Diseño Web
Menú Responsivo
El reproductor de video será cargado en breves instantes.

Vamos a mostraros cómo crear un menú responsivo que se muestra al completo, pero cuando la pantalla tiene menor tamaño, se agrupa y aparece un icono para mostrarlo o no mostrarlo.

Para ello creamos este código en HTML.


<html>
<body>
	<div class=”container”>
		<header><h1>Menú responsivo</h1></header>
		<nav>
				<div class=”icon”><i class=fa-fa-bars”</li></div>
				<div class=”menú_item”>Inicio</div>
				<div class=”menú_item”>Productos</div>
				<div class=”menú_item”>Servicios</div>
				<div class=”menú_item”>Clientes</div>
				<div class=”menú_item”>Nosotros</div>
				<div class=”menú_item”>Contactar</div>
			<nav>
			<main>
				<section></section>
				<section></section>
			</main>
		</div>
		<script>
			$function() {
				//Captura del evento para mostrar u ocultar
				$.(“.icon”).click(function() {
					$(“.menu_item”).toggle();
				});
				$(window).resize(function() {
					var anchura = $(this).width();
					if(anchura > 576) {
						$(“menú_item”).show();
					}
				});
			});
		</script>
	</body>
</html>

En la estructura HTML tenemos un contenedor general, que contiene una cabecera con un título y el menú, que va entre la etiqueta <nav>, que es una etiqueta semántica en HTML5 que indica que dentro hay un menú de navegación.

Dentro del mismo tenemos el icono tipo hamburguesa y todos los ítems del menú. Y a continuación tenemos la etiqueta <main>, que tiene dos secciones, una roja y otra verde.

Vamos a ver ahora los estilos necesarios para conseguir el menú que queremos mostrar.

Para hacer diseño responsivo hay que empezar siempre desde lo pequeño hasta lo grande, así que lo primero que tenemos que conseguir es el diseño del menú agrupado, en inglés es collapse. Esto lo hacemos creando este archivo CSS:


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

	<!-- Para el símbolo para mostrar el menú -->
	<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” />

	<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
</head>

*{
	box-sizing: border-box;
}

.container {
	margin: 20px auto;
	width: 80%;
}

/*Cabecera*/
header {
	text-align: center;
}

/*Menú Responsivo*/
nav {
	align-items: center;
	background-color: #666666;
	display: flex	;
	flex-wrap: wrap;
}

.menu-item {
	display: none;
	padding: 0.5em;
	text-align: center;
	width: 100%;

.menu-item:hover {
	background-color: white;
	color: #666666;
}

.icon {
	background-color: white;
	text-align: right;
	width: 100%;
	}

/*Secciones principales*/
main section {
	height: 400px;
}

section: nth-of-type(1) {
	background-color: green;
}

section: nth-of-type(2) {
	background-color: red;
}

@media screen and (min-width: 576px) {
	section {
	float: left;
	width: 50%;
}

.icon {
	display: none;
	}
.menu-item {
	display: inline-block;
	width: auto;
}

En el archivo de estilos comenzamos con la propiedad box-sizing: border-box para todos los elementos. Después centramos el contenedor, dándole un 80% de márgenes, y alineamos el texto en la cabecera, para que salga centrado.

El menú hacemos que sea flexible, centramos los ítems verticalmente y le damos la propiedad flex-wrap: wrap.

A los elementos del menú le damos el 100% de ancho para que aparezcan uno debajo del otro, los ocultamos inicialmente, le damos un poco de padding, centramos el texto y hacemos que cuando pase el ratón se ponga en blanco.

El icono lo alineamos a la derecha y le damos color blanco, y para que aparezca ese tipo de icono hemos utilizado librería fonts-awesome, una hoja de estilo que nos permite tener distintos iconos. Y tenemos también las dos secciones de 400 píxeles con los fondos verde y rojo.

Cuando pasamos de 576 píxeles, las secciones pasan a ocupar el 50% cada una, desaparece el icono y los ítems se muestran inline-block y anchura auto, utilizando una media query de CSS.

Lo único que hay que añadir además es un poco de JavaScript, para que cuando se haga clic en el icono aparezca o desaparezca el menú. En este caso hemos utilizado jQuery, aunque se puede utilizar JavaScript puro.

Cargamos jQuery y después creamos un script sencillo con el que capturamos un evento, cuando se hace clic en el icono se oculta muestran los ítems del menú, y con el evento resize en la pantalla hacemos que al pasar de los 576 pixeles se muestren los ítems del menú.

Aprende a crear páginas Web responsive utilizando HTML y CSS, y empieza a realizar páginas Web profesionales que se adapten a todo tipo de dispositivos y navegadores.

curso-diseño-responsive

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Curso de HTML5, CSS3 y JavaScript

Curso de HTML5, CSS3 y JavaScript

curso

Aprende lo básico para comenzar a programar sitios o aplicaciones web. En este curso verás HTML5, CSS3 y JavaScript básico.

Duración: 7 horas y 9 minutos

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 17 cursos:

  • Curso de Polymer
  • Curso de React JS
  • Optimización Web en el Navegador

y 14 cursos más!

Duración: 63 horas y 33 segundos

Responsivo VS Adaptativo

Responsivo VS Adaptativo

Diseño Web

20 de Marzo de 2019

En este video te explicamos las diferencias entre el enfoque de diseño responsivo y el enfoque de diseño adaptativo a la hora de desarrollar páginas web.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars