Blog
Responsivo VS Adaptativo
En este video te explicamos las diferencias entre el enfoque de diseño responsivo y el enfoque de diseño adaptativo a la hora...
Diseño Web
Menú Responsivo
Aprende a crear un menú responsivo con este vídeo práctico.
Tabla de contenidos
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.
Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.
Compartir este post
También te puede interesar
