✅ Cómo CREAR un MENU HORIZONTAL con HTML y CSS RESPONSIVE con JAVASCRIPT | Eduardo Fierro Pro

Подписаться 34 тыс.

Просмотров 21 тыс.

50% 1

Hoy vamos a ver cómo hacer un MENU HORIZONTAL EN HTML y CSS RESPONSIVE con JAVASCRIPT donde veremos desde la teoría del funcionamiento de un menú horizontal hasta el Javascript del menú horizontal desplegable añadiendo incluso el icono de hamburguesa.
🔖 TODOS los vídeos de esta SERIE
✔️ Menú horizontal con HTML, CSS y Javascript • ✅ Cómo CREAR un MENU H...
✔️ Menú horizontal con HTML, SCSS y TypeScript • 🔵💅Cómo CREAR un MENU H...
✔️ Menú horizontal en BEM con HTML, SCSS y TypeScript • 💅 Cómo CREAR un MENU H...
✔️ Menú horizontal en SUITCSS con HTML, SCSS y TypeScript • ⬛️ SUITCSS para saber ...
✔️ Menú horizontal en BEM con ANGULAR • 🅰️ Cómo hacer un MENU ...
✔️ Menú horizontal en SUITCSS con REACTJS • ⚛️ Cómo hacer un MENU ...
😊Vídeos relacionados
✔️Reset de CSS • 🚀Reset CSS: Modo PRO 😏...
✔️Mixins de SCSS • 🚨 MIXIN en SCSS: Mixin...
👨🏻‍💻DESCARGA en Github
github.com/eduardofierropro/c...
📕DESCARGA el PDF
github.com/eduardofierropro/c...
Si te ha gustado el vídeo dale a like, suscríbete y ¡dale a la campanita! 😊
_______
📹Otros vídeos de mi canal
😊 Vídeos recomendados • 👉Vídeos recomendados
🚀ROADMAP Desarrollo WEB • 🔎ROADMAP de un DESARRO...
🤯 Explicando Web de forma diferente • 😱Explicando conceptos:...
🙇🏻 Construyendo uns Slider, Acordeón, Tabs... • 🤯 Construyendo un Carr...
_______
📚¿Estás buscando un Curso, Máster o Bootcamp sobre desarrollo web?
Soy profesor en la escuela CEI donde imparto Cursos y Másters sobre desarrollo web donde puedes obtener un descuento del 5% en el precio del curso usando el código embajador.eduardofierro
¡Pide información sobre los cursos donde soy profesor desde este enlace!
👉cei.es/?ref=eduardofierropro
_______
✅ Directos en Twitch: / eduardofierropro
✓ ¡Apóyame en RU-vid! ru-vid.com...
✓ Trucos rápidos en TikTok / eduardofierro.pro
✓ Podcast sobre desarrollo web anchor.fm/eduardofierropro
✓ Programación en Instagram / eduardofierro.pro
✓ Códigos para descargar en Github github.com/eduardofierropro
✓ Noticias sobre web en Twitter / 1325827794627129344
✓ Mi web eduardofierro.pro
_______
🔥Enlaces a productos de mi setup
🖥 Samsung Space Monitor 27" amzn.to/3mABk0R
🖥 LG Ultrawide 25" amzn.to/3XrMwOp
💪 Brazo EarGear amzn.to/3YPPnBF
🖥 Mac Studio M1 Max amzn.to/3xlwqez
💻 MacBook Pro 15" 2019 amzn.to/2XEdeGL
⚡️ Mesa elevable Flexispot amzn.to/3xlwqez
⌨️ HHKB Hybrid Type-S amzn.to/3xlwqez
⌨️ Logitech G915 amzn.to/2Tzy1da
🖱 Logitech MX Master 2 amzn.to/2WZlUZa
💡 Elgato Key Light Air amzn.to/2TzxPus
💡 Elgato Right Light amzn.to/3tWoM62
🎛 Elgato Stream Deck XL amzn.to/3d1cy4n
🎙 Elgato Wave 3 amzn.to/2QsPLbU
🎙 Elgato Wave Pop Filter amzn.to/33ONkU1
✔️ Elgato Soporte Teléfono amzn.to/2RTZatj
🎧 Beats Wireless Studio 3 amzn.to/3YOtDWT
✔️ Corsair ST100 RGB premium amzn.to/3d3hiZY
📱 iPhone 13 Pro amzn.to/3lsPRPI
📱 Motorola G amzn.to/2TzYcjO
📱 Samsung M11 amzn.to/3uTwNKh
🪑 Drift dr500bamzn.to/3kaEHtE
Enlaces en los productos en mi web: eduardofierro.pro/workspace
______
Psss... Si has llegado hasta aquí eres un auténtico CRUCK de la vida. ¿Vemos cuántos somos poniendo "de frontends!!" en los comentarios? 😏
______
Capítulos:
00:00 Introducción
00:44 ¿Qué es un menú móvil?
01:05 ¿Qué es un menú hamburguesa?
01:25 Ejemplo de un menú móvil
01:40 Teoría del funcionamiento de un menú horizontal
02:15 HTML de un menú horizontal
03:45 Añadiendo el icono de hamburguesa
04:48 CSS de un menú horizontal
09:35 CSS para la animación en Javascript
10:15 Javascript de menú horizontal desplegable
13:05 jQuery de menú horizontal desplegable
14:05 Aplicando la animación mediante CSS
15:00 Centrando el menú en responsive mediante CSS

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 56

