Como CREAR un MENÚ DESPLEGABLE con HTML CSS y JS
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- 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....
-----------------------------------------------------------------------------------------------------------------------------
CURSOS COMPLETOS:
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.c...
👨💻🎁 Diseño Web Desde Cero (Descuento) 👉 alexcgdesign.c...
-----------------------------------------------------------------------------------------------------------------------------
Sigue aprendiendo CSS:
💥 Lista de reproducción CSS: • 💻 CURSO CSS GRID LAYOU...
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.c...
-----------------------------------------------------------------------------------------------------------------------------
Descarga el proyecto: alexcgdesign.c...
✉️ Redes sociales:
Blog de desarrollo web: www.alexcgdesi...
Facebook: goo.gl/7o77tx
Linkedin: goo.gl/byCJnS
Github: github.com/Ale...
![[[OFFICIAL MV]] เอิ้นขวัญให้อ้าย- อ๊ะอาย สกุณาพร | ค่ายเพลงเป็นหนึ่ง](http://i.ytimg.com/vi/83x6L3X3qh0/mqdefault.jpg)
📘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!
Excelente post. Felicitaciones.. estoy cursando programación web y tus vídeos ayudan mucho.
Me sorprendí de que al final sí me saliera, gracias por explicar tan bien el por qué de cada código
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
una consulta ya opteniendo el menu como hago para agregar contenido a cada una de las secciones y que se muestren cuando las seleccionas?
Sabes como poner un botón o algo para que cuando se pulse se oculte esa cosa que has hecho?
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!
Excelente video y un gran plus la posibilidad de descargar el proyecto, muchas gracias
Eres un crack… Siempre, busque la manera de hacer esto y lo que encontraba era muy horrible... Muchas gracias
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?
Que buena explicación, que genial sería un curso de Dom Javascript de este señor
Brutal, gracias!! Saludos desde Puerto Rico!
Un saludo!
Mil gracias, buscaba algo así para aprender un poco más de este mundo :D
Me encanto sin duda con estos conocimientos mejore mi logica de programacion muchas gracias!
Gracias bro, en un futuro retomare tus cursos, son geniales :'D
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.
Excelente video broooo me encanta tu contenido ❤️😎🤝
JUSTO LO QUE ME FALTABA GRACIAS BRO ...👍
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
Genial razonamiento con la altura del menú!!! 😀 😀
Eres un crack, bro. Saludos y esperamos el siguiente video. 🤘
pregunta como accedo al contenido de los item de ese men
Muchas gracias por compartir conocimiento bro 😊
A ti por verlo Ubaldo, 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é
Excelente video! Mil gracias!!!
Gracias cruk ya me veo como desarrollador web
excelente hermanito gracias muy buen video para repesar algo css gracias
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.
buen video, me encanta cómo se anima la altura tan fácilmente
muchas muchas gracias, super chido el tutorial y me sirvio 100%
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.
Agradezco tus vídeos. Me gustaría aprender de javascript, por si tienes videos. Saludos
Hermoso amigo. Gracias
Muchas gracias amigo, excelente menu
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
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
th-cam.com/video/ivyIqmczxHU/w-d-xo.html
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.
oye Bro, me urge ver este video, en un ratito cuando llegue a casa lo veo, porque ahorita estoy en el trabajo!!. Saludos
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
GENIAL ALEX GRACIAS POR EL VIDEO
increíble!!!!!1 :0 muchas gracias.
Amigó gracias muy buen proyecto.
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.
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
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
Genial, amo aquí
Muy buen video 👏👏
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.
Que maravilla!
Como hacés la rutina en javascript si tenés a parte un submenú de un submenú? Gracias.
no sabias que tenias canal de face, estoy aprendiendo contigo. sados y exitos
Muy bueno!!
Excelente. Para cuando un responsivo para el?. Nos serviria de mucho. Te felicito!!
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.
Hola, tengo una duda por que al momento de hacer lo de js no me hace lo de las alertas dentro de los botones ?
Buenas, y como le hago para poner cosas a la derecha, lo que agrego me sale abajo del menu.
Messirve 😎🤏 que buen video
TE AMO
Hola q tal yo quiero meter un form dentro de un estilo acordeon se podr?
Chingon!
Buen video loca,cuidese
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.
Wenas noches a los que ven los videitos de Alex
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:))
Hey bro! que buen contenido, me gustaria saber como hacer para que al seleccionar un 2do menu, el primero colapse automaticamente. Saludos desde ARG
Te ganaste un sub hermano
Excelente Curso, Links de los materiales caído amigo
hola quetal
Como se hace para que la ventana aparesca al lado del menu??
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?
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 🙏🏻
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
Deberias hacer un video de como hacer un sistema de pedidos, estaria bueno !!!!😀😀😀
Gracias, crack.
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 👍👍
puedes hacer otro pero usando react seria espectacular
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
muy bueno
no encuentro los asset
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
bro no me sale, no se que error tengo
Seguí paso por paso todo y no me salio nada :'(
GENIO
Lo observe detenidamente
Puedes hacerlo responsive?
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:)
th-cam.com/video/-CqPM1x1T2Y/w-d-xo.html
Hola puedes subir un vídeo de Hacking ético porfa
buen tuto
PUCHA!!!!!!!!!!!, y yo diciendo "Desplegable" toda mi vida :'( , Gracias por tus tutoriales ;)
"DESPLEGABLE" Así mismo se escribe y se dice !
@@joancodedev A éso me refría jjejejeje
Creo que se podía crear sin incluir javascript no, únicamente CSS Puro!?
Si claro, se podría:))
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!
no estan los archivos
7:37
lo ObservAs¡¿
Chido