Menu horizontal responsive con HTML y CSS

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:

[@trackery]

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.

[@Jygproyectosweb]

manuel Peral muchas gracias!

[@carlosmamani4136]

No me funciona me ayyda

[@loubna708]

Los mejores!!!!! Me encantan

[@polodibujanye]

Después de varios años, te encontré, amigo. En esa oportunidad, me resultó para una web. *Ahora ocuparé tu magistral video para otra web. Busqué mucho pero el más claro, nuevamente, resultaste ser tú. GRACIAS.*

[@davidcantero4134]

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!

[@verostrizinec]

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

[@xarlie2323]

Eres un monstruo explicando, en el buen sentido, colega! que grande! :D muy buen trabajo! gracias!

[@Valencorezan]

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)

[@VeneraNW]

No entiendo una palabra de español. pero entendí todo. El vídeo es genial! muchas gracias!

[@fernandosanchez5535]

No hay palabras para expresar lo bien que explica el como maquetar paginas

[@alexdewilde526]

I dont speak spanish but even in know you video is great and you gave me a great new perspective !!!!!Tanks!!!!!!!!!

[@Detodounpoco-ti3vq]

i dont speak English

[@Detodounpoco-ti3vq]

sorry

[@davidherrera1882]

alex de wilde Of course you speak Spanish your name on youtube is Alex DE wilde

[@davidcatagua2956]

Wao el video es del 2015 y yo ahora 2020 sigo aprendiendo de ti Buen trabajo, Eres el Mejor¡¡¡¡¡

[@feljaz]

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

[@adlfNEWS]

gracias por la aclaración!

[@jorgeluissanhuezaorellana7704]

SI sirvio :D, gracias!!

[@MrDeluxonic]

Gracias amigo, justo lo que necesitaba!!

[@braiansergiojesusmena9826]

Sos un capo

[@laurapolanco6162]

OHHH muchas gracias!!

[@danielxavierfernandezguama8251]

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.

[@BigBuzzz]

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

[@Jygproyectosweb]

+Big-Buzz Muchas gracias

[@clementemeza2150]

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

[@socrats]

Buenísimo tutorial y clarísima explicación. Espero que seas profesor y te estén disfrutando allá por dónde estés.

[@wellingtongomes1674]

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!

[@polodibujanye]

Extraordinario Maestro. Era lo que me faltaba. Gracias y lo sigo.

[@Jygproyectosweb]

+Leopoldo Abarca Gracias Leopoldo

[@javierval160]

+1

[@gabrieltenorio1985]

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

[@mariocarnival]

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.

[@MarcelodeCalafate]

Hace dos días que me estoy rompiendo la cabeza. Gracias Mario.

[@silvinamarcantoni2441]

No logro que me funcione, que significa que deben estar a mismo nivel?

[@silvinamarcantoni2441]

Entendido!!! Funciono!

[@santuarydark]

Buenas tardes, de verdad me quito el sombrero, explicas de una manera muy digerible, muchas gracias por compartir la experiencia y el conocimiento

[@IsabelSoler]

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.

[@paulinalema9381]

muchas gracias! llevo 3 horas buscando algun video que me ayude, y por fin lo encontré!!!!

[@xemuz]

gracias hermano!, tus canal me ha sido muy sutil, saludos desde Guadalajara, Jalisco, Mexico

[@josetuz]

Me impresiona la simpleza con la que resuelves las cosas, muchas gracias por compartir!

[@kaneanitesV2]

Muy claro para explicar, justo lo que buscaba, Gracias Estimado!

[@colinamcy]

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.

[@freddysanchez27]

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

[@javiercamposcuesta897]

Este video con esta explicación es increíble, me ha encantado, gracias por tu ayuda, saludos desde España

[@natymatgar]

Eres muy bueno como explicas y lo que enseñas!! muchas gracias sigue así!! :B

[@Jygproyectosweb]

Naty Grunge Muchas gracias :)

[@luisvargas-hz9xf]

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..

[@susanagc3937]

Explicas muy bien, gracias por compartir.

[@Jygproyectosweb]

Susana García gracias por verlo, suscribete para mas videos :)

[@susanagc3937]

suscrita, XD. un saludo

[@javierrazonacosta58]

Como explicaste fue brutal, y hiciste de la manera que se pueda exportar mas fácil que he visto!!!. Genial el video.

muy buena explicacion, felicitaciones

[@karincentenaro356]

fue el unico que encontre que explica bien eso, gracias, necesito para aprobar el primer modulo de mi curso,

[@juniorguzman8747]

excelente vídeo, si dejaras los archivos y la imagen en una carpeta comprimida para que nosotros podamos modificar algo seria super bueno :)

[@fukindenai]

