Como hacer un menú desplegable con HTML y CSS

Подписаться 510 тыс.

Просмотров 1,6 млн

50% 1

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.falconmasters.com
✔️ Curso Completo de Diseño Web Profesional:
www.udemy.com/course/diseno-w...
✔️ Curso Completo de React y Firebase:
www.udemy.com/course/react-de...
✔️ Curso Completo de PHP y MYSQL:
www.udemy.com/course/php-y-my...
✔️ Curso de Bootstrap 4:
www.udemy.com/course/curso-bo...
✔️ Curso Completo de Woocommerce:
www.udemy.com/course/curso-ti...
---
♦ Tutorial escrito, recursos y códigos:
www.falconmasters.com/tutorial...
♦ ¡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.falconmasters.com/tutorial...
♦ Tutorial como hacer un menú de navegación deplegable, adapable a dispositivos moviles:
www.falconmasters.com/web-desi...
♦ Tutorial como hacer un menú de navegación avanzado
www.falconmasters.com/tutorial...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmasters.com
♦ Curso patrocinado por okhosting:
www.okhosting.com

Хобби

Опубликовано:

25 фев 2012

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 1,8 тыс.

@tawa5117 3 года назад

9 años después, me has salvado la vida.

@GabyBracamonte 2 года назад

x2 😅

@jaredguzman8130 2 года назад

10 años 🤡

@azulliendo8866 Год назад

Tengo una pregunta puse style type pero agrego padding pero no lo reconoce en el head sera la version de mi visual o que ?

@JonathanDj23s 11 месяцев назад

@@jaredguzman8130 11 años pa

@fugitivocodm 8 месяцев назад

@@jaredguzman813011😂

@morita360 2 года назад

Llevo días llorando porque no entendía otros videos que explicaban esto mismo hasta que llegué aquí! GRACIAS

@aurear.r 10 лет назад

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

@galletasporsiempre6931 4 года назад

2012 el vídeo y aun funciona excelente en nuevas interfaces, muy bien, tome su like buen hombre.

@davidchihuan 10 лет назад

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

@ezequielcuello8666 2 года назад

¿Y cómo te fue con tu página?

@TATU22XT 10 лет назад

Muy bueno, claro y simple, me ayudo de mucho. Mil Gracias.

@diegoapestegui6489 10 лет назад

Que copado de facil !

@marianodoors 4 года назад

@@diegoapestegui6489 QUE HACES ACA PROFEEEEEE??? jajaja aca haciendo una paginita yo

@diegoapestegui6489 4 года назад

@@marianodoors aprendiendo, ñoñando 🤓

@androidfans9043 6 лет назад

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.

@josefranco1078 3 года назад

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

@strahm33 9 лет назад

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

@cahetdublin 10 лет назад

Thanks Dude, you saved me... your tutorial is great!, even to understand as only speak BrPortuguese.

@Brian-ju4fs 6 лет назад

Brother muchisimas gracias, Siempre e visto tu canal y cada cosa que enseñas lo haces con claridad y pasión, TE FELICITO!!

@andresinalbis6651 6 лет назад

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

@FalconMasters 10 лет назад

@Léo Leblanc Para eso puedes utilizar en vez de background-color usar un background:url(direccion te tu imagen);

@viajerosalpaso 10 лет назад

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

@luiyiihdez3137 10 лет назад

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

@lucho6675 10 лет назад

Ricc anyms como uso dreamwever pero no aparece el hover :S tal y como dices .. que hiciste?

@jasielmillanvillarreal376 10 лет назад

Ricc anyms Lo hice, pero me presenta el mismo problema, alguna sugerencia que tengas? es necesario utilizar notepad ++ ? si es asi, donde lo descargo?

@carloscastro3139 9 лет назад

