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

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

[@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.*

[@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

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

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

[@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)

[@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

[@VeneraNW]

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

[@xarlie2323]

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

[@davidcatagua2956]

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

[@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

[@socrats]

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

[@polodibujanye]

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

[@Jygproyectosweb]

+Leopoldo Abarca Gracias Leopoldo

[@javierval160]

+1

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

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

[@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

[@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

[@simonxxp100]

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

[@karincentenaro356]

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

[@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

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

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

[@javiercamposcuesta897]

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

[@xemuz]

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

[@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

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

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

[@kaneanitesV2]

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

[@susanagc3937]

Explicas muy bien, gracias por compartir.

[@Jygproyectosweb]

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

[@susanagc3937]

suscrita, XD. un saludo

[@paulinalema9381]

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

[@santuarydark]

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

[@natymatgar]

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

[@Jygproyectosweb]

Naty Grunge Muchas gracias :)

[@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 👍

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

[@ulisesa.chavez9526]

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

[@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

muy buena explicacion, felicitaciones

[@fernandosanchez5535]

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

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

[@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;

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

[@javierrazonacosta58]

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

[@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

[@Cuervete]

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

[@rubenvega6591]

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

[@SAMTRAXXX]

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

[@josetuz]

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

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

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

[@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

[@carmenguerrero5821]

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

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

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

[@nontuearo3024]

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

[@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 :)

[@santiagocalvo6619]

Que talento para explicar ... Muchísimas gracias

[@hipolitomanuelriveraoblita7690]

de todos los videos tuyo son los maximo lo explicas tranquilo y detallado muy bien 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!

[@nicolasdegregorio6961]

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

[@jorgeaguero9152]

Simplemente espectacular. Muy bien explicado. Que maestro.

[@MAUROFXONE]

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

[@gilberthsteevenmontejodiaz70]

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

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

[@natiorobles6339]

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

[@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 📚

[@luisfernandoescobar2131]

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

[@keny1986]

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

[@julianpincheira6207]

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

[@cesararciniegas3990]

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

[@Jygproyectosweb]

+cesar arciniegas 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!!!!!!!

[@juaneblak8366]

me he llevado horas viendo la logica de el codigo porque no me funcionaba la clase checkbox y el unico problema era el signo que lleva la ñ pense que era un guion . Gracias por el dato amigo

[@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

[@bunnyrabbot4838]

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

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

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

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

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

[@brawnie3969]

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

[@rafaelvillegas5011]

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

[@Jarrieta300]

Hey men gracias fue de mucha ayuda!!!, por cierto para los que no lo sepan en Macbook PRo la virgulilla(así es como se llama el signo) se coloca con Alt+ñ.

[@rulo9975]

Muy buen tutorial,gracias! . Al principio no me salía y me desesperé mucho, he visto los comentarios y hay muchos que dicen lo mismo. Yo también utilizo "sublime text 2". fijense bien en todo el código html y css , una etiqueta sin cerrar o un punto y coma sin poner puede hacer que no salga y uno se desespere!, a mi fué lo que me pasó.

[@you2dream]

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

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

[@juannermendez1148]

muy buen video gracias , tomando en cuenta de que es un poco complejo muchos pasos para lograrlo para ahi vamos , con la practica todo se puede

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

[@edibere]

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

[@chefgreen3864]

mano a ti te doy like, le paso tus videos a mi grupo de trabajo y todo XD en fin, de verdad te agradeceria que me sacaras de dudas de como hacer el menu desplegable de este estilo solo con css

[@Laura-er5hb]

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

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

[@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

[@ronaldchoque7055]

Me encanto el video muy bien explicado paso a paso, me es de mucha utilidad, felicidades sigue adelante...

[@patricioorlando2315]

vine desp de un año porque no me acordaba. muy buen video! para la gente que no le salió lo último, en mi caso fue tema de sintaxis. puse #btn.menu:checked etc etc y tenia qye haber puesto #btn-menu. fijense capaz en una de esas tuvieron el mismo error. Saludos!

[@joseantonioamayapostigo2542]

Juan Carlos mejor que este tutorial en cuanto a css no lo he visto ,Gracias por tus aportes se podria hacer el menu en vertical ?? seria muy interesante.

[@MrDeluxonic]

Hola amigo, quisiera dar las gracias por cada uno de tus videos, ya he visto varios y me han sacado de varios apuros, enseñas muy bien y de forma muy practica. Eres el mejor enseñando Diseño web en todo youtube! Por cierto, quisiera saber si estas en Perú y si aceptas donaciones, me gustaria colaborar como agradecimiento por todo tu noble trabajo!

[@Jygproyectosweb]

Hola amigo que bueno que te hayan servido nuestros tutoriales, en nuestro blog puedes encontrar un botón de donar. jygproyectosweb.com/blog Muchisimas gracias.

[@ronnydelossantos6254]

Hola Me gustó bastante el tutorial, todo lo que hiciste lo necesito para una práctica, mil gracias

[@mor3lias316]

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

[@colussuslf8722]

He visto tus vídeos y tienes excelentes explicaciones y buenos temas. Saludos.

[@Punisher187_1]

Parcero me echo un cable con hacer mi nav bar responsive que ni se imagina muchísimas gracias y que gran vídeo la ptm jajaja