Hola Junior Guzman, te recomiendo que lo hagas tu mismo, te ayudara a ir comprendiendo como funciona todo y aprenderás más. Saludos.

[@elliotnegro]

@@fukindenai como ases para que en el brackets te complete los codicos como lo isiste en clase menu y los ul??

[@luisperulorber]

@@elliotnegro se llama emmet

[@SAMTRAXXX]

Usted es el mejor en serio!! es de los mejores que explican en español.

[@linayulieth1042]

me gustaria que por favor me explique para que sirve este codigo, gracias.

[@renzo4898]

Sirve para que la pagina se adapte a pantallas de diferentes tamaños (computadora, tablets, celulares).

[@tomaslencina4110]

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

[@linayulieth1042]

@@tomaslencina4110 gracias 👍

[@Cuervete]

Muy bueno para los que aun no nos hemos adentrado en JavaScript, un saludo desde España.

[@DarkoLoq86]

Excelente! Pero una pregunta: como haces para que Chrome te muestre las dimensiones del viewport?

[@arcangelrs]

Es la vista previa de Brackets, no es Chrome

[@jucanie]

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.

[@eberthjaramillo6537]

No me funciona esa opción del checked, estoy utilizando sublime text 2, nose si tenga que ver el editor. Bienvenida las sugerencias. gracias

[@Soohable]

+eberth jaramillo No es el editor. Revisa si no hay un error de escritura en tus clases de css

[@jesuslibrado8934]

Me sucedió lo mismo, y lo que hice fue poner esto: #btn-menu:checked ~ .sub-menu (cambiar el símbolo) Me arregló todo.

[@gustavoduran5180]

graciiiiiaaaaaasssssss

[@danielavegalopez3789]

Si no te funciona aún borra todos los espacios, es decir: #btn-menu:checked~.menu

[@erickvazquez5708]

Gracias, me solucionaste mi problema!

[@simonxxp100]

Estimado JeanCarlos, excelente tus video tutoriales recien puede encontrar lo que necesitaba..mil gracias por todo y no nos abandones.

[@prez_baltimore98]

¡Oye! amigo, no me funcionó #btn-menu:checked ~ .menu { margin: 0; } en la ultima parte del video. Ayudáme porfavor.

[@haroldavila4984]

amigo puedes darle alt gr mas la tecla donde esta el signo de mas

[@Luiguru]

tampoco me a funcionado y tengo todo igual, ya lo revise como 999 veces :(

[@adrianpicolla2602]

A mi tampoco me funciono esta parte

[@adrianpicolla2602]

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

[@pablotorres1396]

a mi tampoco me funciono, solo agregue el left al margin y me funciono, asi quedaria: #btn-menu:checked ~ .menu { margin-left: 0;

[@carlos_sosa_q]

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!

[@jorgemolina6538]

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! ..

[@rubenvega6591]

Gracias hermano después de 4 años me han servido mucho tus vídeos saludos desde Colombia (Y)

[@ulisesa.chavez9526]

No hay palabra para describir este tutorial, entendi tan claramente con tu video despues de todo un dia buscando tutoriales. Saludos.

[@santiagocalvo6619]

Que talento para explicar ... Muchísimas gracias

[@polodibujanye]

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.

[@1anitabee]

Excelente !!! Muchas gracias. Yo trabajo con desarrollos BI. Específicamente QlikView, y soy amante de incorporar extensiones con código html, jquery y CSS. Con tus vídeos he obtenido ideas fabulosas para mejorar mis apps. Mil agradecida!

[@Jygproyectosweb]

Anahí Barajas Que bueno! gracias!

[@edibere]

Excelente explicación, detallada y con paciencia.. espero que sigas montando mas vídeos para poder continuar aprendiendo Gracias¡

[@keny1986]

mi hermano, usted explica de maravilla, estoy practicando cada semana con sus tutoriales, lo felicito y un saludo desde colombia

[@rinowichan]

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

[@johnnypatino27]

A este menú se puede agregar un submenu en la parte de productos para elegir un tipo de producto? Es decir poner un dentro de un ? No hay ningún tutorial que lo explique.

[@nicolasdegregorio6961]

Excelente explicación clara y concisa. Se nota que sos buena persona

[@jorgeaguero9152]

Simplemente espectacular. Muy bien explicado. Que maestro.

[@you2dream]

Explicas muy bien. De decenas de tutoriales de html y css tu canal es el mejor. Saludos...

[@nontuearo3024]

Excelente video!! Ahora tengo un menú modelo. Muchas gracias

[@hipolitomanuelriveraoblita7690]

de todos los videos tuyo son los maximo lo explicas tranquilo y detallado muy bien Gracias

[@luisfernandoescobar2131]

GRACIAS!!! he hecho varios menus tuyos, he aprendido de varios tutoriales, pero siempre regreso a los tuyos, gracias de nuevo

[@luismora6880]

Excelente video como siempre y muchas gracias por compartir tus conocimientos si todos fuesemos como tu, que comparte sin pedir nada a cambio este mundo seria diferente

[@Jygproyectosweb]

Luis Mora muchas gracias

[@gilberthsteevenmontejodiaz70]

Que buen tutorial men.....eso si son profesores no como los que yo tengo....

[@javiert.maldonado7851]

Gracias por compartir tus conocimientos, es un aliciente para todos aquellos que estamos aprendiendo a programar paginas web, saludos desde Cancun, Quintana Roo, Mexico.

[@cavymol4987]

Eres el julio profe de la programación! Grande

[@anthoyweb7377]

Perfecto como siempre JeanCalor. Gracias por tu magnifica lección.

[@carmenguerrero5821]

Vine por algo que no entendía y encontré todo lo que me pedían que genioo gracias❤️

[@virginiacalvo2178]

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!

[@chui6251]

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!

[@hugosmith4031]

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 ! :)

