Como CREAR un MENÚ DESPLEGABLE con HTML CSS y JS
HTML-код
- Опубликовано: 28 июн 2021
- Aprende como crear un menú de navegación despegable animado, este menú será adaptable a dispositivos móviles, haremos este menú utilizando HTML CSS y Javascript.
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta para un 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger.com/alexcg
-----------------------------------------------------------------------------------------------------------------------------
CURSOS COMPLETOS:
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss
👨💻🎁 Diseño Web Desde Cero (Descuento) 👉 alexcgdesign.com/descuento-di...
-----------------------------------------------------------------------------------------------------------------------------
Sigue aprendiendo CSS:
💥 Lista de reproducción CSS: • 💻 CURSO CSS GRID LAYOU...
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss
-----------------------------------------------------------------------------------------------------------------------------
Descarga el proyecto: alexcgdesign.com/blog/menu-de...
✉️ Redes sociales:
Blog de desarrollo web: www.alexcgdesign.com/blog
Facebook: goo.gl/7o77tx
Linkedin: goo.gl/byCJnS
Github: github.com/AlexCGDesign 
Наука
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss
@Camilo Alejandro Lesmes Leguizamo No aún no agrego un proyecto así, pero el curso se sigue actualizando mes con mes, así que no lo descarto:)
@@AlexCGDesign Hola! Y cómo puedo colocar mi contenido debajo del menú? mi contenido se haya en un js
Bro lo que más me gusta de tu canal es que no usas framework, solo código puro.. eres un máster.. éxitos..
x2
Si eso de estar bajando librerias cansa
Gracias por no usar librerías, esto me ayuda a practicar
Que son librerías? Recién empiezo en esto, desconozco muchas cosas aún
@@pierojara6342 hola piero, libreria es un codigo guardado en la nube, y lo pueden usar varias veces, es util para acelerar el trabajo, pero... si usas las librerias de otros sin saber como funcionan es como copiar la tarea de otra persona, sin entender nada, eso perjudica mucho a largo plazo, muchas librerias seria como tener muchos libros en nuestro maletin sin entenderlos. y el maletin seria pesado, yo prefiero tomar notas y llevar solo mi cuaderno de NOTAS.
PREFIERO USAR POCO CODIGO EN MI WEB, asi optimizo mi pagina
@@pierojara6342 es como usar un plugins en wordpress 😁
@@pierojara6342 usar algo que ya esta hecho y ponerlo en tu codigo, "reinventar la rueda"
Lo que me gusta de este canal es que es programacion 100% sin framework! asi se aprende mas!
Capo siempre suelen complicarse para hacer los menus, pero lo explicas muy facil, tengo un proyecto de la universidad y solo me faltaba el menu, nueva suscriptora
Me sorprendí de que al final sí me saliera, gracias por explicar tan bien el por qué de cada código
Excelente post. Felicitaciones.. estoy cursando programación web y tus vídeos ayudan mucho.
Eres un crack… Siempre, busque la manera de hacer esto y lo que encontraba era muy horrible... Muchas gracias
Mil gracias, buscaba algo así para aprender un poco más de este mundo :D
Gracias bro, en un futuro retomare tus cursos, son geniales :'D
Que buena explicación, que genial sería un curso de Dom Javascript de este señor
Me encanto sin duda con estos conocimientos mejore mi logica de programacion muchas gracias!
genio!!! me salio :'3 un poco frustrante cuando no sale pero cuando revisas el codigo y encuentras la solucion que alegria da :3
Demn que buen vídeo, gracias!!
Darle a las librerías hace que pierdas algunos conceptos.
Genial razonamiento con la altura del menú!!! 😀 😀
Excelente logica de programacion amigo, muchas gracias por este aporte, realmente muy bonita esta barra de navegación.
me sorprende lo bien que lo explicas, recientemente te estoy siguiendo !!, consulta como seria cuando utilizando un framework como react o asi?
Eres un crack, bro. Saludos y esperamos el siguiente video. 🤘
una consulta ya opteniendo el menu como hago para agregar contenido a cada una de las secciones y que se muestren cuando las seleccionas?
buen video, me encanta cómo se anima la altura tan fácilmente
JUSTO LO QUE ME FALTABA GRACIAS BRO ...👍
Quedo buenisimo, se podria agregar para que el menu aparezca con un 3 lineas tipico y que ahi se muestre todo ? Asi no ocupa tanto lugar siempre desplegado.
Excelente video broooo me encanta tu contenido ❤️😎🤝
Excelente video! Mil gracias!!!
Agradezco tus vídeos. Me gustaría aprender de javascript, por si tienes videos. Saludos
Amigó gracias muy buen proyecto.
excelente hermanito gracias muy buen video para repesar algo css gracias
muchas muchas gracias, super chido el tutorial y me sirvio 100%
Gracias cruk ya me veo como desarrollador web
Brutal, gracias!! Saludos desde Puerto Rico!
Un saludo!
Muchas gracias amigo, excelente menu
Hola. Una vez hecho el menú con los 3 archivos htlm, css y js, cuál es el paso a seguir para incorporarlo a un sitio con wordpress que tiene un theme especifico?. Gracias.
Excelente tutorial y el menú está rre fachero, en que parte del body tengo que pegarlo para integrarlo en mi página y que quede arriba del bacground sin que aparesca arriba en el head o abajo al final de la página? Desde ya muchas gracias.
Hermoso amigo. Gracias
Excelente. Para cuando un responsivo para el?. Nos serviria de mucho. Te felicito!!
Sabes como poner un botón o algo para que cuando se pulse se oculte esa cosa que has hecho?
GENIAL ALEX GRACIAS POR EL VIDEO
Buenas tardes, quiero reabrir este vídeo porque me a servido de mucha ayuda para mi comienzo en programación. Pero tengo un problema, una vez tengo centrado todo como tu, en el submenú, en tu caso porque tienes "Estoy dentro" y tiene la misma cantidad de letras, pero yo que tengo diferentes se me ve centrado pero no centrado hacia la izq. pero debajo de su padre. Y luego me gustaría también delante de estas poner otros iconos para cada enlace del submenú, y que queden alineados y centrados. Gracias
oye Bro, me urge ver este video, en un ratito cuando llegue a casa lo veo, porque ahorita estoy en el trabajo!!. Saludos
Alex, estoy buscando la forma de cuando tenga un submenu abierto y toque otro elemento con submenu, pues se pueda cerrar el que se encuentra desplegado que solo haya un submenu desplegado ya me entiendes doy click se abre el abre el actual y se cierra el otro por si se encuentra desplegado
Que maravilla!
Muy buen video 👏👏
Sin duda css es mi talon de aquiles, ni javaScript se me complica tanto como css, comprare tu curso de css a ver que tal, ya que con otros cursos no he tenido el avance que quiero
Pruebalo, son 21 horas de contenido:))) un saludo!
Muchas gracias, el menú es elegante y su funcionamiento está muy bien explicado.
Me permito sugerirte que revises la pronunciación de "hidden" y "sibling". Cordiales saludos.
Muchas gracias por el consejo Alejandro, un saludo! Claro que lo haré
increíble!!!!!1 :0 muchas gracias.
Muchas gracias por compartir conocimiento bro 😊
A ti por verlo Ubaldo, un saludo!
Muy bueno!!
Gracias por el tutorial, fué de mucha ayuda. Por cierto hidden y sibling se pronuncial tal cual se escriben. Decir haiden y Saibling está mál pronunciado :v
Hola, tengo una duda por que al momento de hacer lo de js no me hace lo de las alertas dentro de los botones ?
Genial, amo aquí
Buen vídeo amigo, piensa en hacer las prácticas de tus vídeos en modo oscuro para no quemar tanto la vista! Un saludo.
Como hacés la rutina en javascript si tenés a parte un submenú de un submenú? Gracias.
Excelente vídeo... Gracias! Tendrás algún vídeo-tutorial sobre como hacer un menu, tal vez como el que acabas de desarrollar, pero que también sea responsive?
Claro, en este vídeo
ruclips.net/video/ivyIqmczxHU/видео.html
Puedes enseñarnos a hacer un Nav con submenus? Solo encuentro videos que lo hacen con listas y float y no me gusta para nada. Ojalá nos enseñaras a hacerlo de forma moderna
no sabias que tenias canal de face, estoy aprendiendo contigo. sados y exitos
Buen video loca,cuidese
Hey bro! que buen contenido, me gustaria saber como hacer para que al seleccionar un 2do menu, el primero colapse automaticamente. Saludos desde ARG
como puedo hacer para que el menu desplegable al seleccionar una opcion te redirija a la seccion especificada del html y se cierre el menu desplegable? yo tengo un menu hamburguesa para movil.
Gracias, crack.
Te ganaste un sub hermano
Buenas, y como le hago para poner cosas a la derecha, lo que agrego me sale abajo del menu.
Chingon!
Hola puede enseñar con nav con sumeno tenga mas elemnetos como los meses y pueda verse todos los meses al desplegarse
Hola q tal yo quiero meter un form dentro de un estilo acordeon se podr?
Deberias hacer un video de como hacer un sistema de pedidos, estaria bueno !!!!😀😀😀
Muy bueno el video y la explicacion, pero ahi un error que estoy intentando decifrar para poder corregirlo, y es que el menu no funciona con tabIndex, al pasar el tabulador por el menu, hace cosas raras y se desaparece, cosa que en experiencia de usuario es un poco molesto.
Pero muy bueno tu video 👍👍
hola quetal
Como se hace para que la ventana aparesca al lado del menu??
pregunta como accedo al contenido de los item de ese men
muy bueno
Excelente video. Graciaas. De casualidad sabes de como poner el menu en todas las pestañas de tu pagina? Me refiero a no estar copiando y pegando el menu en cada pagina C:
Hasta donde yo se, se debe hacer página por página, no existe otra forma.
puedes hacer otro pero usando react seria espectacular
Messirve 😎🤏 que buen video
Wenas noches a los que ven los videitos de Alex
pana sigo el tutorial al pie de la letra incluso cuando reviso el heigth que se nesecita por consola me funciona me en el condicional para agregar ya la animacion no funciona repito buso el error pero no lo enecuentro me puedes ayudar compartiendome el codigo
Gracias por el tutorial, pero porfa podrías hacer un formulario en la cual capture el nombre, su correo, asunto y su mensaje de la persona que está escribiendo, y cuando haga click en enviar todo esos datos los envíe a un correo destino por ejemplo que todos estos datos se vallan a un correo de Gmail , pero todo esto están en u servidor ya publicado con un subdominio y que está corriendo en docker usando Nginx como proxy reverso
Tengo una pregunta en el minuto 11:30 estas enviando los botones a la izquierda pero el codigo de la linea 40 a la 44 no se hubiera simplificado si solo le dieras un text-alaing: start; de todas manera hare las prueba porque descargue el codigo.
Puedes pasarme el código por favor 🙏🏻
Excelentes tutoriales Alex, una consulta adicional a ver si me ayudas con esto: como podría hacer para que al desplegar este menú, se cierre automáticamente otro previamente desplegado, de manera que solo pueda verse desplegado uno a la vez. gracias de antemano.
Ni te respondió. Yo estoy buscando lo mismo. Tengo un menú con submenú y a la vez un submenú de submenú. Tenés alguna idea de como hacer la rutina en java?
muy buenos videos bro, ya te sigo hace algún tiempo. tengo una duda, sería menú despegable o desplegable? saludos.
Hola Andy, sí error mío jajaja es desplegable, una disculpa.
@@AlexCGDesign jaja vale tranquilo bro, saludos.
buen tuto
TE AMO
Excelente Curso, Links de los materiales caído amigo
Amigo disculpa la pregunta,pero hay que saber programar todo de memoria? Osea entiendo los codigos pero no puedo o me cuesta mucho hacerlo sin ver codigo ajeno,entonces mi duda es hay que saberse todos estos comandos de memoria? Ya que en todo tutorial siempre veo que el que enseña no mira recurso externo
Hola Cristian, ¿Cómo estás?
A veces detrás de cámaras solemos ver código y otras veces sabemos que hacer porque lo hicimos previamente, no hay que saber todo de memoria, aunque con el tiempo de practica aprendes mucha sintaxis de memoria, es cuestión de constancia y paciencia:)
@@AlexCGDesign muchas gracias
GENIO
pudiera que eso se puede hacer con css, solo que no hay algo que no permite calcular dinámicamente el ancho de la capa para que aplique la animación suave si lograras sintetizador en css seria genial
Exacto, pero si estaré buscando maneras de hacerlo dinamicamente:))
Excelente video, me gustaria saber si alguien puede ayudarme, como enlazar ese menu a paginas para que se abran a al derecha del menu sin que desaparezca... si alguien sabe porfavor que me ayude... saludos y buenas noches!
Puedes hacerlo responsive?
Se podría eliminar el js con el clásico truquito de usar un label y un input checkbox display hidden
Por donde te podria contactar
es responsive?
bro no me sale, no se que error tengo
Chido
Hola puedes subir un vídeo de Hacking ético porfa
no encuentro los asset
EL comportamiento de los elementos dentro de un contenedor/caja de me dificulta mucho.... :( Posicionarlos y demás... Algún consejo maestro?:(
Siii, te recomiendo este video:)
ruclips.net/video/-CqPM1x1T2Y/видео.html
Seguí paso por paso todo y no me salio nada :'(
no estan los archivos
PUCHA!!!!!!!!!!!, y yo diciendo "Desplegable" toda mi vida :'( , Gracias por tus tutoriales ;)
"DESPLEGABLE" Así mismo se escribe y se dice !
@@joanramirezm.6874 A éso me refría jjejejeje
Lo observe detenidamente
👏🙏👍
Creo que se podía crear sin incluir javascript no, únicamente CSS Puro!?
Si claro, se podría:))