amigo como hago para centrar el menú ? me queda un poco hacia la izquierda :(

@gonzalobustamante1456 10 лет назад

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

@rikudoupain224 4 года назад

Vi tu vídeo en tu página y vine hasta aquí para agradecerte, me funcionó, GRACIAS!.

@santiagoromero.1989 6 лет назад

solo por comentar, en la no es necesario una etiqueta de cierre.

@freemusicnocopyright1222 3 года назад

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

@marianelaz5491 2 года назад

sos un grande no te conozco y ya te amo

@Jenvff 2 года назад

algunos heroes van sin capa xD

@FalconMasters 10 лет назад

Notepad++ es muy bueno, yo lo usaba mucho antes, ahora uso sublime text, realmente es cuestión de gustos.

@SrICosmic 3 года назад

Prefiero Visual Studio Cod. Pero es cuestión de gustos

@eribertmarquez452 2 года назад

@@SrICosmic El comentario es de hace 7 años en ese entonces el rey era sublime

@fran270886 7 лет назад

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

@martinvision.predicas 10 лет назад

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 !

@richarmp29 9 лет назад

Falcon, es lo mismo colocar ="nav"> que colocar submenu ?¿

@DJXhiko2011 7 лет назад

me parece que si

@frankh.1680 6 лет назад

En html5 para el menu de navegacion solo se usa en versiones anteriores era con "class" pero si es lo mismo.

@tokiohotel255 11 лет назад

Gracias Hermano te debo mi calificacion final XDD

@Factormelkin 9 лет назад

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

@arielpombo 9 лет назад

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.

@emiliodelacruznavarro2691 7 лет назад

Amigo tengo un problema al poner el float left que no lo lee P.D. lo estoy haciendo en bloc de notas

@sarasofia5095 5 лет назад

Fijate bien, pues yo tambien lo estoy haciendo en bloc de notas y si lo leyo.

@LigiaCeballos 4 года назад

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

@miglopiutub 4 года назад

y yo en paint :v, ok no, no se crean eso

@andreaespinoza4717 8 лет назад

No me salio el menu desplegable le coloque .nav li:hover > ul{ display: block; } y no me dio aparecen los submenu

@user-wm2lj7qp2r 4 года назад

a mi también me pasa lo mismo aún que llego 4 años tarde xd

@kiover9828 3 года назад

@@user-wm2lj7qp2r igual no sale el submenu

@jhoncastillo3570 10 лет назад

Hombre, quedo eternamente agradecido por tu trabajo, muy bueno y de calidad gracias

@Diego14788 Год назад

Excelente trabajo, me sirvió muchísimo, tiene mas de 10 años y funciona a la perfección, muchas gracias!

@colombianflower7465 10 лет назад

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

@joelacoltzi4732 3 года назад

lo encontraste el error ??

@chocogalletaa 3 года назад

este error de hace 7 anios me perturba, ojala hayas encontrado la solucion

@melissadl2108 9 лет назад

la parte: .nav > li { float:left; } no me quiere funcionar, el menu se queda en columna siempre y no en fila. Me puedes ayudar?

@kasitoo 7 лет назад

igual me pasa

@brayanfalcon8029 7 лет назад

ya somos 3

@robespierretrivino1286 7 лет назад

El error es que probablemente estén dandole estilos a la class en css (.nav) y en el html esten usando solo la etiqueta

@strangersword4448 7 лет назад

yo igual... =(

@isaimora537 6 лет назад

me pasa lo mismo cuando pone .nav

@TheSebastianSantis 10 лет назад

Excelente tutorial, muy rápido, bastante claro y muy funcional :)

@missigno5138 6 лет назад

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.

@victorcedeno6929 9 лет назад

Carlos como hago para que mi menu ocupe un 100% del ancho de la pagina o de la capa??

@FalconMasters 9 лет назад

Victor Cedeño Le tienes que cambiar el width de 960px a 100%

@manitoher3368 9 лет назад

***** lograron poner que todo el menu cubra la pantalla? Necesito eso para mi proyecto de pagina web !HELP ME¡

@alex32tutoriales38 8 лет назад

***** es en el header :v

@manitoher3368 8 лет назад

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

@manitoher3368 8 лет назад

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

@cristinadiazsuero2970 8 лет назад

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.

@laabuela00 8 лет назад

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.

@carlomagnocondesaldana5860 8 лет назад

me sucede lo mismo.. llegaste a arreglarlo?

@didierhernandojimenezduart1078 7 лет назад

igualmente que pudo pasar lo necesito urgente gracias

@pamelacharlin7965 9 лет назад

Felicitaciones porque eres muy bueno explicando! muchas gracias por compartir tus conocimientos!!!

@chrystianrodrigoguerramora4272 2 года назад

he visto un sin fin de tutoriales para esto y este fue el único que pude adaptar a mi página

@jairotibasosaarevalo5747 8 лет назад

creo que te amo, me gustan las mujeres pero eres l mejor explicando asi que te amo xD

@romerosantosdos17 9 лет назад

no me sale y eso que lo hice con notepad ++ cuando pongo **.nav > li{ float;left; }** me desforma todo que hagoo

@romerosantosdos17 9 лет назад

ya lo solucione XD

@raquelvazquez4259 9 лет назад

romero santos dos Me puedes decir como?tengo el mismo probema

@martinezmaciasrosaangelica3662 9 лет назад

romero santos dos ayuda , tengo el mismo problemaporfavor

@raquelvazquez4259 9 лет назад

Yo tambien lo soluciones pero no me acuerdo como creo que tenia un error al cerrar :s

@jasonhernandez7454 9 лет назад

Raquelml Vazquez en #header{ width: aumenta los pixeles

@d-landjs 3 года назад

Excelente tutorial Arturo!!! No habia visto tus videos antiguos, una buena base para aprender mas menus sotisficados!

@gusfedeniccolo9902 4 года назад

Vengo un poco atrasado (años) mirando estos videos jeje ... excelente trabajo maestro!! Muy agradecido por esta generosa transferencia de conocimientos.

@raquelvazquez4259 9 лет назад

.nav > li { float: left; } Al llegar a esta parte no cambia nada :'( Me puedes ayudar por favor :)

@FalconMasters 8 лет назад

♦ Curso de PHP y MYSQL: Completo, Práctico y desde Cero www.tutorialdephp.com

@yachaywasichess 7 лет назад

Ya se venció la oferta :( Si tan solo hubiese visto antes

@FalconMasters 7 лет назад

Ahorita mismo hay una: www.udemy.com/php-y-mysql/?couponCode=OCT-15 Termina en este mes

@yachaywasichess 7 лет назад

Muchas gracias, pero no tengo tarjeta de crédito, pensaba pagarlo en un agente

@Margaretbeard_ 7 лет назад

Hola! me gustaría saber como puedo alargarlo para los lados, por favor!.

@franklibergeorgeguzmanvill703 7 лет назад

Amigo tengo un problema, el menú sirve pero cuando abajo de el encabezado donde va el menú agrego otro div los submenus se cierran.

@andresvelasquez3581 9 лет назад

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

@yagh53 10 лет назад

Gracias!! tus explicaciones son muy claras y útiles, la verdad me han servido bastante!.

@valentinarojasr8641 2 года назад

Gracias. Muy bien explicado y eres un gran comunicador. Muchas gracias. Suerte y éxitos.

@elvacioxd8517 3 года назад

si lees esto dejame agradecerte, gracias a este video aprendí mas q en 6 horas de clase, ademas salvaste mi proyecto de grado.

@gloriapaulinaprezent6090 3 года назад

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.

@darkogamesxd9237 Год назад

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

@mecamonts 9 лет назад

Muchas gracias. Una explicación muy clara y funciona perfectamente. Un saludo

@elliotowasp4077 6 лет назад

Muchísimas gracias por ese tutorial. Lo explicaste de maravilla!!!!! Entendí mucho. De verdad, muchas gracias!!!!!!

@enriquesg8820 3 года назад

Muy bien explicado, de forma clara y sencilla. Gracias.

@alefe4 10 лет назад

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.

@ElKpu 10 лет назад

NAH CHABON SOS EL MAS GROSO , este es el mejor tuto que he visto hasta ahora

@Zerolagg 9 лет назад

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?

@ArmanJC 9 лет назад

Que excelente explicación amigo. Muchas gracias!

@dumpbass 9 лет назад

compi eres un genio, me ayudaste mucho con un submenu que no se me desplegaba, muchas gracias por el video y muy bien explicado!

@luisortiz6018 9 лет назад

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

@rulason87 9 лет назад

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

@palmajosue 10 лет назад

Excelente tutorial, gracias por compartir tus conocimientos!

@oscarperez4006 10 лет назад

Excelente TUTORIAL en Verdad explicas al 100% y Funciona....Gracias Men sigue asi....¡¡¡¡

@hotelconnectionigr8971 5 лет назад

Exelente, muy bien explicado... Gracias!!!

@johncaballero8430 3 года назад

9 años despues y todavia funciona... excelente y gracias

@AlfredoNoguezR 5 лет назад

super excelente tutorial me ha servido de maravilla gracias de verdad le entendí y lo pude hacer a la perfección deje mi like y me he suscrito a tu canal, saludos a todos.

@rocioaguilera6448 9 лет назад

Muy bueno la verdad, muy claro y las visualizaciones gráficas del paso a paso ayudan mucho :D gracias.

@carollainn1559 10 лет назад

Excelente explicación Amigazo!!! Lo seguimos con gusto y a partir de ésto Pensemos soluciones "NosotrosMismos" GRACIAS

@julioalbertopastorcuba6499 9 лет назад

muy lindo tuto y muy entretenido fácil de hacer saludos desde Paraguay

@christopheralexishernandez9245 3 года назад

Me salvaste bro, 9 años después sigue sirviendo tu video :)

@WilmarCuesta 9 лет назад

Carlo era lo que estaba tratando de aprender...gracias muy bueno...continuo con el otro avanzado...

@MaoMorales834 8 лет назад

Oye, muchas gracias por compartir tus conocimientos, me das luz en el camino jejeje. Muy bien explicado, me funciona muy bien. Gracias!!!

@favio.romero 3 месяца назад

Impecable. Simplemente brillante. Gracias.

@luiscesar3627 7 лет назад

Muy buen video, bien explicito... justo lo que necesitaba....Thank you

@alexvaz1611 9 лет назад

Muchísimas gracias! Justo lo que buscaba :D Funciona perfectamente

@ramirogonzalez7589 3 года назад

Me acaba de funcionar perfectamente, tiene muchos años el video pero sigue siendo muy util, tome su merecido like y suscribe buen hombre.

@FalconMasters 3 года назад

Gracias!

@mr.holmes4041 7 лет назад

Qué buena manera de explicar, ya entiendo mucho mejor los códigos, excelente video. Me suscribo

@clasesdepianogratis 4 года назад

Explicas en forma muy clara. Gracias!

@marcoschivico8523 10 лет назад

Muchisimas gracias hermano. un aporte de gran ayuda. saludos desde venezuela

@HenryGamingYT19 6 лет назад

El video es de hace 6 años pero igual me ha servido, gracias! ♥

@ernestgassogil9117 10 лет назад

Muchas gracias!! Super bien explicado y código muy limpio!!

@karinachavez1027 10 лет назад

Excelente explicacion , me sirvio muchisimo , era justo lo que necesitaba en este momento.

@caballeroayalaariel1570 Год назад

Gran video hermano, me salvaste de un problema, te agradezco por la buena explicacion de tu video

@evelynvaleriaagapitocaycho3299 4 года назад

Muy buen video acerca del menú desplegable falconmasters 👏👌❤️

@charlydragon3108 4 года назад

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 ❤️🥺🥺

@vaguitoman89 9 лет назад

Muchas gracias… Muy bien explicado, me subscribo.

@llllgoplayllll4946 8 лет назад

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

@acb253705 4 года назад

Muy buen video amigo,muchas gracias por compartir. Saludos cordiales

@irvinga.sifuentesp.5609 7 лет назад

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.