[@deMMake]

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!!!!!!!

[@wknot]

Genial video. Muy claro y mejor explicado que muchas clases en internet

[@julianpincheira6207]

¡Hola amigo eres muy bueno haciendo sitios veo tus vídeos aprendí bastante te agradezco mucho!

[@diegomedflo]

5 años después, me sirvió tu tutorial, solo lo modifiqué un poco para mi gusto, pero me salvaste con lo del checked ~ .menu

[@cesararciniegas3990]

Muy amable, excelente explicación, soy colombiano, vivo en Bogotá si necesitas algo con mucho gusto te ayudare

[@Jygproyectosweb]

+cesar arciniegas Muchas gracias

[@MAUROFXONE]

Jean Carlos, gracias, excelente video muy sencillo muy claro muy bueno muy bien elaborado, 10 de 10 pana, gracias desde Colombia hermanazo!!!

[@jonthn2656]

Mostro usted es un crack video del 2015 pero de alta calidad

[@sakurastudio22]

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 📚

[@DavidFajardo]

¡Muchas gracias! Solo manejo HTML y CSS, y no sabía que este último era tan potente. He conseguido hacer un menú desplegable para mi web gracias a ti :)

[@natiorobles6339]

Este video es algo antiguo pero está tan bien explicado que me ha servido un montón para mi tarea :') muchas gracias Giancarlo!

[@bouchetlucas]

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!

[@nekidev]

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!!!!!

[@giulianaolmos4285]

Hola! Realmente te queria agradecer que me hayas enseñado como se hace!! Explicas MUY BIEN.

[@andresfeliperinconb2133]

oye muchas gracias.. gracias a ti pude hacerlo.. mire otros videos y nonada, y tu ayuda fue muy util. lo logre se ve muy bonita mi pagina. mil gracias

[@avilabike]

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.

[@luisorlandomas]

Estimado amigo quiero agradecer desde Chile por compartir con nosotros tu talento, me funciono de maravilla, lo ajuste a mi proyecto y listo!!!, se me ocurre que podrías mostrar como darle un comportamiento al botón para que al sacar el mouse de sobre el icono, el menu se esconda. Muchas Gracias Maestro.

[@rodrigosalcedo8838]

Eres muy grande, gracias por compartir tanto y de una forma tan magistral. Saludos desde España.

[@sebamota]

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

[@bunnyrabbot4838]

Muchas gracias por el tutorial, no se que hubiera hecho sin esto!!

[@PabliNet]

Está bastante bueno, es mas, es el que más me está ayudando. Una sugerencia es que hagan el mismo menú pero con submenúes.

[@santiagoyolsantos2027]

gracias por tu conocimientos compa saludes desde la tierra del quetzal Guatemala

[@joseravelo9711]

Además de muy instructivo. Explicas genial. Muy muy bien Gracias

[@melanniemariamlizarragario4901]

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!!!

[@brawnie3969]

Muchas gracias, es lo que había buscado por horas, me sirvió bastante para lo que necesito.

[@patrickfernandez8128]

Gracias, 1 like, 1 suscriptor y un seguidor. GENIAL

[@danielgalvezvidal4899]

Todo súper claro y al grano, muchas gracias. Eres la onda!!

[@rafaelvillegas5011]

Saludo, Jean Carlos, muy buenos los tutoriales son aplicables al 100% y entendible.

[@Laura-er5hb]

Por fin un video claro y bueno sobre esto. Gracias!

[@valentinavanegas8720]

El mejor video que me pude haber encontrado!

[@AngelGonzalez-ix7hx]

BUEN VIDEO AMIGO ERES EL MEJOR DESDE REPUBLICA DOMINICANA

[@Alpha1Romeo645]

Bro, gracias a tus tutoriales he podido hacer mis propios menús.