Como hacer un menú de navegación desplegable con Animaciones CSS3
HTML-код
- Опубликовано: 5 фев 2025
- En este tutorial aprenderás como crear un menú de navegación desplegable utilizando unas geniales animaciones con CSS3 que nos permitirán tener un increíble menú.
🚀 Blog de diseño web:
www.falconmast...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
♦ Tutorial escrito, recursos y códigos;
www.falconmaste...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmaste...
♦ Curso patrocinado por okhosting:
www.okhosting.com
Saludos, para los que tienen problemas al momento de desplegar el sub-menu, el problema esta en el overflow: hidden; que esta dentro de nav > ul{}, yo lo tuve que eliminar y sustituirlo por un opacity: 0; en nav > ul > li > a span{}, y luego activarlo de la siguiente manera nav > ul > li > a:hover > span{
top: 0;
opacity: 1;
},
tambien logre que quedara el sub menu vertical, se modifica un poco el esquema del código pero funciona en todos los navegadores y mantiene el efecto.
Muchas gracias por compartir tus conocimientos con nosotros los que aun estamos aprendiendo Carlos Arturo, suerte y sigue adelante.
¿Disculpa podrías pasarme el código?, es que voy a usar este nav en un proyecto escolar y me gustaría que el submenu se desplegara verticalmente.
Gracias de antemano y ojala respondas pronto :#
Falcon la verdad mis respetos para usted, tiene una manera tan sabia y comprensiva de explicar las cosas con un interés de enseñar las cosas y la verdad le doy las gracias por todos tu vídeos...
kronch steven Muchas gracias
FalconMasters Eres grande hermano, no se como decirlo pero eres fantastico
FalconMasters Te lo agradeciera si me hicieras este favor podrias mandarme el link de descargar del proyecto..Provafor lo hice todo pero no me sale como tu lo hisiste por eso.?? PLIZZ
Arthur en la pagina de Falcón aparece el documento en la descripción de su vídeo dice de ir a su página por recursos etc..
kronch steven Ya dejalo lo e soluciona a la segunda vez
Eres muy buen teacher amigo Falcon, tenía el error y lo pude solucionar gracias a tu gran idea de subir la solución a tu página personal. Ahora si no me quedaron dudas. Sigue brindando el excelente servicio educativo que ofreces. Por lo que dicen abajo de que hablas rápido, te aconsejo que no hagas caso a comentarios que no suman. entiendo que lo haces por cuestiones de duración de vídeo.
Dios te siga bendiciendo con tan gran habilidad.
Tuve problemas al visualizar en Chrome, pero revisé tu página web e hice los cambios que indicaste en el código. Me funcionó tal cual el video...
♦ Curso de PHP y MYSQL: Completo, Práctico y desde Cero
www.tutorialdephp.com
+Jorge C. Si puedes :v
Presiono tab, pero porque tengo el plugin de emmet.
y de donde saco ese plugin? o como lo descargo o que?
Hola Sebastian en google escribe plugin emmet y allí lo descargas e instalas.
ME PASA LO MISMO, YA ENCONTRASTE LA SOLUCION?, SI ES ASI PODRIAS PASARME EL CODIGO POR FAVOR
gracias falcón usted sabe mucho hermano lo admiro bastante, para los que no han podido hacer lo de los iconos solo tiene que poner este codigo y dejar el archivo de los iconos sin carpeta solo en la carpeta del proyecto
Hola Carlos, he seguido su curso de html y css y me tiene impresionado que una persona tan joven sepa tanto y lo pueda explicar de manera tan pedagógica. Felicitaciones. Otra cosa: podría dejar el link de los códigos para no tener que dar tantas vueltas para encontrarlo. Muchas gracias desde Colombia y ojalá continúe realizando tutoriales y cursos.
Para todos los que tengan problemas con los iconos, aquí esta otra forma nueva de usarlos.
ruclips.net/video/pu7PSwO0_YI/видео.html
FalconMasters Los codigo sirven en dreamweaver?
Explicado de forma fácil y sencilla. Tus vídeos son muy útiles y agradables. Un Gran Maestro.
Excelente ,amigo. Tuve muchos problemas por que mezcle este menu con flexbox pero ya va quedando. Mil gracias!
gracias gracias amigo, he visto tu vídeo y en realidad tu trabajo merece todo el agradecimiento del mundo, por compartir tu experiencia a las personas y ayudarlas a crecer, tuve algunos problemas con la codificación pero al final con una buena revisión todo perfecto, gracias de nuevo y a seguir aprendiendo con tus vídeos. P.D. : Si es posible para las personas nuevas en esta área (como yo) te recomendaría y pediría explicar un poco cada codificación y que función cumple, del resto inmejorable gracias de nuevo.
Es necesario repetir tantas veces el *nav > ul > li > ul* ? no puedo meter todo en uno solo?
Que excelente manera de explicar el código, le entendí muy bien, muchas gracias por el vídeo.
Estoy trabajando en un proyecto web, y me basaré en tu material para apoyarme, muchas gracias!
No se me oculta el span tan pequeño como el de tu tutorial y utilizo correctamente tus indicaciones:
nav > ul > li > a span{
background: #174459;
display: block;
height: 100%;
width: 100%;
left: 0;
position: absolute;
top: -55px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
FalconMasters, eres un excelente tutor, gracias por no ser egoísta con el conocimiento.
Muchas Gracias Falcon, tenia que hacer un menu con el efecto de transicion css3 y adapte a mi propio diseño, pero me sirvió bastante la base de código con los span icons! Muchos exitos. Saludos desde Perú
quiero felicitarte por tu gran trabajo y tus grandes explicaciones creeme me han servido mucho me parece que tienes talento para hacer todo esto. mil felicitaciones
Te felicito por tu trabajo!!! bien explicado y muy buena dinámica. Agradecimientos totales! Eres un excelente maestro a pesar de q te escuchas muy chavo. Saludos!
wow deberías ser maestro, explicas muy bien , te lo agradezco mucho me has salvado, eres muy bueno sigue así
Falcon lo felicito a usted y su metodología de enseñanza
A mi también me paso eso de no poder visualizar los iconos. Los errores mas comunes y los que tuve son:
- Error en la ruta del archivo CSS(despues intente poner la ruta completa, o poner "./fonts.css")
-Al programar en un entorno que no era sublime text2, (Por ejemplo yo Aptana) cuando ejecutaba(en Run) no se visualizaban, pero cuando abría directamente el archivo index.html en el explorador si se me mostraban.
-Navegadores desactualizados.
Estan geniales tus videos.. Muchisimas gracias :D :D
La verdad pensé que no lo haría , pero tu explicasion fue buena y lo termine :D gracias desde Trujillo Perú un saludo y bendiciones gracias. :D
SPREE DJ Pues Excelente! :D
Felicitaciones Falcon, se nota que conoces a fondo el tema, excelente video, totalmente didáctico
Amigo muchas gracias, me ayudo muchísimo tu vídeo, hice mi menú :) solo le hice unas modificaciones ya que lo pude por debajo de un header. Te agradezco por tus vídeos. Saludos.
Bueno el tema si señor....seguiré de cerca tus enseñanzas.
Hola, Carlos. Muchísimas gracias por tus cursos, gracias por toda tu dedicación; ¡eres asombroso!
Muchas gracias, me esfuerzo por enseñar lo que se
amigo mil gracias, tu canal me ha ayudado a mejorar mis trabajos.
Me gusto el vídeo y en la forma como lo explicada cada código que escribe, gracias me salió igual el menú.
Mucha ayuda... Lo voy a introducir a mi sitio... sigue adelante!!!
Gracias Viejito, me ayudaste bastante, ademas entendi muy bien en que consiste la relación de HTML con CSS, me suscribo.
Bueno me surgió el problema en chrome y pude solucionarlo, gracias compañero, muy útil.
No olviden guardar ambos documentos. Excelente tutorial
Excelente de verdad me ayudara mucho para mi proyecto de la uni Dios les bendiga y gracias por compartir.
ERES UN GENIO. MUCHAS GRACIAS POR COMPARTIR. SUPER CLARO Y ENTENDIBLE
Excelente tu forma de Explicar. ya estado haciendo el tema en responsive de wordpress y los demas videos. muchas gracias.
Amigo el tutorial más efectivo y claro que he visto en mi vida. Lo he realizado y me ha salido de maravilla para todos los navegadores a excepción de Chrome. Sabrías como arreglar eso? el problema que tiene con Chrome es que el sub-menú al momento de de pasar el mouse no me aparece =(
Continúa. Éxito.
Si que existe un problema con chrome, la solución ya la he puesto en mi sitio web, revisala y con esto te funcionara en chrome también :D
www.falconmasters.com/tutoriales/menu-desplegable-animaciones-css3/
Corregido y funcionando al 100%. Muchas gracias =D
Esteban Almanza Excelente!
Uno de los mejorws programadores que e visto grasia maestro
Muy bueno falcón!!!!!! Sos un maestro espectacular
Muy buenas. Disculpa el vídeo está bastante bien y me ha ayudado mucho, hay un error en el icon-house, en la línea 14. Debería ser icon-home. Gracias por los vídeos están bastante bien.
Excelente tutorial, ya había hecho todo y me salia error pero ahora vi tu pagina y allí estaba la solución, el único problema que tengo ahora es que no me sale el icono-house cuando despliega el menú...
Hola admiro mucho como te desenvuelves explicando las cosas, felicidades y gracias
Felicitaciones amigo! grandioso tutorial.....es un gran aporte para la comunidad!
Muchas gracias :D
Explicas muy bien y lo haces muy comprensivo, realicé este menú y funciona a la perfección pero al momento de verlo en una tableta se desalineay la animacion no funciona. Se puede realizar que este menu collapse para estos dispositivos.
suscrito amigo, me han servido en verdad tus videos hoy me avente pero mañana sigo con las clases jeje saludos.
Quiero felicitar con mucho respeto y agradecimiento al personal de FalconMasters, es increíble lo que están haciendo por personas que no hemos tenido la oportunidad de contar con una tutoría a este nivel, son muy buenos en lo que hacen, así que estoy muy agradecido y que Dios les siga iluminando el camino para sigan haciendo esta labor, Dios les bendiga grandemente.
Solo tengo una preguntita, en el curso de Diseño Web, cuando creamos un articulo y este tiene un contenido amplio, no lo podemos mostrar en un marco, ¿Podemos ponerle un link de Ver Mas o recomiendan otra técnica o es que es recomendable con un Scroll para ver todo el contenido de ese articulo, además de alguna herramienta para aumentar el size cuanto la fuente no es legible para algunas personas?
Gracias!
Santo Domingo, República Dominicana.
Hola Ruben, muchas gracias por tus bendiciones, la verdad es que solo soy yo el que administra de momento el canal FalconMasters pero si que me esfuerzo por tener buen contenido de utilidad, muchas gracias por ver el contenido, de verdad.
Sobre tu pregunta, lo que pasa es que ese curso solo es de diseño web, para agregar contenidos necesitas un gestor de contenidos, un CMS, como wordpress. Si que puedes usar un scroll para el contenido, siempre y cuando no sea exagerado, y sobre el size de la fuente, por defecto suele ser de 16px, pero puedes cambiarlo a mas si cres que se requiere. Saludos
Oh! es que todo está tan bien estructurado que creí que era un equipo de personas. FELICIDADES y gracias nuevamente. Soy programador de Visual Basic y esas cosas de Visual Studio, pero ya he decidido hacer algunas cosas usando un buen diseño, a la verdad me ayuda mucho tu trabajo
.
Me gustan los cursos de este muchacho.
Aunque a veces es complicado encontrar un Tutorial de como agregar solamente 'x' cosa, sin tener que re-crear un menú de 0%, para terminar quitando el tuyo. xd
consulta, cual es la diferencia entre nav > ul > li > ul y nav > ul li ul . Gracias de antemano.
nav > ul > li > a: hover > span
ledi un espacio de mas y no me quería funcionar el hover
(maldicion no me di cuenta que al conectar estilos.css lo habia echo en ingles por eso no me funcionaba) en fin eres un pro amigo me gusta como explicas
Excelente, me gusto mucho este menu, si que hay muchos conceptos por aprender!!
Falcon siempre aprendo algo nuevo contigo gracias, de verdad muchas gracias por compartir esto con nosotros!
Gracias, parcero. El tutorial está repiola.
Cuando hago el nav > ul > li > ul para que me desaparescan los sublinks de la barra simplemente no pasa nada me queda la primer fila de entradas la segunda y la tercera
Hermoso menu. Muy buen video para practicar los conocimientos de css. Gracias por compartir
excelente vídeo FalconMasters me ayudo muchísimo justo lo que necesitaba..
solo tengo una pequeña duda yo lo trabaje en DW cs5 y no me muestra los iconos de el menú principal al visualizarlo en el navegador chrome solo eso pero igual muchas gracias
Bastante bueno el tutorial. Se agradece muchísimo
Gracias mi estimado, me sirvió mucho para identificar los códigos para menús y displays... saludos
Hola, primero que todo te agradezco mucho por los tutoriales gratuitos que publicas. Respecto al menú tengo una pregunta:
cómo harías para que por ejemplo al hacer click en contacto, se mantenga su estado sobre (es decir, que el ícono no vuelva a subir). Otra pregunta ya directamente sobre el ejercicio realizado: por qué en el css en "nav", defines un margin:20px auto, para luego anular esos 20 pixeles con un margin-top:-20?
Agradezco tu respuesta y de nuevo gracias por compartir tus conocimientos (Y)
Una duda, olvidaste explicar como cambiar el color de la transcision de los submenu, he intentado pero no he podido, y quisiera poner los submenu hacia abajo, osea, item #1 abajo, item #2 abajo de item #1 no al lado, y asi sucesivamente, muchas gracias
¡Explicas muy bien! Gracias.
carlos una pequeña acotación :) cuando le pones los colores a los spans no es necesario poner toda la ruta con colocar la clase bastaría, o hay algún motivo en especifico por el cual lo haces así?
Vale Falcon, EN HoraBuena! queria preguntarte. En tutoriales anteriores no le pusiste el signo a la ruta del css en la etiquetas. es mejor usar el signo? o no tiene relevancia?
Estan geniales tus videos.. Muchisimas gracias :D :D
A mi también me paso eso de no poder visualizar los iconos. Los errores mas comunes y los que tuve son:
- Error en la ruta del archivo CSS(despues intente poner la ruta completa, o poner "./fonts.css")
-Al programar en un entorno que no era sublime text2, (Por ejemplo yo Aptana) cuando ejecutaba(en Run) no se visualizaban, pero cuando abría directamente el archivo index.html en el explorador si se me mostraban.
-Navegadores desactualizados.
asu genial el video falcon eres un maestraso buen aporte para los diseñadores
Hola, gracias por el tutorial, está realmente muy claro... una consulta, si en lugar de hacer el menú desplegable en horizontal, lo deseo en una fila, por ejemplo debajo de la opción servicios tener un menú desplegable con 7 servicios uno debajo del otro, gracias por tu ayuda...
Es verdad, es un buen maestro. felicitaciones.
Buenisimo tutorial. Quedo excelente el menú. Me suscribo. Saludos desde Chile.
Excelente todo tu trabajo , mis respetos, solo quería preguntarte a pesar de hacer paso a paso lo que me comentaste lo único que no visualizo es la transición , sabes cual podría ser el problema?
Muy bueno amigo. Aprendo mas gracias a ti gracias por compartir tus conocimientos
Tremendos Tus Videos amigo, me han sido de mucha ayuda para aprender más! Sigue así... Saludos!!!
Muy buenos cursos os felicito, sois muy buenos saludos
Muchísimas gracias por tus tutoriales. Me ha ayudado mucho con el problema del menú desplegable.
No obstante, quería combinarlo con la propiedad responsive de las nuevas webs, pero cuando modifico el tamaño de la pantalla desaparece mi menú. ¿Podrías darme algún consejo?
Me gustaría utilizar esta barra de navegación, pero justo debajo del título de mi página. He probado a cambiar la posicion de todo el pero entonces la animación falla. Qué puedo hacer?
Hola hice tu menu y esta bien padre solo tengo una pregunta si tenemos mas de un sub menu como le cambiamos el color al pasar el raton
es lo mismo hacer, este codigo en note pad ++, bloc de notas etc ??
Me gusto tu video amigo ❤un abrazo fuerte ✌🏼
Gracias! Me alegra que te gustara. Saludos!
Excelente videotutorial de lo mejor que he visto.
Exelente Video Falcon, me funciono a la perfección, pero quería saber si podia modificar la posición del sub menu, que quiero decir , si en vez de que salga apegado a la izquierda el submenu se puede alinear al centro o a la derecha
Muchas gracias por tu tiempo. En este capítulo, Podrias indicar como poner los subtitulos en vertical?, sería de gran ayuda.
Un saludo
Solucionado linea 34 (dentro de nav > ul > li:hover > ul{ display:inline-grid;} y los submenús en vertical
Excelente trabajo FalconMasters muy util e interpretable Gracias.
en el comando nav > ul > li > ul {
display:block;
position:absolute;
background: #000; no me arregla el menu desplegable y cuando paso el cursor por la opcion que tiene el menu desplegable no aparecen las opciones de abajo de (item#1....) en el video esta en el minuto 23:33
Bendiciones mi amigo. Muchas gracias por tus tutoriales
Excelente aporte. Muchisismas gracias me ha servido mucho.
La verdad muy bueno loco. Excelente, muy bien explicado. Me das una mano tremenda. Gracias
amigo excelentes tutos la verdad creo que ya voy mas de 24 horas seguidas de tutos y creo he visto todos, jaja muy buen profesor ya te he difundido en mi localidad para que vean tus tutos, pero te quisiera pedir un favor tal vez hay como un tuto para por ejemplo compartir la pagina que este viendo en mi html, compatirla en facebook, osea como publicación, yo ver algo en tu pagina y compartirla en mi fb o eso! espero me puedas ayudar y gracias de antemano!
Daniel Peñarreta Hola que tal Daniel, muchas gracias por ver mis tutoriales y difundirlos eso me ayuda mucho, sobre tu pregunta, revisa este link te puede servir. www.falconmasters.com/tips-consejos/compartir-enlaces-facebook-open-graph/
Muchas gracias ahora lo reviso buenos tutos 👍👍
Muchas gracias ahora lo reviso buenos tutos 👍👍
Excelente vídeo muy bien explicado, gracias por el aporte. Solo una pregunta como le haría para que en lugar de que salgan de arriba los iconos puedan salir desde la izquierda?
Hola maestro Carlos, excelente todos tus videos, desde el curso que tome en Udemy sigo todos sus demás vídeos sobre PHP principalmente. Ahorita combine este menú con el de la barra de mac, y todo esta bien, el único detalle y que ya no encuentro como solucionar es que en el sub-menú, el width de las 5 secciones que puse es totalmente diferente, por ejemplo en la primer opción me aparece casi del 50% del total y las otras 4 opciones varían entre el 8-15% tal vez. ¿Como puedo solucionar esto?
Por cierto en Chrome tiene algunos detalles aún con las correcciones que tiene en su pagina pero en general todo funciona OK.
Saludos y muchas gracias por todos los vídeos.
Grandioso video, logre comprender un montón de cosas gracias a este video!
Ahora tengo una duda. Si debajo de esta barra tengo un , como puedo hacer para que cuando se despliega el submenu, este div de mueva hacia abajo en vez de quedar estatico y debajo del submenu? Muchas grecias de nuevo por este y todos los demas videos, luego comienzo con java :)
Si te entendí bien, lo que tienes que hacer es encerrar este menu en un div y a este div ponerle un position fixed, revisa este tutorial, me parece que es como lo que quieres hacer. www.falconmasters.com/web-design/tutorial-menu-de-navegacion-fijo/
viendo tus videos en 2020 grande
Hola Carlos, muchas gracias por los cursos y todo, podrías decirme como centro el sub-menu? en el código se inclina hacia al lado izquierdo y necesito que abarquen toda la línea
hola, gracias por el tutorial, consulta, los iconos se pueden usar gratuitamente?? me refiero a que si hago una pagina comercial, puedo usar los iconos que comentas o tengo que pagar? gracias
Hola que tal, oye me podrías decir como le hago para que el menú brinque algunos espacios hacia abajo, porque quiero poner una imagen superior y luego mas abajo quiero poner el menu, me podrías decir como porfavor.... Explicas súper bien en el tutorial!!! Gracias
hola... estuve mirando este video y me parece interesante, pero quisiera saber cómo hacer para poner varios carks debajo del nav y que el cursos al pasar por encima se deplieguen las opciones sobre los cark y que no me los mueva hacia la parte inferior !?
wuo exelente visitare tu sitio.... fasinado
Hola, muy bueno tus videos.
Pero tengo una duda yo estoy haciendo dos submenús y sigo todos tus paso paro que puedo hacer para que se me desglosen los en otro submenú, ya que solo se me desglosa uno siguiendo tu codificación.
Buen video, muy buena la explicación, solamente que quisiera saber como dejar los items de forma vertical al seleccionar cada opción, gracias
Excelente video! Solo tengo una duda, si no quisiera ponerle iconos como hago para que se siga viendo el texto sobre la transición?
Hola Maestro!!.. como siempre seguí todas sus instrucciones y me quedó tal cual como el del ejemplo.. pero tengo una consulta.. necesito implementar este menú en un sitio donde el menú no está pegado en la parte superior ("top:0;") sino que está abajo de una barra con logo, y datos... intenté aplicarlo dentro de una barra div pero no se adapta de forma correcta ya que no se ocultan los cuadros de los botones con los íconos.. de hecho no logro hacer que entre en la caja de div.. sí está en el código, pero visualmente sigue fuera.. Como siempre mi agradecimiento respetos a su gran sabiduría y esperando su pronta respuesta se despide Leo!
muchas gracias por este material. que programa usas?
hablame mi so , este canal esta re chulo mi so , me sirve de mucho esta pinche buena pagina mi socito el maricosito :*