Menu desplegable responsive 2021 con HTML, CSS y JS
HTML-код
- Опубликовано: 19 мар 2021
- Hemos actualizado uno de nuestros tutoriales usando ahora Javascript en vez de Jquery
Curso en Udemy: www.udemy.com/course/diseno-w...
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 :)
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.
Que bueno verlo otra vez. Seguiré atentamente tus ejercicios
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 por compartir sus conocimientos acerca de este maravilloso campo de estudio que es la programación.
muy bueno que facilidad y calma tienes para explicar paso a paso un saludo desde venezuela
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.
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
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!
Gracias! aprendí mucho, por fin me sale el menú con varias opciones desplegables
Buen aporte a la comunidad, me sirvió para ventanas desplegables 👌😁
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)
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.
Muy bien explicado tio, muchas gracias!
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")
BRAVOOO!!! Excelente y muchas muchas gracias
Eres buenisimo estimado, muchas gracias.
Me encanta tu canal. Gracias por los aportes.
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
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
Gracias amigo por compartir tus conocimientos.
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
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?
Muchísimas gracias fue de gran ayuda.
Muchas gracias por todo, genial!!!
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!!!!!
FALTAN 100 PARA LOS 100K FELICIDADES
Excelente video, muy bien explicado
Muy útil tu vídeo, gracias por compartirlos
FELICIDADES LLEGASTE A LOS 100K SUSCRIPTORES
Gracias capo, un genio sos 👍💕
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.
Buen video, me ayudo mucho lo del height en el js
Siempre me solucionas la vida!!!
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.
Que geno muchisimas gracias, esa parte de java script con los menus despegables no ls asabia, toca aprender repasar muchisimos saludos!!
Excelente explicación!
Son buenazos sus vídeos . Unas clases completas en EDteam ¿ Para cuando ?
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
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
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 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
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.
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
Que grande sos Jan Carlos
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?
Muchas gracias por compartir, puede hacer un curso de css3 explicando como maquetar un sitio web responsive
Hola muchas gracias por el video. Me servio mucho. Solo una pregunta. Como puedo hacer para centrar ese menu ?
me suscribo y activo campanita..merecida
Gracias por el vídeo 👍
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 muchas gracias por tu aporte.. cual es la página de font-awesome? no encuentro el link, gracias
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
cual es el plugin para que se escriba en la pagina lo que escribis en el sublime?
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
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
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!
Gracias profe !!
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?
muchas gracias.
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
Muy bueno. Podran pasar codigo completo?
Excelente como siempre, les cuento que si se puede descargar Brackets, actualizado y todo!
buen video gracias
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?
le puse varios submenus, ¿crees que por eso no se oculta por completo?
Me servirá para aplicarlo en un Blogspot ?
Excelente
Muy buen video, ¿podría pasarme la clase desplegar y style del css?
Tienes alguna academia o algo por el estilo ?
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?
gracias amigo
Hola Jean, saludos, Como centro el menú en modo web?
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
creo que lo amo
se pueden bajar las imagenes de la pagina??
100.000 suscriptores
Me estaria dando un error..
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at scripts.js:4
no me desplega el submenu, como le hago
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?
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
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
de donde sacaste la clase desplegar??
Hola a mi no me funciono la ultima parte de javascript por que sera y revise el codigo y esta bien escrito
Estoy igual
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!
Buenasss, una consulta, como haces que se actualicen los cambios directamente en Google? Tipo sin recargar la página... gracias!
busca live server
Cuando haces un curso de JavaScript
no me funciona
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
como puedo poner todo eso del lado derecho?
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 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
Hola, tengo un problema con el submenu, lo que pasa es que al pasar el media de 1024px y adaptarse, se ve el efecto de la transición en el submenu sin pasar el mouse por encima ¿Alguien sabe que puedo hacer o si es normal que pase eso?. Muhas gracias :)
En tu css, en el .submenu quita overflow:hidden y coloca display:none;
Luego ve a tu @media y en tu .submenu coloca:
display:block;
transition:0.5s;
Con esto se me soluciono a mi. Espero te sirva.
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ó :-)
alguien logro hacerlo con otro sub menu dentro del submenu?
donde esta el link font awesome
TKM CARLOSMO
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?
no has dejalo el link incompleto
como hacen para ver en tiempo real la ejecucion en el navegador?
Si utilizas visual studio code, te servirá mucho la extensión "Live Server", con tan solo guardar los cambios comenzarás a visualizarlos en el navegador web que seleccionarás.