Como hacer un menú desplegable con HTML y CSS
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- En este videotutorial aprenderemos a crear un menú desplegable con sub menús dentro, todo eso con solo HTML y CSS sin la necesidad de utilizar otros lenguajes como javascript.
♦ Blog de diseño web:
www.falconmaste...
✔️ Curso Completo de Diseño Web Profesional:
www.udemy.com/...
✔️ Curso Completo de React y Firebase:
www.udemy.com/...
✔️ Curso Completo de PHP y MYSQL:
www.udemy.com/...
✔️ Curso de Bootstrap 4:
www.udemy.com/...
✔️ Curso Completo de Woocommerce:
www.udemy.com/...
---
♦ Tutorial escrito, recursos y códigos:
www.falconmaste...
♦ ¡Tutorial Como hacer el menú horizontal de Apple.com!
• Como hacer el menú hor...
♦ Tutorial como hacer un menú de navegación con animaciones:
www.falconmaste...
♦ Tutorial como hacer un menú de navegación deplegable, adapable a dispositivos moviles:
www.falconmaste...
♦ Tutorial como hacer un menú de navegación avanzado
www.falconmaste...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmaste...
♦ Curso patrocinado por okhosting:
www.okhosting.com
9 años después, me has salvado la vida.
x2 😅
10 años 🤡
Tengo una pregunta puse style type pero agrego padding pero no lo reconoce en el head sera la version de mi visual o que ?
@@Guzman_J94 11 años pa
@@Guzman_J9411😂
Llevo días llorando porque no entendía otros videos que explicaban esto mismo hasta que llegué aquí! GRACIAS
Muchísimas gracias. Es alucinante que haya personas que dediquen su tiempo a enseñar sin pedir nada a cambio. Estoy empezando a aprender html y css y tu lo haces muy fácil de comprender ya que dices para que sirve cada cosa en todo momento. Muchas gracias, de verdad!!!!
EL CÓDIGO PARA LOS QUE NO QUIEREN ESCRIBIR
menu desplegable
*{
padding:0px;
margin:0px;
}
#header{
margin:auto;
width: 500px;
font-family: arial, helvetica, sans-serif;
}
ul,ol{
list-style: none;
}
.nav li a{
background-color:#000;
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.nav li a:hover {
background-color: #434343;
}
.nav > li {
float:left;
}
.nav li ul {
display: none;
position: absolute;
min-width: 140px;
}
.nav li:hover > ul {
display: block;
}
.nav li ul li {
position: relative;
}
.nav li ul li ul {
right: -140px;
top: 0px;
}
inicio
productos
animales
animales
animales
animales
animales
animales
animales
animales
animales
animales
animales
animales
animales
animales
servicio
animales
animales
animales
animales
animales
animales
animales
animales
ubicacion
info
sos un grande no te conozco y ya te amo
algunos heroes van sin capa xD
Gx broo❤❤
2012 el vídeo y aun funciona excelente en nuevas interfaces, muy bien, tome su like buen hombre.
recomiendo no olvidar agregar # al link que corresponde a los menues desplegables, ya que vaciio hace que el menú no pueda desplegarse cuando usamos pantalla tactil, como celulares y tablets. Un detalle pequeño, pero super importante. Excelente el tutorial. Muy facil y muy bien explicado.
Gracias chicos!! son lo maximo!! resulto, me siento emocionado de poder estar haciendo mi propia web desde cero. Cuando tenga el resultado final ya publicado, espero que ustedes enten entre los primeros en visitarla!! Dios, que alegria!!
¿Y cómo te fue con tu página?
solo por comentar, en la no es necesario una etiqueta de cierre.
Notepad++ es muy bueno, yo lo usaba mucho antes, ahora uso sublime text, realmente es cuestión de gustos.
Prefiero Visual Studio Cod. Pero es cuestión de gustos
@@SrICosmic El comentario es de hace 7 años en ese entonces el rey era sublime
Convertir las a en bloque darles padding razonable, y flotar los nav>li
Muy bueno, claro y simple, me ayudo de mucho. Mil Gracias.
Que copado de facil !
@@diegoapestegui6489 QUE HACES ACA PROFEEEEEE??? jajaja aca haciendo una paginita yo
@@marianodoors aprendiendo, ñoñando 🤓
Brother, usted conoce, me salvó la tanda, ocupaba un menú sencillo y funcional par añadir a salto de resolución con media queries para 480px de ancho, esto me va de lujo, mil gracias... saludos desde C.R
Muchas gracias Carlos!!!
Ya vi los tutoriales de css y html y explicas extremadamente bien, te entiendo mas a ti que a mi profesora de diseño web de la universidad xD
Gracias por compartir tus conocimientos con nosotros,ahora empezaré con bootstrap :D
Saludos desde Colombia :)
Hola, sé que lleva años que ese vídeo de suplicó, pero sólo quiero agradecerte por el mismo, me ayudaste bastante en lo que hago mi proyecto, muchas gracias.
Falcon, es lo mismo colocar ="nav">
que colocar
submenu
?¿
me parece que si
En html5 para el menu de navegacion solo se usa en versiones anteriores era con "class" pero si es lo mismo.
Excelente trabajo, me sirvió muchísimo, tiene mas de 10 años y funciona a la perfección, muchas gracias!
Amigo tengo un problema al poner el float left que no lo lee
P.D. lo estoy haciendo en bloc de notas
Fijate bien, pues yo tambien lo estoy haciendo en bloc de notas y si lo leyo.
el bloc de notas no importa, mientras el formato del archivo sea el mismo no afecta P.D. Tambien prefieron programar en bloc de notas xp
y yo en paint :v, ok no, no se crean eso
si lees esto dejame agradecerte, gracias a este video aprendí mas q en 6 horas de clase, ademas salvaste mi proyecto de grado.
No me salio el menu desplegable le coloque
.nav li:hover > ul{
display: block;
} y no me dio aparecen los submenu
a mi también me pasa lo mismo aún que llego 4 años tarde xd
@@user-wm2lj7qp2r igual no sale el submenu
he visto un sin fin de tutoriales para esto y este fue el único que pude adaptar a mi página
Thanks Dude, you saved me... your tutorial is great!, even to understand as only speak BrPortuguese.
9 años despues y gracias a este video me sirvio en mi proyecto de mi carrera de Prepa (T.I.); Gracias Broo
Gracias Hermano te debo mi calificacion final XDD
Vengo un poco atrasado (años) mirando estos videos jeje ... excelente trabajo maestro!! Muy agradecido por esta generosa transferencia de conocimientos.
@Léo Leblanc Para eso puedes utilizar en vez de background-color usar un background:url(direccion te tu imagen);
Con css sale (y) ... pero con bloc de notas solo se queda hasta un punto
.nav li:hover>ul{
display:block;
cuando pasas el mouse por encima no aparece nada :/ ...
pero en css si sale... u.u
dime se con BLOC de notas usted puede hacerlo .. Gracias ... :)
Ricc anyms
creo que te falto poner despues de li la "a" (la etiqueta link)... consejo, utiliza notepad ++ en vez de bloc de notas =3
Ricc anyms como uso dreamwever pero no aparece el hover :S tal y como dices .. que hiciste?
Ricc anyms Lo hice, pero me presenta el mismo problema, alguna sugerencia que tengas?
es necesario utilizar notepad ++ ? si es asi, donde lo descargo?
amigo como hago para centrar el menú ? me queda un poco hacia la izquierda :(
Después de cinco años está muy bueno el tutorial y....funciona perfectamente. Estoy en los primeros pasos de html, no lo entendí todo, pero aprendí mucho. Es cuestión de asimilar las instrucciones, familiarizarse. El código html lo tengo guardado y lo voy a seguir mejorando, tengo algunas ideas....MUCHAS GRACIAS
:( hola, muy bueno el tutorial, bueno he hecho todo como lo hiciste, pero trabjè sobre una parte del HTML que ya habia empezado que no era mucho y no me sale el menu asi, sino que me salen regado, no se despliegan hacia abajo. Estarè buscando cual es el error, pro que me pasa ese desorden en el menu. Gracias muy bueno !
lo encontraste el error ??
este error de hace 7 anios me perturba, ojala hayas encontrado la solucion
Este tipo de videos salvan cursos
Que si no
la parte:
.nav > li {
float:left;
}
no me quiere funcionar, el menu se queda en columna siempre y no en fila. Me puedes ayudar?
igual me pasa
ya somos 3
El error es que probablemente estén dandole estilos a la class en css (.nav) y en el html esten usando solo la etiqueta
yo igual... =(
me pasa lo mismo cuando pone .nav
Epa carlitos en este si se mandó, me quedó muy bien le voy a cambiar los colore y lo voy a poner coqueto.Muchas gracias por tu paciencia y que sabes enseñar gracias nuevamente un abrazo LuisOrtiz desde Venezuela
Hola, a mi porque no me salen los primeros elementos en horizontal?
Si se me permite pego el codigo html:
Enlace 1
Enlace 2
Enlace 2.1
Enlace 2.2
Enlace 3.3
Enlace 3
Enlace 4
Vi tu vídeo en tu página y vine hasta aquí para agradecerte, me funcionó, GRACIAS!.
Carlos como hago para que mi menu ocupe un 100% del ancho de la pagina o de la capa??
Victor Cedeño Le tienes que cambiar el width de 960px a 100%
***** lograron poner que todo el menu cubra la pantalla?
Necesito eso para mi proyecto de pagina web
!HELP ME¡
***** es en el header :v
uff hasta ahora responde :c
ya pa que igual no pude encontrar como hacer full el menu y saque una A en el proyecto xD
concuerdo con tu opinion mas vale el conocimiento que el diploma que vayas a enmarcar...bueno si pregunte y investigue pero bueno en este caso no encontre solucion a mi duda pero ya si aprendi a hacer menus
Te felicito, muy buena implementación, es interesante saber porque vas poniendo .nav li ul li, osea por que va la secuencia y también .nav li a: hover. nuevamente excelente. Gracias.
.nav > li {
float: left;
}
Al llegar a esta parte no cambia nada :'(
Me puedes ayudar por favor :)
me sirvio.
para los que no se les desplego, la solucion que yo utilice fue, hacerlo en una plantilla en blanco y cuando el producto estuviera terminado pegarlo en la plantilla ya creada. a ver que efectos tenia.
Hola , Falcon ,en la parte :
nav > li {
float:left;
no se me pone los nombre inicio ,servicio... en linea no se me acomoda y por consiguiente esta todo en bloque.
¿que puedo hacer?, gracias.
solucionaste? A veces hay que revisar bien el código por que por una letra o un espacio mal colocado no reconoce el código.
me sucede lo mismo.. llegaste a arreglarlo?
igualmente que pudo pasar lo necesito urgente gracias
Si es muy sencillo de hacerlo pero eso no es lo importante, lo importante es quien explica y como lo hace, tú lo hiciste a la perfección.
creo que te amo, me gustan las mujeres pero eres l mejor explicando asi que te amo xD
muchas gracias por el video... me ayudo mucho ahora que estoy en pleno curso de diseño páginas web....
♦ Curso de PHP y MYSQL: Completo, Práctico y desde Cero
www.tutorialdephp.com
Ya se venció la oferta :( Si tan solo hubiese visto antes
Ahorita mismo hay una: www.udemy.com/php-y-mysql/?couponCode=OCT-15
Termina en este mes
Muchas gracias, pero no tengo tarjeta de crédito, pensaba pagarlo en un agente
Hola! me gustaría saber como puedo alargarlo para los lados, por favor!.
Amigo tengo un problema, el menú sirve pero cuando abajo de el encabezado donde va el menú agrego otro div los submenus se cierran.
chico con todo respeto dejame decirte que eres una chingonada! me salvaste muy bien explicas super bien, claro y consiso! Gracias!
Sandy Cordova Vilchis Genial, me alegra que te haya servido mi video :D
no me sale y eso que lo hice con notepad ++ cuando pongo **.nav > li{
float;left;
}** me desforma todo que hagoo
ya lo solucione XD
romero santos dos Me puedes decir como?tengo el mismo probema
romero santos dos ayuda , tengo el mismo problemaporfavor
Yo tambien lo soluciones pero no me acuerdo como creo que tenia un error al cerrar
:s
Raquelml Vazquez en #header{ width: aumenta los pixeles
D: gran video, pero en la parte de ".nav > li" cuando uso el float left no se me acomodan, tal vez sea por mi visual studio?
muchísimas gracias por tu tutoria, este vídeo me ayudo como no tienes idea, procurare seguir viéndolos y aprendiendo de ellos, éxito en tu canal.
WooooooooooooOoOwW
El unico que me a servido de aproximadamente 10 vídeos que eh visto.
Gracias,ya eh aprendido mucho de ti,ya estoy armando mi propia pagina con mi propio estilo.
Lo unico que no tengo es hosting,y no tengo la opción de pagar por cuestiones personales.
El que me diga como puedo poner un hosting y dominio gratis yo podria ayudarlo con lo basico para crear su propia pagina web.
GRACIAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Me salvaste bro, 9 años después sigue sirviendo tu video :)
como hago para hacer el menú de forma que se abran los submenus pero solo si les doy click al ???
9 años despues y todavia funciona... excelente y gracias
Brother muchisimas gracias, Siempre e visto tu canal y cada cosa que enseñas lo haces con claridad y pasión, TE FELICITO!!
PORQUE NO VI ESTE VIDEO ANTES!!!!! muchas gracias
Traté de replicarlo en Yii pero los submenus del primer , que serían, si entendí bien, los se despliegan hacia la derecha en lugar de hacia abajo. Que puede ser que esté fallando?
gracias hermano de verdad que eres de ayuda, he tratado con varios tutoriales y plantillas y no me funcionaban en visual studio, y con tu ayuda he podido hacer el menu que necesito y variar a mi gusto mil gracias bro por tu aporte.
2022 Y ESTE VIDEO SIGUE SIENDO EL MEJOR, LETSGO
Sos un capo, lo entendi a la perfección
segui adelante
Un merecido Like (Y)
Da pai me acabas de salvar de 6 en informatica eres lo mejor.
Gracias amigo, soy nuevo en el desarrollo web y estoy haciendo una web como proyecto de front-end y la verdad no tenía ni idea de como hacer un menú desplegable. Sin embargo yo ya tenía hecha mi barra de navegación por lo que no quería rehacerla así que tuve que adaptarla en base a lo que explicaste y me funcionó :)
Muchas gracias amigo, esto me ha resultado mucho mas facil para hacer mi pagina jajajaja, te lo agradesco, excelente aportacion!!!. Saludos
Me acaba de funcionar perfectamente, tiene muchos años el video pero sigue siendo muy util, tome su merecido like y suscribe buen hombre.
Gracias!
compi eres un genio, me ayudaste mucho con un submenu que no se me desplegaba, muchas gracias por el video y muy bien explicado!
Me sirvió mucho para mi trabajo final, saludos desde argentina.
NAH CHABON SOS EL MAS GROSO , este es el mejor tuto que he visto hasta ahora
wow me salvaste lo hice en bloc de notas, te segui los pasos y no me salia pero despues fui a tu pagina donde esta escrito el codigo y me di cuenta que me equivoque al escribirlo y por eso no salia.
te pasaste gracias!
Si, normalmente siempre suele ser un error mínimo de código, que bien que te haya resultado :)
Gracias. Muy bien explicado y eres un gran comunicador. Muchas gracias. Suerte y éxitos.
Realmente cuando veo un tutorial me da mucha pereza dar like, pero he de admitir que con este lo he entendido todo a la perfección y me ha ayudado mucho, a si que he iniciado sesión tan solo para darte like. Te lo mereces, está muy bien hecho!
Muchas gracias!
2021 no me funcionaba el menú desplegable de WP y lo solucione con esas lineas de CSS!! GRACIAAAAAS!!!
El video es de hace 6 años pero igual me ha servido, gracias! ♥
10 años después, y aún siguen utilizando este video como ejemplo en donde estudio. Bueno video
Gracias por la info, despues de casi 10 años, like + subscripcion!
Muchisimas gracias hermano. un aporte de gran ayuda. saludos desde venezuela
Gracias por compartir este vídeo ya que es de mucha ayuda para estudiantes como yo que me encanta este tema. felicidades desde Colombia
Excelente video, semcillo y concreto, trabajo con AS400 pantalla verde y estoy aprendiendo, y este video esta perfecto para aprender, el manejo de menu, gracias, tendras un video de como diseñar la pagina principal, masterpage.
Carlo era lo que estaba tratando de aprender...gracias muy bueno...continuo con el otro avanzado...
aun después de tantos años y sigue siendo muy útil
esta muy bueno el tutorial, y me sorprendio lo facil que es hacer esto con css. gracias!
Muchas gracias por el tutorial, justo necesitaba crear submenus con css jaja
GRACIAAAS al fin encontré un turial que solo trate de un lenguaje, tengo que hacer 5 páginas web de tareas con esos menús :'), me facilitarás un poco más la tarea gracias, NUEVO sub ❤️🥺🥺
Muy bien explicado, de forma clara y sencilla. Gracias.
like y suscrito!! Me has ayudado mucho. eso si, yo he hecho el menú en horizontal. Me ha bastado con no escribir float:left; y después ir jugando con los px. Muchísimas gracias. Un saludo desde Madrid
perfecto ando en una entrega de trabajo final de la Universidad y me ha salido de la ostia
10 años después , me has salvado la vida
gracias compañero, tu explicación es maravillosa, esta buscando la forma de darle mejores estilos a mis paginas web, ya que pues programo en html5 Css y java script, y con esto me das mas herramientas, muchas gracias bro
Se rifaron en el Css son unos dioses en esto del html jejeje saludos y gracias por ello!! Excelente aporte!!
hola falconmaster...solo queria agradecer por los videos, estan realmente muy buenos...bien explicados pero al grano. Ya vi los de Css y los de esta lista y aprendi demasiado para poder terminar una pagina q estaba diseñando...sigue adelant saludos desd Costa Rica
Amigo buenas tardes, muchisimas gracias por este y todos los tutoriales que realizas para ayudarnos a los que estamos integrandonos a este mundo de la web.. +10 !
Qué buena manera de explicar, ya entiendo mucho mejor los códigos, excelente video. Me suscribo
hola me llamo juan sebastian, dejame decir que eres el mejor, mostaste como hacerlo, yo pude, creo que los otros se les olvida cerrar las reglas y yo estuve pendiente, gracias
Muchísimas gracias por ese tutorial. Lo explicaste de maravilla!!!!! Entendí mucho. De verdad, muchas gracias!!!!!!
Hombre, quedo eternamente agradecido por tu trabajo, muy bueno y de calidad gracias
Tantos años y aunque ya hay mejores formas de hacer algunas cosas, sigue siendo revisitable
Excelente!!!!!! Gracias amigo no sabes del aprieto del que me acabas de sacar, eres todo un experto, gracias a ti me empezo a gustar esto de hacer paginas web, te lo agradezco y sigue asi!! :D
muy lindo tuto y muy entretenido fácil de hacer saludos desde Paraguay
Impecable. Simplemente brillante. Gracias.
Gran video hermano, me salvaste de un problema, te agradezco por la buena explicacion de tu video
Necesito ayuda en el minuto 10:50, cuando se supone que deben desaparecer los submenús, el de servicios me aparece un poco abajo, como si estuviera salido. Y ya revisé todo el código y no encuentro falla. Alguien ayuda!
me sirvio bastante , me suscribo xd salu2 lo estoy viendo en el 2020
para los que no pudieron encontrar la solucion al problema de la parte
.nav > li {
float: left
}
por que estan usando la etiqueta nav
les comento a mi tambien me paso y estuve buscandole la solucion hasta que la encontre.
tenia mal cerrado los donde colocaba algun submenu. En aquellos que le colocan los submenu deben cerrar el al final del todo. Aca les dejo el ejemplo de como me quedo a mi. mirenlo bien y se daran cuenta.
Inicio
redes
submenu 1
submenu 2
Submenu 3
(ACA ES DONDE DEBEN CERRAR EL DE REDES EN ESTE CASO
la solucion seria asi: nav > ul > li{
float:left;
}
12 años después
a mí me funcionó de maravilla gracias por tus explicaciones
Excelente tutorial, muy rápido, bastante claro y muy funcional :)