Como hacer un menú de navegación desplegable con Animaciones CSS3

[@KronchSteven]

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

[@FalconMasters]

kronch steven Muchas gracias

[@itsarth2410]

FalconMasters Eres grande hermano, no se como decirlo pero eres fantastico

[@itsarth2410]

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

[@KronchSteven]

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

[@itsarth2410]

kronch steven Ya dejalo lo e soluciona a la segunda vez

[@aramendi2006]

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.

[@andresrodriguez2965]

¿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 :#

[@Feasiel]

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.

[@ranierorisquez8573]

Explicado de forma fácil y sencilla. Tus vídeos son muy útiles y agradables. Un Gran Maestro.

[@josedavidtortolero5362]

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

[@oscarvazquez342]

Excelente ,amigo. Tuve muchos problemas por que mezcle este menu con flexbox pero ya va quedando. Mil gracias!

[@cesarolaya9052]

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

[@joselourido06]

FalconMasters, eres un excelente tutor, gracias por no ser egoísta con el conocimiento.

[@jhonmariopadronbarraza2586]

Falcon lo felicito a usted y su metodología de enseñanza

[@chisathot750]

Es necesario repetir tantas veces el *nav > ul > li > ul* ? no puedo meter todo en uno solo?

[@jordanaran9241]

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!

[@ramonmonzones8511]

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.

[@fernandoparraga1497]

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

[@rivasjayo]

Hola, Carlos. Muchísimas gracias por tus cursos, gracias por toda tu dedicación; ¡eres asombroso!

[@FalconMasters]

Muchas gracias, me esfuerzo por enseñar lo que se

[@espirituacustico]

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!

[@danlleloalva]

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

[@FalconMasters]

SPREE DJ Pues Excelente! :D

[@AntonioMac1000]

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ú

[@edjerher]

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.

Felicitaciones Falcon, se nota que conoces a fondo el tema, excelente video, totalmente didáctico

[@thesilentcat]

wow deberías ser maestro, explicas muy bien , te lo agradezco mucho me has salvado, eres muy bueno sigue así

[@mrzetim1]

Bueno el tema si señor....seguiré de cerca tus enseñanzas.

[@FalconMasters]

Para todos los que tengan problemas con los iconos, aquí esta otra forma nueva de usarlos. kzbin.info/www/bejne/pqaagYathJWSj6s

[@ivanorozco314]

FalconMasters Los codigo sirven en dreamweaver?

[@FalconMasters]

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

[@elsusurrooscuro]

+Jorge C. Si puedes :v

[@FalconMasters]

Presiono tab, pero porque tengo el plugin de emmet.

[@sebastiangarzonvargas6239]

y de donde saco ese plugin? o como lo descargo o que?

[@GCMSYSTEM]

Hola Sebastian en google escribe plugin emmet y allí lo descargas e instalas.

[@eduardomurillo4775]

ME PASA LO MISMO, YA ENCONTRASTE LA SOLUCION?, SI ES ASI PODRIAS PASARME EL CODIGO POR FAVOR

[@cokenaUAA]

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.

[@ck8x22]

Gracias Viejito, me ayudaste bastante, ademas entendi muy bien en que consiste la relación de HTML con CSS, me suscribo.

[@chicopow]

Excelente de verdad me ayudara mucho para mi proyecto de la uni Dios les bendiga y gracias por compartir.

[@alejandromagno508]

amigo mil gracias, tu canal me ha ayudado a mejorar mis trabajos.

[@juanzorrilla8861]

Hola admiro mucho como te desenvuelves explicando las cosas, felicidades y gracias

[@claudiosaiz6886]

ERES UN GENIO. MUCHAS GRACIAS POR COMPARTIR. SUPER CLARO Y ENTENDIBLE

[@ing.williamcordovez8183]

Excelente tu forma de Explicar. ya estado haciendo el tema en responsive de wordpress y los demas videos. muchas gracias.

[@zion2st2.05]

Muy bueno falcón!!!!!! Sos un maestro espectacular

[@Eloiby]

Felicitaciones amigo! grandioso tutorial.....es un gran aporte para la comunidad!

[@FalconMasters]

Muchas gracias :D

[@hermespelaez2953]