@EduardoFierroPro 2 года назад

🔖 TODOS los vídeos de esta SERIE: ✔ Menú horizontal con HTML, CSS y Javascript ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_M0K_q617Kc.html ✔ Menú horizontal con HTML, SCSS y TypeScript ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hiFle5lBqck.html ✔ Menú horizontal en BEM con HTML, SCSS y TypeScript ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UOzIhbzPcPk.html ✔ Menú horizontal en SUITCSS con HTML, SCSS y TypeScript ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_85lzdSDmtw.html ✔ Menú horizontal en BEM con ANGULAR ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yMo7nChHa8o.html ✔ Menú horizontal en SUITCSS con REACTJS ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bS2UJmROxCE.html ____ 😊 Vídeos recomendados ru-vid.com/group/PLJpymL0goBgEzi6Z5AQysL8B-PNeovcjj 🚀ROADMAP Desarrollo WEB ru-vid.com/group/PLJpymL0goBgFzvCuhEJJ29-x1H_Uo5Esv 🤯 Explicando Web de forma diferente ru-vid.com/group/PLJpymL0goBgFK8kBgMuAAGfUEuP83Q1Ab 🙇🏻 Construyendo un Slider, Acordeón, Tabs... ru-vid.com/group/PLJpymL0goBgFXN27jElLCmysKQboKW7uW

@zorem99 10 месяцев назад

Muy preciso en todo, bien explicado, muchas gracias ;D

@Seforagf Год назад

Me estás haciendo la vida más fácil con todo lo que enseñas, la primera vez que escuché este vídeo pensé que era muy complejo pero luego viendo los otros vídeos de tu colección he visto que es al revés, más simple, solo hay que saber

@EduardoFierroPro Год назад

Muchas gracias por el comentario Sefora!! 😊

@6823junior 2 года назад

Excelente!!! gracias por todo lo compartido, vale oro!!

@EduardoFierroPro 2 года назад

Muchísimas gracias Nestor!! 😊

@DavidTG7 2 года назад

Hola, apenas llego al canal. Te agradezco enormemente por subir estos contenidos, me estan ayudando muchisimo!

@EduardoFierroPro 2 года назад

Hola David!! Muchísimas gracias por tu comentario y por el apoyo!! 😊

@aldairgonzalez253 2 года назад

Buenísimo, como siempre explicando cada detalle👌🏼

@EduardoFierroPro 2 года назад

Muchas gracias Aldair por el comentario!! 😊😊

@wichoishimura3268 Год назад

Hola bro! Muchísimas gracias por este tutorial, lo hice tal cual pero usando BEM y en menos de 1hr pude hacer mi menú ¡completamente responsive! Te has ganado un nuevo sub.

@EduardoFierroPro Год назад

Vaaaaamos!!! poco a poco se consigue!! 😊

@infindgiti5576 Год назад

Muchas gracias!

@EduardoFierroPro Год назад

A tí!!! 🎉

@ezequielgarcia4609 2 года назад

