Menu horizontal responsive con HTML y CSS
HTML-код
- Опубликовано: 9 июл 2015
- En este nuevo video mostramos como diseñar un menú horizontal que se adapta a cualquier dispositivo móvil, solo con CSS.
Síguenos en facebook:
/ jygproyectosweb
Únete a nuestro grupo:
/ 1639298496227219
Nuestro sitio oficial:
JeanCarlos, he visto muchísimos videotutoriales acerca de programación y programación web, me atrevo a decir que los tuyos son los mejores, no aburres, no tienes sonidos extraños y molestos, se entiende todo...por favor no dejes de compartir, pronto tendrás muchos subscriptores.
manuel Peral muchas gracias!
No me funciona me ayyda
Los mejores!!!!! Me encantan
Buenísimo tutorial y clarísima explicación.
Espero que seas profesor y te estén disfrutando allá por dónde estés.
Después de estar 10hs (literal) mirando videos e intentando códigos.. frustrandome.. encontré este que me salvó la vida!! Excelente explicación!! Muchas gracias
Lo que mas me ha gustado es la cara que has puesto cuando has dicho "y esto se hace solo con CSS" . Se nota que disfrutas y haces disfrutar a los programadores. Ha estado muy bien. Gracias por tu aportación!
Eres un monstruo explicando, en el buen sentido, colega! que grande! :D muy buen trabajo! gracias!
gracias hermano!, tus canal me ha sido muy sutil, saludos desde Guadalajara, Jalisco, Mexico
Increible la limpieza con la que explicas, esto es de hace 5 años y es oro puro en 2020, gracias, te ganaste un subscriptor, espero que aun sigas subiendo videos hoy día
Un verdadero maestro. No dejes de compartir tu conocimiento y experiencia con quienes como yo hacemos la transición de programación convencional a ambiente web. Empecé con Fortran IV, RPG, PL1 y he pasado por muchos lenguajes y te aseguro que este, aunque totalmente diferente, es apasionante y mucho mejor cuando hay personas como tu. Gracias.
Extraordinario Maestro. Era lo que me faltaba.
Gracias y lo sigo.
+Leopoldo Abarca Gracias Leopoldo
+1
Genial, muy fácil (seguro que es por lo bien que lo explicas). Muchas gracias... A partir de ahora, ya soy una seguidora más.
Me impresiona la simpleza con la que resuelves las cosas, muchas gracias por compartir!
Saludos desde Ecuador me da mucho gusto saber que todavía hay personas que hacen lo que le gusta enseñar lo aprendido siga adelante y de verdad me ayuda mucho tus tutoriales.
Muy claro para explicar, justo lo que buscaba, Gracias Estimado!
I dont speak spanish but even in know you video is great and you gave me a great new perspective !!!!!Tanks!!!!!!!!!
i dont speak English
sorry
alex de wilde Of course you speak Spanish your name on youtube is Alex DE wilde
No hay palabra para describir este tutorial, entendi tan claramente con tu video despues de todo un dia buscando tutoriales. Saludos.
mi hermano, usted explica de maravilla, estoy practicando cada semana con sus tutoriales, lo felicito y un saludo desde colombia
Felicitaciones amigo, excelente explicación. Me funcionó perfecto en varios navegadores (Chrome, Firefox, Opera) pero en SAFARI no se ve bien la barra de arriba y en EXPLORER 11 tampoco
Eres muy bueno como explicas y lo que enseñas!! muchas gracias sigue así!! :B
Naty Grunge Muchas gracias :)
Wao el video es del 2015 y yo ahora 2020 sigo aprendiendo de ti Buen trabajo, Eres el Mejor¡¡¡¡¡
Vi como 3 tutoriales de estos tipos de menú, el tuyo fue el único que me funcionó, muchísimas gracias, tu explicación fue muy buena y clara
muy buena explicacion, felicitaciones
Explicas muy bien, gracias por compartir.
Susana García gracias por verlo, suscribete para mas videos :)
suscrita, XD. un saludo
Perfecto como siempre JeanCalor. Gracias por tu magnifica lección.
Man, I'm from Brasil and dont understand nothing of spanish, but your didactic is amazing! I managed undestood everything. Gratz for your class, in Brasil we need of teachers like you. Gratz!
Gracias por tu vídeo, en un principio no me funciono esto:
#btn-menu:checked ~ .menu{
margin: 0;
}
ïnvestigando encontre la solucion:
#btn-menu:checked ~ * .menu{
margin: 0;
}
lo dejo aquí por si le sirve a alguien
gracias por la aclaración!
SI sirvio :D, gracias!!
Gracias amigo, justo lo que necesitaba!!
Sos un capo
OHHH muchas gracias!!
No entiendo una palabra de español. pero entendí todo. El vídeo es genial! muchas gracias!
Como explicaste fue brutal, y hiciste de la manera que se pueda exportar mas fácil que he visto!!!. Genial el video.
Gracias por compartir tus conocimientos, es un aliciente para todos aquellos que estamos aprendiendo a programar paginas web, saludos desde Cancun, Quintana Roo, Mexico.
eres el maestro de html y css hhh muchas gracias. jquery es un rompe cabezas. gracias hermano. ahí tienes un like una suscripción y un comentario hehehhe
+Big-Buzz Muchas gracias
17:17 Me encantó!!! tu hack de usar la casilla de CHECK y la pseudo clase checked. Sí, es un buen recurso para no usar javascripts. Sin embargo, me parece que hay que aclarar algo: que al usar la virgulilla, hay que aclarar que estamos hablando de selectores hermanos (siblings); es decir que el botón hamburguesa y la caja de menú a mostrar/ocultar deben estar en el mismo nivel del html. Uno de los mejores tutoriales que veo en toda mi vida.
Hace dos días que me estoy rompiendo la cabeza. Gracias Mario.
No logro que me funcione, que significa que deben estar a mismo nivel?
Entendido!!! Funciono!
GRACIAS!!! he hecho varios menus tuyos, he aprendido de varios tutoriales, pero siempre regreso a los tuyos, gracias de nuevo
saludos desde venezuela, de verdad que he aprendido mucho con ese tuturial y de verdad te felicito y te doy las gracias por compartir toda esa informacion.
Excelente! Pero una pregunta: como haces para que Chrome te muestre las dimensiones del viewport?
Es la vista previa de Brackets, no es Chrome
excelente vídeo, si dejaras los archivos y la imagen en una carpeta comprimida para que nosotros podamos modificar algo seria super bueno :)
Hola Junior Guzman, te recomiendo que lo hagas tu mismo, te ayudara a ir comprendiendo como funciona todo y aprenderás más.
Saludos.
@@fukindenai como ases para que en el brackets te complete los codicos como lo isiste en clase menu y los ul??
@@elliotnegro se llama emmet
de verdad que tu pedagogía es increíble lo haces ver todo fácil grande muy buenos aportes te doy un +10 excelente material en tu canal ... Agradecido desde Venezuela saludos..
Este video con esta explicación es increíble, me ha encantado, gracias por tu ayuda, saludos desde España
me gustaria que por favor me explique para que sirve este codigo, gracias.
Sirve para que la pagina se adapte a pantallas de diferentes tamaños (computadora, tablets, celulares).
La etiqueta "meta" sirve para ponerle metadatos para que el navegador lo interprete. El "viewport" es toda la parte visible de nuestra pagina ( La url no cuenta ). El content es donde se pone el contenido, en este caso dice "width=device-width" ( lo que le esta diciendo es que tome como ancho de la pagina el ancho del dispositivo y de esta manera se adapte. El "user scalable" quiere decir si el usuario puede o no realizar zoom en la pagina. No se si se me entendio jajaja, pero eso es lo que yo entendi al practicar Responsive recientemente
@@tomaslencina4110 gracias 👍
No me funciona esa opción del checked, estoy utilizando sublime text 2, nose si tenga que ver el editor. Bienvenida las sugerencias. gracias
+eberth jaramillo No es el editor. Revisa si no hay un error de escritura en tus clases de css
Me sucedió lo mismo, y lo que hice fue poner esto: #btn-menu:checked ~ .sub-menu (cambiar el símbolo)
Me arregló todo.
graciiiiiaaaaaasssssss
Si no te funciona aún borra todos los espacios, es decir: #btn-menu:checked~.menu
Gracias, me solucionaste mi problema!
Estimado JeanCarlos, excelente tus video tutoriales recien puede encontrar lo que necesitaba..mil gracias por todo y no nos abandones.
Amigo Juan Carlos, cada vez que veo este video que vi hace años, me parecia tan increíble como se escondía y aparecía el menú. Ya lo he realizado en un par de sitios que me han pedido, y créeme que lo sigo encontrando tan sorprendente y claro como tu explicación para enseñar. He visto muchisimos videos sobre navbar incluyendo algunos de tus coterraneos, y tu video aun sigue siendo el mejor y es el que aplíco en mis proyectos. Si tu hicieras una página web solo con Flexbox y Css, estoy seguro que algunas dudas que tengo se me despejarían. Eres el mejor. Gracias amigo.
¡Oye! amigo, no me funcionó #btn-menu:checked ~ .menu {
margin: 0;
} en la ultima parte del video. Ayudáme porfavor.
amigo puedes darle alt gr mas la tecla donde esta el signo de mas
tampoco me a funcionado y tengo todo igual, ya lo revise como 999 veces :(
A mi tampoco me funciono esta parte
Solucionado... no es un problema de sintaxis (al menos mi caso)
Hay que tener en cuenta que todo el código del html este dentro del mismo div (o header). Mi error era que había puesto el botón del checklist en el header pero el nav estaba por fuera del mismo. Puse el NAV dentro del header y todo resuelto
Espero les sirva
a mi tampoco me funciono, solo agregue el left al margin y me funciono, asi quedaria: #btn-menu:checked ~ .menu {
margin-left: 0;
Buenas tardes, de verdad me quito el sombrero, explicas de una manera muy digerible, muchas gracias por compartir la experiencia y el conocimiento
Gracias hermano después de 4 años me han servido mucho tus vídeos saludos desde Colombia (Y)
6 años después y por acá te agradezco. A pesar de que tengo unos 6 años conociendo la programación web, hoy me decidí en aprender a hacer mi propio menú con css jeje. Gracias!
EXELENTE! Muchas gracias! despues de andar por todos lados en internet encontre este video!, pude hacer mi menu responsive! muy claro la explicacion! Saludos desde Argentina, Entre Rios!
Que talento para explicar ... Muchísimas gracias
Excelente explicación, detallada y con paciencia.. espero que sigas montando mas vídeos para poder continuar aprendiendo
Gracias¡
Explicas muy bien. De decenas de tutoriales de html y css tu canal es el mejor. Saludos...
Hola Jan Carlo (Espero que así se escriba)... Te quería agradecer por tus vídeos, es muy difícil encontrar alguien que se tome esto tan en serio, que explique tan bien y que lo haga así de increíble! ..
Me considero un tanto torpe cuando se habla de programación, pero gracias a estos videos finalmente entiendo y ando haciendo una página, muchísimas gracias
No hay palabras para expresar lo bien que explica el como maquetar paginas
Hola! Realmente te queria agradecer que me hayas enseñado como se hace!! Explicas MUY BIEN.
Simplemente espectacular. Muy bien explicado. Que maestro.
es genial como lograste usar la propiedad checkbox. Pero lo único que les digo es que no se asusten por usar js, con 5 lineas de codigo se consigue esto
const button = document.querySelector('.button')
const menu = document.querySelector('.menu')
function funcion()
{caja.classList.toggle("activate")}
button.addEventListener('click', funcion)
JeanCarlos, gracias por compartir tus conocimientos con la comunidad, fuiste de mucha ayuda en mi aprendizaje y te lo agradezco enormemente ! me mantienes atento al video y no me aburres, explicas de manera clara y precisa. Nuevamente muchas gracias ! :)
Excelente explicación clara y concisa. Se nota que sos buena persona
Ojalá sigas subiendo vídeos!!! Estuve buscando algún canal que explique algunos temas que me costaban y el tuyo fue al único que le entendí. Todo super bien explicado y muy claro!. Excelente!! Saludos desde Argentina 📚
Todo súper claro y al grano, muchas gracias. Eres la onda!!
Este video es algo antiguo pero está tan bien explicado que me ha servido un montón para mi tarea :') muchas gracias Giancarlo!
de todos los videos tuyo son los maximo lo explicas tranquilo y detallado
muy bien Gracias
Usted es el mejor en serio!! es de los mejores que explican en español.
Muy bueno para los que aun no nos hemos adentrado en JavaScript, un saludo desde España.
muchas gracias! llevo 3 horas buscando algun video que me ayude, y por fin lo encontré!!!!
Hola!! Recien estoy aprendiendo pero estuve toda la tarde intentando hacer un menú horizontal y la verdad que nada me estaba saliendo, cada tutorial me confundía más y más pero el tuyo fue super claro ¡Me encanto! ¡Muchisimas gracias!
Realmente muy buen video. Yo ya lo había visto, pero lo vi de nuevo por zver como cambian las cosas cuando cambia el ancho. Muchas gracias!!!!!
Genial video. Muy claro y mejor explicado que muchas clases en internet
Vine por algo que no entendía y encontré todo lo que me pedían que genioo gracias❤️
Muy buena exposición paso a paso fácil de entender y seguir. Gracias por hacernos disfrutar.
Excelente video!! Ahora tengo un menú modelo. Muchas gracias
fue el unico que encontre que explica bien eso, gracias, necesito para aprobar el primer modulo de mi curso,
en mis dias de universidad me ayudaste mucho y en mis proyectos personales he aprendido mucho, gracias saludos y ya habia hecho otro menu de este tipo con un video anterior que vi en este canal, la verdad los videos son muy divertidos se les puede seguir el ritmo y son de juna gran calidad, tabto en lo pedagogico como en su presentacion.
Gracias por brindarnos tus conocimientos!! muy buen tuto.
Recien me estoy iniciando en CSS3 y me gusta como es que se pueden hacer tantas cosas sin meter js , gracias ! Saludos
Excelente video, muy claro, usted serviría como maestro!
Mil gracias, explicas fantástico de forma amena y sencilla. Saludos desde México
Jean Carlos, gracias, excelente video muy sencillo muy claro muy bueno muy bien elaborado, 10 de 10 pana, gracias desde Colombia hermanazo!!!
Eres muy grande, gracias por compartir tanto y de una forma tan magistral. Saludos desde España.
Muchas gracias por el tutorial, no se que hubiera hecho sin esto!!
Gran video amigo! que bueno que hay gente así que se toma su tiempo para enseñarnos cosas complicadas. Y muy bien explicado! Te ganaste la suscripción y el pulgar arriba!
Muchisimas gracias por este tipo de tutoriales, no solo explicas bien, sino ademas son amenos tus vídeos!!
Hola Amigo, muchas gracias por compartir. Varios videos de tu canal me son de mucha ayuda para realizar mi sitio web!! Tus explicaciones son muy buenas, hablas tranquilamente, y haces parecer todo mas facil !! te mando un abrazo, desde Argentina !! Saludos!!!!!!!
que buenos videos amigo!! estoy aprendiendo desde cero a hacer un sitio web con tus videos, muchas gracias por compartir tus conocimientos! Saludos desde Argentina
Muchas Gracias por tus tutoriales, son muy precisos y explícitos, de verdad me ayudo mucho en las dudas que tenia con el código de css.
¡Hola amigo eres muy bueno haciendo sitios veo tus vídeos aprendí bastante te agradezco mucho!
Sos un crack!! te felicito, tu trabajo ha quedado excepcional!! me haz ayudado mucho, gracias
Muchas gracias, es lo que había buscado por horas, me sirvió bastante para lo que necesito.
Excelente hermano, siento que actualize todo el conocimiento de web que tenia a lo que hoy en dia se usa, muchas gracias por compartir y explicar esta informacion con nosotros, saludos desde México
Muy bueno el tutorial; bien explicado y de los mejores que he visto...
Muchas gracias por tu tiempo y tú video, me ha ayudado muchísimo para mí examen final eres un Pro
Eres el julio profe de la programación!
Grande
Muchas gracias por el aporte. Muy buen menú, que estaba buscando hace tiempo y vi muchos vídeos. Pero el mejor con diferencia en el resultado y en explicación es el tuyo. Muchas gracias
Muchas Gracias sos de Peru Aprendo Muchas Cosas con Usted
Muy bueno !! Muy clara la explicación , me sirvió muchísimo, desde Argentina Muchas Gracias !!!
Mil gracias!!!
Me ha encantado y funcionado!
Es el primer tutorial que me funciona y super bien explicado que es lo importante para comprenderlo al 100% y no solo copiar y pegar!!!
Te juro que te ameee sos un genio !!!!!!!! me re salvaste y explicas excelente ojala llegues al millón de seguidores te lo re mereces!! sos un capo!
Bro, gracias a tus tutoriales he podido hacer mis propios menús.
Además de muy instructivo. Explicas genial. Muy muy bien
Gracias
Excelente manera de explicar, todo al detalle. Muchas gracias por enseñar.
Que bien explicas, da gusto aprender contigo. Muchas gracias por estos vídeos, eres muy grande
Saludo, Jean Carlos, muy buenos los tutoriales son aplicables al 100% y entendible.
Muchas gracias por tu colaboración, me has ayudado bastante con un nuevo proyecto que estoy realizando.