Mucha ayuda... Lo voy a introducir a mi sitio... sigue adelante!!!

[@AlexConA]

No olviden guardar ambos documentos. Excelente tutorial

[@alicehime0412]

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

[@gregorismenor]

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

[@rafaelborbon7382]

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;

[@Alanbm_]

es lo mismo hacer, este codigo en note pad ++, bloc de notas etc ??

[@johanquintero8560]

Uno de los mejorws programadores que e visto grasia maestro

[@enosnoeyaurivillanueva3937]

Me gusto el vídeo y en la forma como lo explicada cada código que escribe, gracias me salió igual el menú.

[@topx777]

Falcon siempre aprendo algo nuevo contigo gracias, de verdad muchas gracias por compartir esto con nosotros!

[@d-landjs]

Excelente, me gusto mucho este menu, si que hay muchos conceptos por aprender!!

[@capsuladepsicologia]

Es verdad, es un buen maestro. felicitaciones.

[@samuelvera5150]

nav > ul > li > a: hover > span ledi un espacio de mas y no me quería funcionar el hover

[@ragnarok_tz]

Hermoso menu. Muy buen video para practicar los conocimientos de css. Gracias por compartir

[@nocturno7887]

Bueno me surgió el problema en chrome y pude solucionarlo, gracias compañero, muy útil.

[@andresfelipebest27]

Excelente videotutorial de lo mejor que he visto.

[@israel_banks9024]

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

[@samuelramosDRS240815]

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

[@jaimesandoval9408]

Muy bueno amigo. Aprendo mas gracias a ti gracias por compartir tus conocimientos

[@juancamilotobonquesada717]

Amigo una pregunta como hago para que el submenu quede en forma vertical?

[@juandaniel8139]

Display: block, pero lo aplicas .submenu ul

[@sergiosalazar7231]

Gracias, parcero. El tutorial está repiola.

[@deybin7]

Excelente trabajo FalconMasters muy util e interpretable Gracias.

[@williamjosegarciaroca8266]

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

[@aylenmenichetti6579]

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

[@gpacheccgpachecc9357]

consulta, cual es la diferencia entre nav > ul > li > ul y nav > ul li ul . Gracias de antemano.

[@jinrobertz]

suscrito amigo, me han servido en verdad tus videos hoy me avente pero mañana sigo con las clases jeje saludos.

[@EnMarc]

Todo excelente, felicidades y muchas gracias! Solamente tengo una duda, mi submenu posee categorias con nombres un poco extensos y soon varios! si quiero que me aparezcan uno abajo del otro y no a la par, ¿que debo modificar?

[@darianabracho2646]

¡Explicas muy bien! Gracias.

[@PLGuille]

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?

[@mistralvideo]

Muchas gracias por tu tiempo. En este capítulo, Podrias indicar como poner los subtitulos en vertical?, sería de gran ayuda. Un saludo

[@mistralvideo]

Solucionado linea 34 (dentro de nav > ul > li:hover > ul{ display:inline-grid;} y los submenús en vertical

[@FreeloCreativo]

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?

[@danywolfslife]

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?

[@brandonordonez5568]

Tremendos Tus Videos amigo, me han sido de mucha ayuda para aprender más! Sigue así... Saludos!!!

[@alejandrodiaz7028]

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

[@cristiandroo]

Buenisimo tutorial. Quedo excelente el menú. Me suscribo. Saludos desde Chile.

[@martincurvale2031]

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

[@josuedanielflores2008]

Bastante bueno el tutorial. Se agradece muchísimo

[@leocore77]

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!

[@rcuevasr11]

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.

[@FalconMasters]

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

[@rcuevasr11]

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 .

[@osirisrv]

La verdad muy bueno loco. Excelente, muy bien explicado. Me das una mano tremenda. Gracias

[@HEAVYMETAL80tas]

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)

[@carlosalbertovizcainogarci3379]

Gracias mi estimado, me sirvió mucho para identificar los códigos para menús y displays... saludos

[@32yuiman]

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.

[@ivanr.valdivia6569]

asu genial el video falcon eres un maestraso buen aporte para los diseñadores

[@jerry_trejo_design1639]

