Menú desplegable responsive (HTML, CSS y Jquery)
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Otros videos que te pueden interesar:
Menú horizontal responsive: • Menu horizontal respon...
Web responsive desde 0: • Diseñando una web resp...
Síguenos en facebook:
/ jygproyectosweb
Únete a nuestro grupo:
/ 1639298496227219
Síguenos en Twitter:
/ jygproyectosweb
Nuestro sitio oficial:
Apóyanos con un me gusta y compartiendo este video, muchas gracias a todos :)
eres un excelente maestro y tu dominio de conocimientos es sorprendente, además la claridad y modestia en los vídeos son únicas, saludos desde México y en verdad muchísimas gracias, ojalá algún día haya oportunidad de crear un video de búsqueda y consulta en MySQL con PHP!!!!
Este método de ir desarrollando ejemplos prácticos me parece muy bueno e ilustrativo. Te agradezco todo el tiempo dedicado.
Señor de Ica - Perú felicitaciones por el vídeo, de verdad que lo explicas demasiado bien y es de gran ayuda para gente como yo que recién estamos aprendiendo a diseñar paginas web.
que tal amigo. disculpa la molestia. pero a ti te funcionó la funcion para el slidetoggle? a mi no me funciona! no se por que y he hecho todo exactamente igual
Si estuviera igual funcionara :/
Que crack que eres! no había encontrado hasta ahora alguien quien explique como lo haces tú, saludos desde Alemania, te recomendaré a mis amigos
Muchas gracias por la publicación, comento que agregue un código
que permite cerrar un submenú cuando abres otro, muy util para dispositivos moviles.
$(document).ready(function(){
$(".submenu").click(function(){
$(this).children("ul").slideToggle();
var Grupo = $(this).parent();
var posicion = $(this).index();
Grupo.children().each(function (index) {
if (index != posicion)
$(this).children("ul").slideUp("slow");
});
})
$("ul").click(function(p){
p.stopPropagation();
});
})
Gracias Hector Bustamante. Le agregue tu código y quedo de maravilla.
gracias por compartirlo, me sirvio mucho
sabes que podria hacer para que al abrir el item la flecha cambie por una apuntando hacia arriba?
y que el item cambie de color al abrirlo para dar la impresión de que está seleccionado y al cerrarlo o abrir otro vuelva a su color normal?
Amigo al dar clic en un submenu no se bloquea
Va tu like !!! Gracias....
gracias Me di cuenta de ese detalle al final
Hola Jeancarlos. Solo quiero agradecerte y felicitarte por tus videos que son muy ilustrativos, he aprendido mucho con ellos. Un afectuoso saludo desde México.
jejejeje muy bueno, recién estoy empezando en programación web y me piden que colabore para la pagina de un colegio jajaja, empece con tu vídeo menú responsivo y luego encontré el despegable , buen repaso . Gracias por compartir tu conocimiento, espero salga bien ahora
Hola Juan Carlos!
Nada mas felicitarte por tus tutoriales, la verdad que son de lo mejorcito que he visto hasta ahora, gracias a ellos, sigo aprendiendo! Saludoss
Excelente mi hermano, lo felicito por estas clases, porque la verdad son muy gratificantes. Saludos desde Colombia, y siga compartiendo sus conocimientos.
+Jaime Morales Muchas gracias Jaime
Amigo una pregunta., se puede aplicar esta misma lógica, si se quiere mostrar en el cuerpo de la pagina, secciones despegables, teniendo cada sección su propio contenido?
asi es
Listo, muchas gracias, y cuídese mucho. Bendiciones
Muchas gracias por este excelente recurso! Muy clara la idea y la forma de explicarlo.
Una Observación....
Para que los de los items del menú me quedaran en la misma línea (utilizando la propiedad "display: flex") debí hacerlo en el elemento .menu, solo y no como aparece en el vídeo como ".menu ul". Me resultó muy extraño que a ti te funcionara en el elemento ya que ésta propiedad se debe aplicar a un elemento contenedor, en este caso un
De todas formas, con esa pequeña diferencia en mi código, todo lo demás funcionó correctamente! Saludos desde Uruguay
Excelente explicación, desde Colombia le agradezco por compartir ese conocimiento.
El video es viejito ya, pero para mi es nuevo y muy útil. Como decimos aquí en RD, es un tolete.
This is by far the best responsive menu tutorial I have seen on youtube !
Eres un gran docente, muchas gracias por compartir tus conocimientos saludos desde Chile...
Tienes un INCREÍBLE don para enseñar, contadas las personas en el mundo que lo hacen de manera tan natural. Éxitos amigo.
Fabio Ojeda I
2018 y me sirvió una manera muy buena de explicar, sin dejar cosas volando.
Excelente video y super bien explicado, hice un menú desplegable casi igual para mi sitio y me ha quedado de diez.
Este video vale oro. Muchas gracias.
Jean Carlos Muchas gracias por el tutorial, es genial, me encanta la forma tan sencilla y clara como lo explicas, de los mejores tutoriales que he visto!!!
me ayudo mucho el stopPropagation(), tenia dolores de cabeza con mis menús... gracias
+oswaldo herrera rojas, tengo el código hecho con otro tipo de menú, te lo paso de todas maneras...
@@EduardoArroyo Podrias pasarme el código por favor?
A mi también!!!! Qué alivio dar con la solución!! Mil gracias J&G.
excelente. eres muy bueno explicaando. esto es lo ke necesitaba.
¡Que buenos vídeos! gracias a sus vídeos ya estoy entendiendo HTML5, CSS, PHP y JS.
¡Saludos desde México!
Excelente vídeo. Con el hover todo bien..pero si le das click en el menú no en la versión móvil y das click en otro se despliegan los dos al tiempo dentro del header..
Lograste solucionarlo? en ese caso podrias compartime la solucion porfa!
hola! recien te descubro en you tube y me facisnaron tus videos...muy buenos! felicitaciones y sigue asi!
I don't understand a word of Spanish but I watched the video anyway and manage to create my own responsive menu. Thank you so much for this. :) If you have any courses for sale on Udemy, do let me know. I would love to check it out.
+furrydices Hi, We are preparing a course on Udemy , stay tuned to the channel
Sin duda tus tutoriales son los mejores !
Muchas gracias por compartir tus conocimientos, bendiciones!!
Me estan ayudando mucho tus videos me parece de muy buena calidad tus explicaciones
saludos desde México
Hola Juan Carlos como siempre muy bien,,, ya que dices que te hagamos peticiones, aquí va la mía.... Con tus videos voy entendiendo la propiedad position:absolute pero aún así, cuando tengas tiempo podrías explicarla completa, cuando usar fixed, absolute, etc
Gracias, suerte
manuel Peral listo, lo anotaré, gracias! aunque en varios videos ya hemos explicado por partes como funcionan las posiciones.
+J&G Proyectos Web muy buenas e intentado mezclar los dos menus que te vi hacer tanto este como el de la pagina web responsive desde cero pero tengo un problema al pulsar el boton del menu en el movil los desplegables me salen abiertos y por mas vueltas que le doy no soy capaz de solucionarlo. Gracias por tus tutoriales...
Eres los maximo :D como aprendo contigo SALUDOS DESDE ECUADOR un abrazo inmenso siga por favor
Excelente video como siempre, muy claro y muy simple con un buen diseño.
Peruanos excelentes programadores
muy buen video, explicando como se desarrolla el menú con responsive es deagradecer.
Hola buen dia , sos un genio gracias por compartir tus conocimiento
explicas muy bien con mucho detalle gracias de nuevo
No entiendo una palabra de español. pero entendí todo. El vídeo es genial! muchas gracias!
que buen video amigo te felicito mucho, que buena explicacion
Awwwww... me encanta!!! de verdad muchas gracias!! No tuve ningún problema!!!
Graciassss maestrazo!
Muy bueno amigo. Excelente video de diseño de menu responsive !! Abrazo desde Argentina.
Excelente. Felicitaciones desde Chile.
El video te quedó muy bien explicado, las indicaciones son muy claras y podemos fácilmente crear en nuestros pc un menú igual al que haces en este tutorial. Solo tengo un problema que no he podido resolver, y es que todo marcha muy bien hasta que le insertamos el código js, a partir de ese momento la media pantalla tiene un funcionamiento correcto, todo marcha como debe marchar, pero si volvemos a pantalla completa, el funcionamiento de la pantalla se ha desconfigurado y no he encontrado la forma para que los cambios que hacemos con js para media pantalla, no afecte el menú cuando se encuentre en pantalla completa, te agradezco cualquier ayuda que me puedas dar para solucionar ese inconveniente.
Sos muy genio! excelente el tutorial!
Hola!!! Realmente te lo agradezco! Necitaba entender esto.
Excelente. Muy buenos tus videos. Saludos!
Increible video!!! haga otro video donde a los sub items tbn sean desplegables pleaseee
sabes que podria hacer para que al abrir el item la flecha cambie por una apuntando hacia arriba?
y que el item cambie de color al abrirlo para dar la impresión de que está seleccionado y al cerrarlo o abrir otro vuelva a su color normal?
gracias por compartir tu conocimiento, me esta sirviendo de mucho
Muy buen video. Gracias por una explicación bastante entendible :)
Gracias por el tutorial, me fue muy útil, tuve un problema como muchos en el jquery, mas pude solucionarlo de esta manera, en el head puse:
Luego no use menu.js, por que me daba un error, así que puse este código al final del body:
$(".submenu").click(function(){
$(this).children("ul").slideToggle();
})
$("ul").click(function(p){
p.stopPropagation();
})
Con eso ya me salio, xq con lo del video me salia un monton de errores en el archivo js, al parecer no lo esta reconociendo, tuve que escribirlo igual que tu en el html y funciono
hola puse tu codigo y igual sigo con el error. fotos.miarroba.es/th/2578/265AB91683235A4968F2225A4968F1.jpg
Hola ami también me sirvió, pero hay un error bug que si se pasa rápido se abren los dos al mismo tiempo, si tan solo se pudiera detener los segundos mientras uno esté abierto se solucionaría... pero soy nivel pollito
Adrian R Ch me sirvió mucho ya solucione el problema , muchas gracias. saludos desde colombia.
gracias por tu aporte me ayudo con el problema en el jquery
Estimado, te felicito por los excelente videos y explicaciones que realizas. La verdad hace más de 15 años que realizo y diseño website, pero me he quedado un poco atrás y me has dado una enorme ayuda para actualizarme. En el video, cuando la botonera se achica para tablets o moviles, usas el 100% del ancho. En mi caso, me gustaría utilizar, por ejemplo, el 50%. Esto me provoca que al desplazar los subitems y hacerlos visibles, queden ahí si hago click en cualquier parte de la pantalla. Me estaría faltando comprender qué EVENTO necesito agragar para que cualquier acción que no sea un click dentro del menú, los subbotones se hagan invisibles nuevamente. Muchísimas gracias.
Excelente.... Muchas Gracias por su aporte...
Excelente explicación
Muchísimas gracias maestro, excelente aporte!!!
Amigo eres un genio tenia un problema con el tema de que al darle click en los elementos que estaba dentro de ul me mandaban a una ventana nueva y no me andaba mi target, pero gracias a vos me funciona eres un genio :)
muchas gracias por los excelentes aportes
Amigo excelente vídeo muchas gracias, excelente menú.
Buen Video, se entiende a la perfeccion, pero no me funciona el jquery...
es todo lo que nejejitamos!
necesito y estaría mas que perfecto que nos enseñaras como ponerle efecto scroll al menu, muchas gracias me has ayudado muchísimo, me encanta programar viendo tus vídeos
sos un genio gracias por compartir tu conocimiento amigo! ;)
Excelentes videos, me han servido bastante, saludos!!!!!!!
Muchas gracias por este vídeo maravilloso ♥️
sinembargo te felicito si que estan muy buenos los videos todos no me han dado problemas, solo esto
EXCELENTE TUTORIAL solo me gustaría saber como hacerle para cuando se abre el submundo éste quede sobre los elementos de la pagina, ya que que cuando lo abro se me pone debajo de algunas cajas de texto que tengo en mi pagina, ojala puedas ayudarme en esto, te lo agradecería mucho
Muy bueno como siempre, tenes una gran capacidad para explicar las cosas de forma sencilla, te felicito.
Gracias
Amigo ferchores, puedes facilitarme el código igual estoy que intento varias vecese y no se desplega el menu. gracias
Muy bueno, y muy bien explicado, un saludo
Saludos, Excelente aporte
Excelente! Muy bueno!
Gracias por el tuto ;) estuvo excelente.
Excelente gracias por el tutorial esta genial (Y), saludos
Que grande! muchas gracias ♥
cuando lo agrandas todo el menu se desfigura todo por el cambio en el .menu ul li:hover ul{
position:static ==== cambiando esa propieda cuando agrandas el menu se daña todoo
}
como se puede solucionar??
Genio :) ese es el tutorial que estaba buscando :)
Te dí el like 2400 ... gracias me sirvió !!!
Hola sigo todos sus videos, son geniales Gracias, en este video tuve un problema con jquery, no me funcionaba, y la solución fue usar apostrofes en vez de comillas, me podría decir el porque paso eso ??? Gracias
muy buena sige asi 👍
me ha ayudado mucho
Excelente video muchas gracias
ya eh visto varios tutoriales tuyos y de verdad me han ayudado mucho sigue haciendo videos amigo. no se si ya subiste uno que le ibas a poner php a un formulario de contactanos?
+franco villafania perez te refieres a este? th-cam.com/video/QY02rtJwWNo/w-d-xo.html
como siempre todo muy bueno, agradezco tu predisposición, consulta, los iconos son gratuitos???
Muy bueno, me ayudo mucho
buenísimo video!!!
amo este vídeo
Súper!! Gracias
gracias buen video me parese muy buena tu forma de enseñar yo tambien estoy en aprendiendo js y si pudes subir algunos ejemplos te lo agradeceria
Estimado, muy buen tutorial, de tanto buscar en google y youtube, por fin encontré justamente lo que necesito. He visto el vídeo muchas veces, pero me sigue saliendo el mismo error:
cuando estoy en pantalla normal, al pasar el mouse sobre los menues que tienen submenues, se me despliegan correctamente, pero si hago clic en el item 2 o item 3 y por cualquier circunstancia muevo el mouse a cualquier lado, se me des-configura y se muestran tooooodas las opciones de submenues.
Gracias de antemano por su respuesta y sigan por este camino de la programación.
+J&G Proyectos Web Hola una pregunta porque cuando establesco que mi menu salga en modo columna en el caso de flex-direction:column lo hace solo en tamaño pc y no en menor tamaño (para tablet).
Muchas Gracias! que buen video
Felicitaciones por este material estimado... continúa así...!!! Por cierto me queda una duda...!!! en tu video mencionas que se puede hacer un menu desplegable solo con css y así no usar jquery... es decir que se puede hacer bajo ñla misma lógica un accordeon?... gracias y ojalá podamos ver un accordeon responsive en alguno de tus videos...!!! Saludos y bendiciones...!!!
+Robert Encalada “automediacar” si se podría, sin embargo el código sería muy extenso, pues habría que hacer una animación con CSS, lo mejor en este caso es Jquery.
+J&G Proyectos Web Hracias por responder y espero veamos un tutorial de accordeon en tus próximos videos...!!!
Excelente video , muy claro todo!! Estoy haciendo una pagina, pero no logro que se comporte de la misma manera! Sigo revisando el código 🤔
Muy buena explicacion... Puedes hacer en este caso un footer desplegable responsive por favor?
Hermano gracias, me salvaste de una jejejeje
Que pena Oswaldo esa plantilla se me borro porque formatie mi pc
hola, bueno tu vídeo pero hay error en el desarrollo de esa pagina porque cuando la pagina al final vuelve a escritorio, pasa que al estar hover no se despliega por el código de js solo se despliega cuando se le da click y no cuando esta hover como se habia hecho antes
Excelente... Saludos
Gracias, muy buen video
Hola amigos, cuando agrego las primeras lineas del menu.js en el index, no se despliegan los submenu. adjunto el code:
$(".submenu").click(function(){
$(this).children("ul").slideToggle();
})
Cualquier sugerencia es bienvenida.
a mi me sucede lo mismo, pudiste solucionarlo?
si amigo. para este problema solo es necesario no poner un enlase en el li con la clase submenu
ejemplo:
ver reportes
ver reportes de hoy
ver reportes semanal
-----------------------------------------------js---------------------------------------------------------------------------------------js----------------------
$('.submenu').click(function(){
$(this).children('.children').slideToggle();
});
muy buen video gracias !!
Tengo un pequeño inconveniente y es que cuando estoy en pantalla completa y le doy click por ejemplo al Item 2 y paso el cursos al Item 3 (Sin cerrar el Item 2) se me despliega como si estuviera en pantalla reducida ¿me podrias explicar porfa como soluciono eso)
Hola hace tiempo estoy intentando hacer atraves de mysql hacer una pagina para cronometrar pruebas , el problema que tengo es crear la base de datos para la hora de salida y hora de llegada y que en la pagina web me salga el resultado de la resta , esto lleva H:M:S.Milesimas de segundo
exelente video!! tengo una duda. ¿como se le puede hacer para esconder el menu despues de haber dado clip en un y que te lleve a la sección corrrespondiente??
Wow, genial, buenisimo vídeo =D me has salvado =D
Me gusto Mucho, muy bueno el video, me gustaria ver si podrías hacer uno solamente con css, creando el efecto Toggle en css,
Gracias!!