Menú Responsive Html y Css - Fácil y Rápido
HTML-код
- Опубликовано: 16 сен 2024
- Vamos a crear un menú de navegación adaptable a todos los dispositivos, es decir un menú responsive design utilizando sólo HTML y CSS.
Descarga el código:
mangatschool.c...
Este menu responsive con html y css está diseñado con el método clásico.
Imagen de pixabay.com/
#menuresponsivehtmlcss
#menuhtmlcss
#menuresponsivecss
Excelente explicacion! Me ayudó muchísimo para un trabajo que tenía que hacer. Hasta ahora fue el mejor video que encontré para crear un menu responsive, simple, sencillo y conciso.
Muchas gracias por tu comentario y apoyo
Guau... me sorprendiste, siempre use javascript para hacer esto, muy bueno de verdad, solo con html y css. me suscribo.
Me encanta como explicas, me ayudará en mi proyecto de clase. Graciaaas.
Gracias
@ me gusto como explicas amigo, aunque te recomiendo que hagas uno con flexbox, pero muy buen video
Por mucho el video más simple que he visto sobre como hacerlo, me ayudó muchísimo. Super fácil de entender y lo mejor de todo, ahorrando unas cuantas líneas de código, que también ayuda mucho. Suscrito desde ya. Felicidades por este contenido tan bueno.
Muchas gracias, de verdad que tu comentario me ayuda ya que también hay personas que no les gusta y me hacen dudar. Gracias 😀
Está excelente, nada mejor que hacerlo simple, siempre será mejor para el rendimiento de la página. Yo estoy comenzando en este mundo y desde ya te tengo como referencia.
Después de mirar horas de videos y tratar de entender... solo digo mil gracias! me suscribo .
Me alegra haber ayudado, hasta pronto
@ hola otra vez , coloque un carousel de bootstrap , carousel se sobrepone en el menu responsive queda debajo ,alguna solucion?
@@Jorg-rockoff ten mucho cuidado ya que no debes combinar esa tecnología de forma desordenadas. En este caso debe priorizar el Bootstrap, crear un container, row y col, dentro puedes poner el html y css que explico en este video. Y luego otro container row y col y dentro el slider. Ten mucho cuidado, en Bootstrap hay que ser muy ordenado. Saludos
Lo sigo mi hermano,buen aporte desde el chocó Colombia
Muchas gracias, un abrazo y muchas bendiciones para UD y toda la familia
Excelente maestro. Muy fácil seguirte y mejor aún, entender qué estás haciendo, por qué y para qué. Agradecida. Obvio, ya te sigo.
Muchas gracias por tu visita, bendiciones y mis mejores deseos
Muchas gracias, me estaba volviendo loca intentando hacer algo así sólo con HTML y CSS ya que aún no domino JavaScript. Maravilloso vídeo 🥰
Poco a poco, a seguir adelante 🤠
3:14 alt alternativo/a para cuando por desconexión a internet no se vea el logo, se verá el texto alternativo que hayas puesto; usualmente 'Logo' ~ virgulilla. Gracias por enseñar.
Así es, y también sirve para que Google entienda la imagen, la etiqueta alt es muy importante para el SEO
Estaba buscando el simbolo "~" nisiquiera sabía de su existencia. Gracias por anotarlo jeje
Excelente bro... se agradece el tiempo en enseñar de una manera simple. Como acotación, mientras manuipulabas el menu, deberías haberlo dejado con el -100% en cero para que se vieran los cambios, pero igual se entiende y agradece...
Claro, la idea es que c/u pueda darle tu toque personal, saludos
Muchas gracias. Has sido de gran ayuda para que pudiera comprender como funciona cada parte. Sigue así 💪
que bien!
La mejor explicación del mundo de yt, ufff un crack hermano
saludos
Gracias, Pero muchísimas gracias me ayudo con mi tarea, se ganó nuevo suscriptor y me vere todos sus videos
TE AMOOOO, SOS UN CRACK BRODER EXCELENTE VÍDEO
Gracias bro
Me re ayudaste. Con esto pude aprender a hacer el nav con el bars sin usar js. ¡Muchas gracias!
sos un genio y le ponés mucha buena onda!!
muchas gracias por la excelente explicacion muchas bendiciones para usted
Gracias y bendiciones para ti también
Gracias ...funcionó ....excelente
Excelente
Excelente video me sirvió de mucha ayuda...Saludos desde Mexico
Gracias! Saludos!
Aquí un seguidor leal, fiel y un nuevo suscriptor.
Muchas gracias, un abrazo y hasta pronto!
Excelente, gracias por el video
llevaba rato buscando como hacer esto sin JS
Con gusto
Mil gracias... Tus videos son excelentes. gracias!
genial, muchas gracias, no conocía esas opciones de css y ahorran tocar js
Si, el css es muy ligero
Excelente
gracias colega
Thankx for breaking it down.. great tutorial for beginners
Super Capo!!!!
muchas gracias, saludos y mis mejores deseos!
Muy Buen video Ayudo mucho , entendi conceptos que no tenia del todo claro muchas gracias !!!
Gracias
¡Excelente explicación! 🙌🙌🙌
Gracias. Saludos
22 minutos mirando la pantalla sin parpadear .. acojonante , mis diecesss !
Gracias
Muchas gracias. excelente video, mis felicitaciones.
Aquí un nuevo seguidor .
Bienvenido, muchas gracias
excelente amigo, bien explicado, corto y efimero, asi deben ser todos los videos de youtube, proque por lo menos yo un video de mas de 30 minutos no veo
Ok
gracias master, me faltaba ese menu para mi template de practica. PD: nuevo sub y like
Gracias colega, hasta pronto
¡Muchas gracias, ahí lo tienes!
Gracias por tu visita, hasta pronto
Impecable!
Buenas, te tengo que felicitar por la manera tan amena que tienes de explicar las cosas, muchas gracias por tus aportes, un saludo.
Hola, muchas gracias
este video me ayudo demasiado gracias bro
Muchas gracias, excelente video
Gracias a ti, hasta pronto
Excelente, buen contenido, muchísimas gracias por la explicación
Gracias por tu comentario, hasta pronto
Muy bien Bravo
Muchas gracias! Nuevo suscriptor
Perfecto, hasta pronto.
gracias gracias!
Gracias por tu comentario
muy buen video hermano gracias!
excelente explicacion bro, se entendio todo.
bro Muchas muchas gracias deje mi like y me suscribi gracias bro me sirvio un monton de verdad
Gracias colega, un abrazo
muy interesante y genial
Gracias!
Genial , esta explicado al detalle, gracias 🙂
Gracias por tu apoyo 😃
@ espero subas mas videos , gracias por compartir tus conocimientos 😊
justo estoy subiendo más videos de cursos completos, en agenda esta un curso de html y css completo, otro de php con mysql desde cero, también modelamiento de base de datos y uno de sql server. Poco a poco voy a meterlos al horno, saludos!
Muchas gracias
De nada
este hombre es un duro
saludos
Expectacular
Muchas gracias
Hola mi bro, todo excelente, pero si se pudiera agrandar las letras del VS estaría mejor, de igual forma me sirvió gracias por el aporte!!!
buenísimo
Gracias
Muy buen tutorial y muy lindo el menú. ¿Se puede alinear el menú pegado al logo en vez de la derecha y cómo se haría?. GRACIAS. Un gran LIKE
Si se puede, como sería no se porque tengo Miles de codigos y no recuerdos todo
💯💯💯
The basics for anyone. Definitely putting tNice tutorials in my notes.
GRACIAS TE AGRADEZCO
Gracias por tu visita, me alegra leer los mensajes, saludos
Muy buen video ,me ayudo muchisimo!!!!!!!
Muchas gracias por tu apoyo 😃
Nuevo suscriptor, excelente explicación. Mil gracias!!!
you're a genius man...
Thanks
Nuevo suscriptor, ando bien en HTML pero cuesta mucho el CSS, aca puedo ver claramente como utilizas las herramientas, y lo hace mas sencillo de entender, gracias
Muchas gracias por tu comentario, aprender css toma un poco de tiempo, es poco a poco, a tu ritmo, sigue adelante. Un abrazo
@ Si la verdad que si, ojala me puedas ayudar me olvide de consultar y me estoy volviendo loco, yo alado de lo que seria el "logo" Puse mi nombre dentro del con un Span, pero no puedo centrar el nombre con el logo, que accion deberia utilizar?
@@crashfdx eso lo haces rápido con flex, porfa busca en mi canal menu responsive html5 css3 que es diferente a este video, ahí lo hago con Flex que es mucho más fácil y con 2 líneas de código se centra todo lo de adentro. Saludos
@ muchisimas gracias
¡¡¡ GRACIAS, GRACIAS, GRACIAS !!!
A la orden
it a go!
sos el mejor
Gracias colega, el siguiente video sale la próxima semana y será de Bootstrap 5 y Crud php 8. Un abrazo
thank you so so so much your a great person you helped
muchas gracias me aclaraste varias dudas
Con mucho gusto
no entiendo xq no me carga el en mi pagina, es lo unico q no me sale
Es un error clásico de novato, deberás superar esa prueba. También puedes probar con los iconos de Bootstrap y los de google
Muchas Gracias , me ayudaste a salir de muchas dudas y lograr lo que queria
GL bro
sos un capo
Muchas gracias 😊
Gracias
Igualmente
Holaaa les comento por si les aparece un cuadro azul atrás a la hora de usar desde el celular
-webkit-tap-highlight-color: rgba(0,0,0,0);
Apliquen esto y se le soluciona la vida😊
🤠
Hola, muy buen video, de pronto tienes un video para aprender menú vertical acordeón responsive. Gracias!
Ninguno, pero lo tendré en mente, saludos
MIRA VE, QUE BENDICION VE
Hola amigo, no funciona mas el link de descarga del codigo
arreglado
Muchas gracias!
Hace tiempo estoy buscando como hacer responsive el menú y lo explicaste tan bien que al fin lo entendí jaja
Solo tengo una duda, como seria para que el menu tenga sub menus?
Para eso dentro de cada li pones ul y dentro de este ul pones varios li
That was an amazing video and I feel like I can actually get started using soft soft. Thank you so much!
You're so welcome!
Bro por favor permiteme ser yo el lider de tu futuro club de fans, TE AMO eres genialllllllllllllll
Jajajaja ya acepto 🤩❤️ gracias amigo, me alegra mucho. Mañana saco otro tutorial con Flex, veremos cómo van. Un abrazo y hasta pronto.
@ genial, estaré pendiente. estoy viendo como completar lo que hice contigo con algun efecto pallarax creo q asi se escribe jeje
@@danielomxm ahh ese efecto, tienes que hacerlo con scroll y Javascript. Vamos tu puedes. Cuídate, estamos en comunicación.
Muchas gracias por el tutorial me encantó ( pero tengo una duda...como haria que la transición del inicio se quite cuando eliga otro tag?.. Es que se queda hay cuando pues ya estoy eligiendo otro y eso se ve raro)
modificar en las transiciones del css probar tiempos y paciencia
amigo re turbia la imagen de los niños pero igualmente buen video like y sub
Jajajajaja no lo había pensado
¿por que si desplazas hacia abajo en el menú hamburguesa la pagina se desplaza?
excelente video, una pregunta? como redirecciono al estar en menu responsive a la sección servicios. ?
Hola, eso depende. Si es landing pague se hace con ancla utilizando # en href, pero si es otra página entonces escribes servicios.html dentro de href. Saludos
Buenas noches, estoy haciendo tu video y cuando en el minuto 14:42 insertas la imagen, en el section, a mi particularmente así no me aparece. ¿Me podrías ayudar a hacerlo?. Muchas gracias.
Solo debes ver bien el tutorial, en informática los errores son de los humanos, las máquinas jamás de equivocan, saludos
🙏Bro, una consulta soy nuevo en esto y ahora no sé cómo hacer cuando al presionar un botón del menú (Mobile) se cierre el menú porque cuando presiono "INICIO" me redirige a la sesión de la página, pero no se cierra el menú, ayuda prease🙏
Trataré de revisar el código
Gracias amigo por tu video me ayudo bastante, pero cuando pongo imagenes dentro de un nav > img cuando pongo que me salga vercion celular las imagenes me salen encima y no debajo
ok lo revisaré
Saludos, esta muy bueno el curso, tengo una consulta como se llama esa forma de aplicar estilos , o sea , nav ul li{} no encuentro en tutoriales y con simple CSS no me funciona, ya lo hice igualito y no sale, de repente usas alguna extensión o algo; gracias de antemano su respuesta.
no hay truco, el colocar css de esa forma se llama jerarquía y tiene una razón de ser, saludos
amigo tengo una duda el nav no debe ir siempre adentro de header?
Lo que se recomienda es poner logo, nav, buscador y otros similares dentro del header. Pero no hay un estándar, así que somos libres de realizar variantes lógicas según el proyecto a trabajar. Saludos y hasta pronto.
Todo excelente pero a la hora de usar el @media no me ocurre nada
¿a alguien le ocurrio algo similar?
Puse widht en lugar de width se cancela todo.
Te felicito por encontrar el problema tu mismo, y bienvenido que así pasamos horas y horas buscando errores. Una abrazo
Buen video mas fácil Imposible
Gracias 😎
👍🙏🙏🙏🙏🙏🙏🙏
gracias por tu visita
excelente el video me ayudo bastante, solo tengo una consulta, para colocar un icono a la izquierda de cada opción del menú como tendría que hacerlo?, gracias
Lo pones antes del texto
Esto es justamente lo que llevo buscando durante siglos. Muchisimas gracias. Por cierto, has tomado algún curso de CSS? Veo que dominas muchos conceptos importantes.
pronto sacaré uno
Excelente video... ¿Como puedo hacer para que el menu se vuelva a ocultar una vez le des click a un elemento de ese menu en la version APP ???
Configura otro check o con javascript
Muy buenas... Quizas hubiese sido mucho mejor utilizar un enfoque mobile first que segun tengo entendido es mejor para el SEO, de todas formas muy buen trabajo. Gracias por tu esfuerzo. Saludos.
Imposible, recuerda que este video lo ven chicos amateurs o estudiantes que con mucha dificultad logran hacerlo, entonces si aplico lo que mencionas ninguno de ellos logrará seguir el vídeo. Obviamente a nivel profesional mobile first es indispensable, saludos
consulta, y si quisiera que al hacer click en alguna opcion del menu, como hago para que el menu vualva a ocultarse automaticamente?
Es cosa de aplicar la lógica simple de acuerdo a cómo fue contenido, lo hice hace meses así que no tengo el código a la.mano
ayudaa, cuando ya estoy finalizando y le doy #check:checked ∼ ul{ left: 0 }; le doy click y no me aparece nada , alguien con ese problema
x2
Descarga el código y revisa
cámbiale el nombre a todos los check a ver, yo lo hice y funcionó
muy buen tutorial pero el left -100% para movil yo lo dejaría por ultimo para que se entienda que cambios haces después y estando oculto el menu no se ve
Entiendo, la idea es ir mejorando
Gracias por el video, me suscribo.
Cómo pongo texto encima de la imagen como para poner un bienvenidos
Un div
La verdad que esto era lo que andaba buscando!! Y como podria hacer para que cuando se abra el menu el label cambie a una "X" ?
javascript
Está bueno tu video aunq si no hubiese visto otras explicaciones antes no hubiese entendido nada de lo que haces
Ok
Hola, todo correcto. Mi detalle está en que quiero usar ese menú para navegar en secciones del mismo index, pero en la versión de celular, al darle clic, no desaparece el background, se queda en mi fondo, ¿cómo podría hacerle para que desaparezca apenas selecciono uno?
Se debe revisar los css
Change the "Program" from Agressive TE to Analog Base 1 TE inside the GMS setup equlizer panel..
ok