110

7 pasos para crear un menú responsivo con CSS

41401Puntos

hace 4 meses

Curso de Responsive Design: Maquetación Mobile First
Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

El 50% del tráfico en internet se realiza desde dispositivos móviles, convirtiendo una prioridad el desarrollar frontend para smartphones, tablets y laptops. En este curso aprenderás todo lo necesario para crear proyectos que se adaptarán a las distintas vistas que utilicen tus usuarios

Seguramente a lo largo de tu vida como internauta has navegado por diferentes páginas web y al hacerlo desde tu computadora te has encontrado con un menú típico en la parte superior de la página, pero… Cuando decides entrar a esa misma página desde tu celular ves que ese menú ya no está y ha sido reemplazado por un botón con tres líneas que cuando lo presionas hace que mágicamente aparezca el menú que antes estaba oculto.

Bueno, déjame contarte que en realidad no aparece mágicamente y aquí la magia la hacemos tú y yo al dominar los lenguajes de la web.

¿Sabes cómo se crean estos menús? Algunas personas utilizan JavaScript para dotar de funcionalidades al botón y que al ser presionado muestre u oculte el menú. Pero tú y yo no lo haremos así, usar JavaScript para esto es cosa del pasado, lo ideal es hacer uso únicamente de CSS y bueno HTML, claro.

Vamos por pasos y empecemos a darle forma a este menú que te será de utilidad para seguramente más de uno de tus proyectos.

1. Creación la estructura base del HTML

Escoge tu herramienta favorita para iniciar con el proyecto, puedes emplear tu Visual Studio Code de confianza o quizás quieras probar CodeSandbox o incluso CodePen, el que elijas está bien, asegúrate de usar con el que más a gusto te sientas.

Si ya elegiste la herramienta que utilizaras para crear el menú, iniciemos creando la estructura básica para trabajar en HTML, la cual es la siguiente:

<htmllang="es"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Platzi: Menu responsivetitle>head><body>body>html>

Un truco para generar toda esta estructura de forma muy rápida es escribir ! seguido de un tab, pruébalo y verás como tu IDE crea todo de forma automática.

2. Creación la estructura HTML del menú

Con la estructura inicial del HTML lista, ahora hay que definir la estructura pero del menú. Recuerda que HTML es semántico y tiene su propia etiqueta para los menús de navegación, la cual es

Curso de Responsive Design: Maquetación Mobile First
Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

El 50% del tráfico en internet se realiza desde dispositivos móviles, convirtiendo una prioridad el desarrollar frontend para smartphones, tablets y laptops. En este curso aprenderás todo lo necesario para crear proyectos que se adaptarán a las distintas vistas que utilicen tus usuarios
Alex
Alex
alexcamachogz

41401Puntos

hace 4 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
9
42039Puntos

¿Por qué no te conocí antes? Guardado, aplicado, decretado y santificado.

Alex, eres la mejor

4
41401Puntos
4 meses

Jaja porque nos conocimos en el momento justo 💚 gracias May!

3
6247Puntos

Hola, tengo una duda ¿el rem no solo se usa en el font-size, verdad? porque yo lo he estado usando también para dimensionar los bloques o para los margin, padding, etc. Lo pregunto porque he visto que lo haz usado.

Soy nueva en esto, tienes más info de esto? gracias de antemano.

4
4752Puntos
4 meses

Hola Tania, el rem es una medida que depende del tamaño de fuente de la etiqueta html, para usarla es conveniente definirla en tu css ya que cada navegador puede utilizar un tamaño de fuente distinto por defecto.

Yo creo que es conveniente utilizar rem en tamaños de tipografía o en etiquetas que involucren tipografía, ya que el usuario puede modificar por el tamaño por defecto desde las opciones del navegador y podría romper el esquema de tu página.

No sé si me expliqué bien, 😛

2
6247Puntos
4 meses

Si en mi CSS la defino así:
html {
font-size: 62.5%
}
Para que la altura de cada elemento con rem sea relativa a 10px.

3
5541Puntos

Excelente articulo, muchas gracias

Feedback:
Solo hay un error en un parrafo, pones que es cambiado a none pero en realidad es a block

Dentro del esta declaración el display es cambiado a none y se indica que el margin-right debe de ser auto.

3
41401Puntos
4 meses

Gracias por notarlo! ya quedó corregido 😄

2

Uff super excelente aporte. Super bueno tener esto claro a la hora de construir un sitio web

2
3016Puntos

¡Genial! Ahora hacerlo directamente con CSS, evitara uso de Js.
Muchas gracias y agendare el curso de Maquetación Mobile First.

2
558Puntos

La forma como lo haces da la impresion que es muy facil 😃 Gracias, por me haber animado a probar aprender CSS 😉

2
41401Puntos
4 meses

El CSS es bello 💚 dale una oportunidad y cualquier duda por acá estamos 😄

2
1127Puntos

Cómo va a ser que lea esto hasta ahora, gran trabajo Alex, guardado porque me será de gran ayuda pronto.

2
23619Puntos

Gracias Alex, he guardado el artículo, mas adelante lo voy a necesitar.

1
41401Puntos
4 meses

Encantada de que te sea de utilidad 💚

1
11306Puntos

Por fin, he aprendido mucho de CSS en Platzi pero hacer un menú responsivo no lo sabia de todo! Muchas gracias 💚

1

Buena info, habrá que practicarlo para ponerlo aprueba en mi web y en otras mas.

1
3958Puntos

Excelente post.

Me ayudo a entender un poco más del funcionamiento de CSS, ahora toca aplicar lo aprendido 😄, muchas gracias ♥