Menu desplegable responsive 2021 con HTML, CSS y JS
ฝัง
- เผยแพร่เมื่อ 11 ต.ค. 2024
- Hemos actualizado uno de nuestros tutoriales usando ahora Javascript en vez de Jquery
Curso en Udemy: www.udemy.com/...
Síguenos en facebook: / jygproyectosweb
Únete a nuestro grupo: / 1639298496227219
Servidor de discord: / discord
Síguenos en Twitter:
/ jygproyectosweb
Apóyanos con un me gusta y compartiendo este video, muchas gracias a todos :)
Excelente tutorial! Ahora amigos, a la hora de implementar el menú, se oculta el contenido pero no el elemento. Por lo tanto si quieres ocultar el elemento para que no tengas un espacio en blanco en medio de tu página, te recomiendo lo siguiente.
settea un height en tu menú de 0px y en ".show" settea exactamente el heigth que necesitas, junto al margin del menú el elemento queda oculto y la animación funciona.😀
Hola. Tengo un problema con el menú que quiero resolver pero no se como lograrlo y no se si te refieres al mismo problema. Pero cuando el menú está en responsive, oculto y en tu página tienes algunos links en algún lugar determinado, no puedes hacer clic en ellos a menos que bajes la página más abajo de donde termina el menú. Es como si hubiera una capa transparente bloqueando los links.
Te agradecería que me puedas ayudar con ese detalle por favor.
@@cristianfredes9084 El menú está mal echó al crear un listener por cada botón,generado un gasto innecesario de recursos. Imagina que fuera un proyecto grande hubiera tirones
Buena solucion amigo, realmente funciono, aunque en la version de 1024 hay que ponerle el height al 100%, porque sino no se ve. Oye una duda adicioal, mi menu tiene otro nivel mas adentro y cuando le doy click solo se despliega en el interior de ese menu pero no corre los de afuera...alguna idea de como arreglar eso?
No entiendo muy bien que tendría que hacer
Me lo podrías explicar?
No comprendo la parte de ".show" me lo podrían explicar. Por favor
Para los que posiblemente al desplegar el submenu no les despliega, mi código lo copie tal cual del video y después de dos horas buscando errores me di cuenta que fue en la linea 7 del video no tiene el guión (''.submenu btn'') el código:
const subMenuBtn = document.querySelectorAll(".submenu-btn")
Aun soy principiante y muchos de los tutoriales a los que intente hacer ninguno me sirvió, pero tu vídeo fue el único que me ayudo mucho gracias bro :3
Hola amigo, segui el código funciono bien, solo tiene un pequeño detalle para que funcione en esta linea 1 del javascript | const btnMenu = document.querySelector("#btn-Menu"); falto ponerle el guion, para quien es novato puede representar un dolor de cabeza porque la tiene que cambiar en el javascript o en el html para que sean iguales todo el demas código esta perfecto. Como es natural me sacaste de un bache como imagino a muchos, gracias por compartir !!! tu talento. Saludos desde México.
Que bien, estaba buscando ese menu con pura JavaScript porque en el otro tutorial me daba errores en js. Y me ha venido genial porque voy a poder implementarlo en mi proyecto. Como siempre muy bueno y bien explicado. Se aprende mucho y estoy contentos con estos tutoriales y tu curso de Udemy también. Es una pasada. Gracias de nuevo.
buenas, tengo que entregar una pagina para dentro de una semana (como final de programacion web) y tu video me ha salvado la existencia. like y sub
Maestraso cuando comencé el video no entendía nada de html, css o Js pero aprendí mucho .
Eres Dios hermano, el Dieguito maradona de la programacion!
Buenas tardes, excelente y magistral ejemplo (como siempre), de todas formas, he estado viendo que se podría implementar un par de cosillas importantes , lo cual no he podido realizar con éxito:
1. La primera seria que cuando se abre y cierra el menú (lateral), éste no guarde la posición de los elementos del menú desplegados, cosa que si hace ahora.
2. He estado intentando controlar el despliegue del menú en vertical, en dispositivo móvil, y veo un pequeño problema si tiene varios sub menús, en un teléfono móvil, no resulta muy buena experiencia ya que depende de como sea el menú , se tendrá que hacer mucho scroll.
Para solucionar el tema , he pensado en colocar una condicional para que si detecta mas de 1 link activado no permita clicar el siguiente, o si lo hace, que el que está clicado se cierre automáticamente, así el menú nunca llegará a se muy largo.
Si pudiese hacer un video explicativo, siguiendo éste ya realizado, nos sería de gran ayuda, a fin de ver la lógica de programación aplicada al JavaScript.
Muchas por las clases!!
Con respecto a la primera pregunta, cómo que guardar las posiciones?, no guarda las posiciones de los elementos, solo quita el alto y se lo da a los hijos, no guarda sus posiciones, en todo caso podrías usar un syncro para hacer eso, así que no entiendo la pregunta.
@@ferchulanderful Igual no me he explicado bien, en el 1 punto, cuando abrimos el menú lateral y desplegamos algunas de las opciones del submenú, si seguidamente cerramos el menú lateral desde el icono "toggle" y lo volvemos a abrir. éste se abre manteniendo las opciones desplegadas que teníamos antes de cerrarlo, a eso me refería con mantener la posición de los "submenús abiertas si es que así estaban antes de cerrar el menú lateral (padre).
En el punto num.2 lo que digo es que estaría bien implementar algún tipo de condicional que si hay desplegado una opción del submenú, no te permita abrir o desplegar otra opción del submenú, ya que ahora podrías desplegarlo todo y estas obligado depende de lo largo que sea a hacer scroll dado que se va a ver en un dispositivo de pantalla pequeña.
Espero haberme explicado un poco mejor.
@@robertogomez6697 ya entiendo a que te refieres, ahora lo estoy intentando solucionar porque queda feo xD, el sub menú sigue desplegado incluso al cerrar y volver a abrir el menú.
@@ferchulanderful Genial, había pensado que como solución hacerle algún tipo de reset cuando se cierra el menú lateral, también estoy pensando como lo enfoco...
Gracias
Gracias por compartir sus conocimientos acerca de este maravilloso campo de estudio que es la programación.
Mis felicitaciones por tu canal video muy bien explicado cada paso y sobre todo el "por que" de todos los movimientos que creo que es de lo mas importante. Te mando un saludo me sirvió mucho.
Perfecto! muchas gracias! me solucionaste un problema que me tuvo una semana impidiendo que avance en el diseño del menú de mi página.
GRACIAAAAAAAAS CRAACK !!! Me ayudaste a resolver un problema que tenia, al hacer click en un enlace de mi menú (que permite navegar en las secciones de la página) no podía hacer que se cerrara el menu, pero con ese for lo pude solucionar (23:12), GRACIAAAASSS!!!!!
muy bueno que facilidad y calma tienes para explicar paso a paso un saludo desde venezuela
Excelente actuación y muy bien explicados todos los pasos, cómo siempre. Me parece muy buena ideal las actualizaciones de tutoriales sin jQuery, porque es lo que se viene. Gracias J.C.
Gracias! aprendí mucho, por fin me sale el menú con varias opciones desplegables
Que bueno verlo otra vez. Seguiré atentamente tus ejercicios
en lo personal toda la noche estuve buscando mi error no me funciona el .container-submenu:hover .submenu {opacity: 1; visibily:visible} tomando encuenta que en sub menu he puesto visibily:hidden y opacity:0 ya revise las clases y aun asi no me funciona
Excelente como siempre, les cuento que si se puede descargar Brackets, actualizado y todo!
Que geno muchisimas gracias, esa parte de java script con los menus despegables no ls asabia, toca aprender repasar muchisimos saludos!!
Muy ameno tu video, me ayudo de base para lograr hacer mi menu con algunas variantes. Gracias bro, ojala todos tuviéramos tu carisma para explicar XD yo soy re aburrido XD
profee faltan solo 500 para que llegue a los merecidísimos 100k suscriptores. Lo felicito mucho y que está comunidad siga creciendo
ya tiene 100k justos xd
BRAVOOO!!! Excelente y muchas muchas gracias
Hola desde Costa Rica... muchas gracias por tanta ayuda que ofreces en tus tutoriales... quisiera preguntar.. en la parte de responsive ... si es posible que hagas un tutorial igual a este pero que el menu baje desde arriba y empuje la pagina hacia abajo... asi, exactamente como se acciona en el (menu desplegable responsive)
Muy buen tutorial! Muchas gracias. Una duda, como puedo hacer para que cuando cierre el menu y lo vuelva a abrir, el submenu no se quede desplegado?
Hola de Peru, gracias por el video.
Tengo una dudas, he codificado la parte de JavaScript, pero al darle click a en el Menú Productos, no me la lista de productos. Se habrá actualizado algo en los códigos?? Gracias de antemano.
Buen aporte a la comunidad, me sirvió para ventanas desplegables 👌😁
una consulta porfa. Veo en el video que cuando creas la CLASE MOSTRAR tu javascript lo reconoce. Yo e intentado lo mismo creo la clase en css pero mi javascript no lo reconoce, en mi consola me sale que la clase mostrar no esta DEFINIDO. Una ayuda porfa
Me encanta tu canal. Gracias por los aportes.
Buenas tardes. Coloqué un div con un lorem ipsum abajo del menú, en pantallas de escritorio se ve bien pero, cuando lo veo en dispositivo móvil, queda un espacio en blanco entre el menú y el div que hice y ese espacio es prácticamente del mismo alto del menú que aparece por la izquierda, es como que el menú aunque este oculto, empuja el contenido hacia abajo dejando ese gran espacio vacío. Como se soluciona?
Siempre me solucionas la vida!!!
muy buen video, solo como hago para que el sub-menú se despliegue en pc con clíck? y como agrego sub-sub-menú?
hola, muy buen video pero tengo una duda, al momento de querer desplegar el submenu no se me permite, segui cada paso al pie de la letra y no me deja, como lo puedo solucionar?
y en caso de que adentro del submenú se necesite mostrar otro menú que tenga un subitem que se debe actualizar en el javascript?
esta rudo de conseguir un video que hagan o expliquen eso, aun sigo buscando y nada. saludos
@@yerssinrios1446 encontraste algo?, igual quiero que del submenu se pueda clickear y mandar a un ítem
hola probé de todas las formas pero no logro hacer que el submenu se desplegué algún consejo que me puedas dar?, copie e hice exactamente como hiciste en el video no entiendo porque no me funciona
Gracias capo, un genio sos 👍💕
Hola muchas gracias por el video. Me servio mucho. Solo una pregunta. Como puedo hacer para centrar ese menu ?
Hola muchas gracias por tu aporte.. cual es la página de font-awesome? no encuentro el link, gracias
cual es el plugin para que se escriba en la pagina lo que escribis en el sublime?
J.C que plugin usas para que se muestren los cambios a tiempo real del html, es medio tedioso tocar f5 a cada rato jajaja saludos!
FALTAN 100 PARA LOS 100K FELICIDADES
FELICIDADES LLEGASTE A LOS 100K SUSCRIPTORES
Muy bueno. Podran pasar codigo completo?
pero me queda un gran espacio cuando oculto el menu, como hago para luego ocular el menu se sube el contenido que esta luego, puede ser una imagen....ayudame porfa
Me servirá para aplicarlo en un Blogspot ?
no me funciona
Muy bien explicado tio, muchas gracias!
Buen Dia saludos desde Argentina... muy bueno el tutorial. tengo un inconveniente, cuando doy (click) en el subMenu, se despliega, pero al mismo tiempo se recarga la pagina y se actualiza. como lo puedo solucionar?
La verdad muy buen video. Tus tutoriales me han ayudado mucho. Tengo un pregunta que no es muy relevante pero si alguien la puede contestar estaria excelente. En el js en la linea 11 tube que cambiar -- const subMenu = this.nextElementSibling; -- por -- const subMenu = subMenuBtn[i].nextElementSibling; -- ya que con -- this.nextElemntSibling -- me decia que subMenu es indefinido. La verdad no pude determinar por que.Aclaro que estoy empezando y tal vez estoy pasando por alto algun concepto. Saludos.
le puse varios submenus, ¿crees que por eso no se oculta por completo?
Esta excelente la clase, como hago para centrar el menu cuando es para pc y colocarles unas imagnes al menu?, y mil gracias, te felicito
Muchísimas gracias fue de gran ayuda.
Gracias amigo por compartir tus conocimientos.
Buenos días, llevo tiempo buscando en internet la forma de poder cerrar automaticamente un slider cuando llegue a la ultima imagen, el slider que hice lo logre realizar mirando su video de como hacer un slider con html y css, muchas gracias por la ayuda, ojala tenga una respuesta pronta.
profesor tengo una pregunta. este tutorial lo pensó desde cero o busco documentación de como hacerlo y lo adapto
le quesera mostrar una foto de algo que estaba realizando por mi cuenta pero al final naranjas XD y por esto estoy aqui. pero igual me siento algo incomodo conmigo mismo porque un verdadero ing o desarrollador fronted lo hace por si solo con la ayuda de la documentación y voy mas de un año y no e logrado nada
Un pequeño detalle,...en el minuto14:18, dices: "..y cuando doy clic, se muestra y se oculta", pero en la realidad eso no sucede. ¿Alguien sabe como arreglar esto?
Excelente
muchas gracias.
Una Clase Magistral, hablando de visual studio code, no me acostumbro a ese programa, de tanto configurarlo hace cosas que no debe, lo desinstale y lo volvi a instalar pero sigue con las mismas configuraciones, podría hacer un video con una correcta desinstalación y una correcta configuración o como se puede volver a su forma original? Saludos
Son buenazos sus vídeos . Unas clases completas en EDteam ¿ Para cuando ?
Tienes alguna academia o algo por el estilo ?
excelente !!!
Me estaria dando un error..
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at scripts.js:4
creo que lo amo
Buen video, me ayudo mucho lo del height en el js
Excelente explicación!
Muy útil tu vídeo, gracias por compartirlos
Que grande sos Jan Carlos
Eres buenisimo estimado, muchas gracias.
justo antes de que pasara al js me dejó de ir como tocaba, el menú en versión móvil me quedó desplegado pero sin verse el texto, alguna ayuda?
Igual a mi me paso lo mismo lograste solucionarlo?
Hola a mi no me funciono la ultima parte de javascript por que sera y revise el codigo y esta bien escrito
Estoy igual
Muchas gracias por todo, genial!!!
Excelente video, muy bien explicado
Hola, estuve siguiendo el video e iba bien, hasta que llegué a JS. Hice todo pero cdo lo pruebo recibo "ReferenceError: document is not defined" . Podrías ayudarme? Estoy empezando a codificar y no sé por qué se me genera ese error ni cómo solucionarlo. Gracias
@Dieguito7910 cree todo el código en el mismo archivo que está el html. La parte de js la puse dentro de un script. Suerte!
La parte del JS de los menús desplegables no resulta
a mi tampoco me funciono...
una pregunta como ago para que el menu segundario me habra como en el video porque no me abre se queda pegado me pueden decir
me suscribo y activo campanita..merecida
me pueden ayudar esta parte de la síntesis no me cuaja, i
en despliegue del menu si me funcina el .js pero el despliegue del submenu es el que no me coje
Pues me ha funcionado bien, eso si, tengo un problema que parece que tambien le sucede a @JChvRr, si se agrega mas contenido a la página y estando en vista de movil al desplegar el menú este se coloca debajo del contenido, es decir, el contenido de la página queda encima del menú desplegable, he intentado con z-index darle prioridad al despelgable pero no funciona. Si algien lee este comentario ¿me podría indicar como solucionar el problema que comento si es que le ha ocurrido?
Gracias por el vídeo 👍
gracias amigo
Muchas gracias por compartir, puede hacer un curso de css3 explicando como maquetar un sitio web responsive
Buenasss, una consulta, como haces que se actualicen los cambios directamente en Google? Tipo sin recargar la página... gracias!
busca live server
Buen Video, me funciono casi perfecto. Sucede que mi menu tiene otro nivel mas adentro, y cuando le aplico esta misma logica solo desplaza los elementos dentro de su rango pero no los del nivel de afuera por lo que no todos los elementos se ven....alguna solucion?
z-index: 5; quiza te ayude, tendrias que poner dentro de la clase donde no se logra ver por completo
Gracias profe !!
de donde sacaste la clase desplegar??
no me desplega el submenu, como le hago
Hola Jean, saludos, Como centro el menú en modo web?
Tengo una duda. ¿como es que tu span se comporta como un block element en vez de un inline element ? (por defiinición digamos).
Tuve que cambiar el span por un div, porque solo así conseguía el resultado deseado.
El span tiene una clase llamada nav-bar. En el css, se coloca la clase nav-bar con un display: block
En general, span es un elemento inline, pero he estado viendo varios cursos que mencionan que agregandole en los estilos display: block, lo conviertes en un elemento de tipo bloque. Esto ayuda a poder darle padding, etc...esto se hace por que los elementos inline no pueden adquirir ciertas propiedades css. Espero haberte ayudado.
@@edenmagana4673 muchísimo, estuve buscando y si sabía de la clase, pero no sabía que los elementos online tenían ciertas propiedades que no tenían los bloques, y por eso se usaba. Ahora toca leer más teoría de porque son distintos... Muchísimas gracias !!!
Que bueno que te sirvió :-)
100.000 suscriptores
buen video gracias
Me gustaría saber como agregarle otro nivel al menú, porque se complica un poco con tres niveles...
idem me ha pasado lo mismo pero en la propia base de datos dentro de los enlaces de cada campo en el enlace de cada uno e metido el tercer nivel
gracias por dejar el github me ahorraste mucho tiempo(sarcasmo)
Muy buen video, ¿podría pasarme la clase desplegar y style del css?
TKM CARLOSMO
como puedo poner todo eso del lado derecho?
no has dejalo el link incompleto
alguien logro hacerlo con otro sub menu dentro del submenu?
como hace para codificar y ver la ejecucion al mismo tiempo? (uso visual studio)
instala la extensión live server, y en tu archivo html, dale click derecho y "open with live server", te abrirá una ventana nueva en el navegador donde cada vez que guardes una modificación en tu archivo html o los archivos ligados (css o js) se mostrara automáticamente en tu pagina sin necesidad de refrescarla.
Me encantan tus clases, sobretodo como explicas js, la verdad se me complica entenderlo :c, pero gracias a ti pude resolver un problema en mi submenu. Tiene algún curso o dicta clases de programación web sobretodo de js, actualizado