hola una pregunta por que al estraer la carpeta de icomoon tambien viene archivo .js ese seria para bootstrap?

[@erikmujica9848]

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.

[@elkinvargas725]

Bendiciones mi amigo. Muchas gracias por tus tutoriales

[@misterbuffin]

Hola Falcon, como hago que el submenu salga de modo vertical??.. Hacia abajo.

[@ABMisterPisos]

Muy buenos cursos os felicito, sois muy buenos saludos

[@gabo182b]

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í?

[@alejandrocalderongiron4216]

Excelente aporte. Muchisismas gracias me ha servido mucho.

[@jorgec9088]

Falcon, excelentes videos! una pregunta, que herramienta usas para grabar la pantalla de tu pc

[@rockstar9514]

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

[@jefersonlouis1818]

23:57 Tengo problemas despues de poner esos codigos, pues no me despliega el menu !!! Que puedo hacer ?

[@sabbath13]

muchas gracias por este material. que programa usas?

[@jonathanvalenciagiraldo8634]

Que programa estás utilizando?, gracias

[@canadafendernick51]

Me gusto tu video amigo ❤un abrazo fuerte ✌🏼

[@FalconMasters]

Gracias! Me alegra que te gustara. Saludos!

[@barlok182]

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

[@PatMr93]

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?

[@mariomoreno3810]

hola con que tecla haces para seleccionar varias lineas y escribir en todas los que seleccionaste

[@byefrasa]

hola una duda! lo estoy trabajando en Netbeans como un proyecto web... pero no me carga los iconos, nose si tengo mal puesta en las carpetas los archivos de fonts.css y la carpeta fonts, debe de estar dentro de la carpeta web(que crea netbeans del proyecto)? y en el

[@andres57057]

Cuando llego al codigo: nav > ul{ display:table; width: 100%; background:#000; position: relative; } No agarra el cuadro de color negro, no se porque (min 9:57 / 28:04) Y... cuando coloco el: header{ margin-top: 10px; width: 100%; height:150px; overflow:hidden; position: relative; } nav{ top:-20px; position: absolute; left: 0; right: 0; margin: 20px auto; max-width: 1000px; width: 90%; } Me da una especie de error, donde si se centra el menu pero unos de los sub menus se corta por asi decirlo, no se ve completo, como su lo picara por la mitad de manera horizontal (al texto).

[@DrAlbert0]

deberias poner tu codigo asi lo vemos.

[@ReflectionHere]

La tecla tabulacion.

[@CastilloMoises]

1. Tienes que usar "Sublime text" como editor de texto. 2. Debes tener instalado el plugging "Emmet" en el Sublime text. 3. Si tienes lo anterior solo escribe el codigo y presiona la tecla "TAB"

[@alejitocuero]

ami tampoco me funciona no me genera lo que hicistes exctamente en (min 9:57 / 28:04) que podria ser??

[@mariochavesvillarreal451]

Hola muchas gracias por tus cursos. Mi pregunta es como puedo que mi submenu con este estilo se despliegue de manera vertical.

[@201420131]

Como haces para que cuando empiezas a escribir html:5 te aparezca toda la estructura básica? 1:16

[@albertoramirez8830]

Tengo una pregunta como puedo pasar el menu hacia abajo ya que quiero anteponer una imagen en la parte de superior es decir antes del menu y cuando modifico el estilo del menu este muestra el menu mas los iconos y solo se muestra el efecto del submenu gracias espero puedas ayudarme

[@angelicarodriguez611]

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.

[@camilogranados7375]

falcon una pregunta, cuando hago el mio todo esta bien los codigos bien pero al habrirlo en gogle chorme todo esta en vertical uno debajo del otro y no se cambia

[@ignaaguila4858]

muy bueno amigo..tengo una duda como puedo hacer que el menu se quede mostrando la ruta de las paginas a las que e entrado digamos tengo uno vertical y se depliega y luego se quede marcado ai para ver donde me encuentro ..saludos

[@kevin2za]

+FalconMasters, al poner la barra en mi pagina web no me aparecen los iconos y la barra si se que los tiene porque lo hice por separado antes. Porqué puede ser? Espero tu respuesta. Gracias de antemano. Y enhorabuena por tus videos.