Que bueno, me encanta ver trabajar, eres genial, y estoy ansioso por verte con typescript, angular y react js, en entorno más profesional 😜. Aprendo bastante contigo 👏🏼👏🏼👏🏼. Saludos desde Jerez. Un saludo

@EduardoFierroPro 2 года назад

Muchísimas gracias Ezequiel!! 😊

@juanfranciscocastillo5149 2 года назад

Muchas gracias por el aporte. Muy buena la explicación.Cruck!! 🙋🏻‍♂️🧠👍

@EduardoFierroPro 2 года назад

Muchísimas gracias Juan!!! Tú sí que eres un cruck!! 😊

@isaiasmeza9298 2 года назад

Cruck buenísimo más claro ni el agua!! Estaría bueno que hicieras este tipo de navbar Mobile que se adapta a toda la pantalla y que no afecte el scroll del body, JJaja no he podido solucionar ese problema, no me pierdo ni uno de tus videos.

@sergiomunoz8759 2 года назад

Tremendo video edu, te la sacaste

@EduardoFierroPro 2 года назад

Tremendo comentario Sergio, te la sacaste

@josuedavidkennedymamani3576 2 года назад

el video que necesitaba

@EduardoFierroPro 2 года назад

Pues a darle!! 😊

@LiftAndC0de 2 года назад

men eres un rpa gaaste mi suscripcion y mi like, habia intentado con un monton de videos anteriores que aparecian hay en mas visto pero filtre por tiempo me salio usted y me funciono ya enia 2 dias intentando esto ajajjaajja en otros videos hacia tal cual y en el navegador en js me decia que estaba desfaado es decir viejo ese comando y no me funcionaba gracias jajaja

@EduardoFierroPro 2 года назад

Muchas gracias Hey Code!! Pues ahora a usarlo!! 😊

@TizianoMontenegro07 2 года назад

Muy buen video 👌

@EduardoFierroPro 2 года назад

Muchas gracias Tizi!! 😊

@srCharli Год назад

Buenas maestro, mil gracias! muy bien explicado y un resultado genial. Tras muchos intentos de hacer una versión mas personal agregando un submenu sigo sin poder hacerlo. Podrías explicar así rápidamente como poder hacer menu con submenu? :) thanks!! {} :)

@Not_borago Год назад

Grande bro

@EduardoFierroPro Год назад

Gracias bro!

@estebansierragoyeneche5030 Год назад

Eduardo, muy bueno el video, muy bien explicado, solo tengo una duda, por que pusiste el script arriba de de todo cuando en muchos otros canales se recomienda ponerlo antes de finalizar el body?

@gonzalocivita Год назад

Hola. Cómo se podría lograr que cuando se hace click en el icono del menú hamburguesa, este se trasforme en un cruz.? Tengo ambos iconos y no logro que el de menú hamburgesa desaparezca cuando el menú se encuentra desplegado.

@gonzaloivangonzalez616 Год назад

SOS GOD

@EduardoFierroPro Год назад

GOOOOOOOOOOOOOOOOOD

@pabloalberione6670 Год назад

Buenas! Cuando achico la pantalla a 480px el nav no baja, se queda donde está ocupando el 100% :S, puse el reset completo, lo copié desde GIT. Excelente contenido! Saludos desde AR

@serpentuario 10 месяцев назад

Te dejo un like y me suscribo, lástima no incluiste un click fuera del menú para que se repliegue este mismo, así quedaría redondito

@gladiscorrea3892 8 месяцев назад

tu clase muy interesante super didactico , pero mi distraigo un poco por lo guapo que eres . :)

@keiberrodriguez5075 Год назад

Edu, me ha saltado una duda, recuerdo que cuando comenzaba con Vscode, los cambios en la ventana del navegador se veían así de fluidos, cómo puedo hacer para que eso pase de nuevo ? 😬

@alexismichellerodriguezlar630 Год назад

Excelente contenido. Pero me surgió una pregunta. Al momento de inspeccionar el ul cuando no esta activado en el diseño responsive salen los elementos si pasamos el mouse encima. ¿Hay alguna forma de que no salga en el inspeccionador? Vi que con diplay none y bloc pero no los aparece de golpe y los desaparece igual Gracias crck

@victormanuelmartinezgarrid9964 Год назад

Eduardo soy principiante en esto de la programacion, como puedo hacer que varios botones se desplieguen como el primer ejemplo que realizo, ya que no se mucho de javascript

@bluefutbol1515 2 года назад

Profesor ya tengo dudas llevo viendo sus videos y recomienda hacer mobile firts, pero aqui hace el menu con desktop firts no entiendo de verdad :/, tiene algún ejemplo de como hacerlo en mobile primero ??

@laurasilva4286 Год назад

Cuando presiono el botón si tengo contenido debajo se mueve todo el contenido ¿Cómo hago si quiero que no le afecte a lo que está debajo? Y otra cosa, toggle no esta deprecated?

@unargentinoquepiensa7428 Год назад

bro una consulta hice el tutorial, pero le agregue una imagen de fondo. El tema es q cuando el menu se despliega la imagen se baja y me gustaria solucionar eso, me puedes ayudar?

@jeremiasbentancor7154 2 года назад

Muy buen video, tenes en tu canal un video de cómo hacer una página responsive?

@EduardoFierroPro 2 года назад

Pues mira aquí tienes un vídeo sobre 3 hablando sobre el tema y viendo código en Responsive 😊👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-qzyW_Zf0bbk.html Por otro lado puedes ver cómo lo aplico en proyectos como estos: ✓ Programando DC Shoes USA ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nUu--X0mmlo.html ✓ Programando un Portfolio ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-XAwXz2w3vlg.html ✓ Programando Google Stadia ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LtyWVeFE4uM.html ✓ Programando Netflix ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WCUASu4V258.html ✓ Programando Instagram con Yoda ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JWV2rgTnbFQ.html ¡Espero que te resulte de utilidad este comentario!😊

@jeremiasbentancor7154 2 года назад

@@EduardoFierroPro muchas gracias !!!

@matiaslobosg 2 года назад

Hola! Quería saber si cual seria la forma de crear varios botones con distintos menú, pero que al hacer clic en un botón (hamburguesa 1 por ejemplo) los otros se oculten. Ojalá me haya expresado bien. Saludos!

@matiaslobosg 2 года назад

Lo logré hacer, pero creo que es la manera menos eficiente: Defino las constante y selecciono el id del div a mostrar const menuMovil1 = document.querySelector('#menumovil1') const menuMovil2 = document.querySelector('#menumovil2') Al presionar el boton 1, mostrará el menuMovil1 y el resto le quitará la class activo function btnMovil1(){ menuMovil1.classList.toggle('activo'); menuMovil2.classList.remove('activo'); function btnMovil2(){ menuMovil1.classList.remove('activo'); menuMovil2.classList.toggle('activo'); Saludos

@santyagocano2734 10 месяцев назад

bro tengo un problema es que al momento de recargar la pagina en el celular se abre automaticamente el menu que puedo hacer

@joan4440 Год назад

Y como hacer el mismo menú para escritorio, porque muchas páginas también usan el mismo estilo, osea que no desaparezca el botón hamburguesa.

@dianacampos5430 Год назад

Hola Eduardo!! sabes como solucionar el problema de que al momento de desplegar la navegación hacia abajo, el contenido de la página no se mueva hacia abajo??? Amo tus videos, son tan detallados que no se te escapa nada!!!

@romancavanna1464 Год назад

Position fixed creo al contenedor padre

@edgar1710 4 месяца назад

jq no es obsoleto es decir ya deberia ser js en todo

@Seforagf Год назад

No sé porqué el firefox y el chrome algunas cosas de reset Pro me las implementan bien y otras, como el transform, o el modo oscuro no. Revisé todo el código varias veces, la sintaxis, además el reset lo descargué de su guithub y lo revisé a la vez que veía su vídeo. Lo tomaré de referencia pero quitaré lo que me de problemas hasta que vea otra solución

@EduardoFierroPro Год назад

Bien hecho Sefora!! Como bien comento en el vídeo teórico de Reset, es una base y debemos de modificarlo y adaptarlo en base a nuestro proyecto como comento aquí 😊👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-bXqPNoYFK8w.html ¡Te agradecería que me comentases si se resuelve el día de mañana! Un saludo!