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

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 886

  • @KronchSteven
    @KronchSteven 9 лет назад +60

    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
      @FalconMasters  9 лет назад +4

      kronch steven Muchas gracias

    • @itsarth2410
      @itsarth2410 9 лет назад

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

    • @itsarth2410
      @itsarth2410 9 лет назад

      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
      @KronchSteven 9 лет назад

      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
      @itsarth2410 9 лет назад

      kronch steven Ya dejalo lo e soluciona a la segunda vez

  • @aramendi2006
    @aramendi2006 8 лет назад

    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
      @andresrodriguez2965 6 лет назад

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

  • @josedavidtortolero5362
    @josedavidtortolero5362 3 года назад

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

  • @Feasiel
    @Feasiel 9 лет назад +4

    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
    @ranierorisquez8573 8 лет назад

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

  • @oscarvazquez342
    @oscarvazquez342 8 лет назад

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

  • @joselourido06
    @joselourido06 9 лет назад +1

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

  • @jhonmariopadronbarraza2586
    @jhonmariopadronbarraza2586 4 года назад

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

  • @cesarolaya9052
    @cesarolaya9052 7 лет назад

    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

  • @rafaelborbon7382
    @rafaelborbon7382 8 лет назад

    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;

  • @danlleloalva
    @danlleloalva 10 лет назад +1

    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

  • @espirituacustico
    @espirituacustico 9 лет назад

    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!

  • @fernandoparraga1497
    @fernandoparraga1497 10 лет назад

    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

  • @thesilentcat
    @thesilentcat 7 лет назад

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

  • @mrzetim1
    @mrzetim1 9 лет назад

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

  • @jordanaran9241
    @jordanaran9241 10 лет назад

    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
    @ramonmonzones8511 8 лет назад

    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.

  •  10 лет назад

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

  • @AntonioMac1000
    @AntonioMac1000 8 лет назад

    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ú

  • @cokenaUAA
    @cokenaUAA 9 лет назад

    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.

  • @alejandromagno508
    @alejandromagno508 9 лет назад

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

  • @FalconMasters
    @FalconMasters  6 лет назад +17

    Para todos los que tengan problemas con los iconos, aquí esta otra forma nueva de usarlos.
    ruclips.net/video/pu7PSwO0_YI/видео.html

    • @ivanorozco314
      @ivanorozco314 6 лет назад +1

      FalconMasters Los codigo sirven en dreamweaver?

  • @claudiosaiz6886
    @claudiosaiz6886 4 года назад

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

  • @rivasjayo
    @rivasjayo 10 лет назад

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

    • @FalconMasters
      @FalconMasters  10 лет назад

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

  • @chisathot750
    @chisathot750 4 года назад

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

  • @enosnoeyaurivillanueva3937
    @enosnoeyaurivillanueva3937 7 лет назад

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

  • @chicopow
    @chicopow 9 лет назад

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

  • @hermespelaez2953
    @hermespelaez2953 10 лет назад

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

  • @johanquintero8560
    @johanquintero8560 3 года назад

    Uno de los mejorws programadores que e visto grasia maestro

  • @ck8x22
    @ck8x22 9 лет назад

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

  • @AlexConA
    @AlexConA 7 лет назад

    No olviden guardar ambos documentos. Excelente tutorial

  • @juanzorrilla8861
    @juanzorrilla8861 7 лет назад

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

  • @ing.williamcordovez8183
    @ing.williamcordovez8183 9 лет назад

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

  • @nocturno7887
    @nocturno7887 9 лет назад

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

  • @edjerher
    @edjerher 8 лет назад +1

    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.

  • @topx777
    @topx777 9 лет назад

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

  • @zion2st2.05
    @zion2st2.05 7 лет назад

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

  • @d-landjs
    @d-landjs 4 года назад

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

  • @Eloiby
    @Eloiby 10 лет назад

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

  • @sergiosalazar7231
    @sergiosalazar7231 10 лет назад

    Gracias, parcero. El tutorial está repiola.

  • @andresfelipebest27
    @andresfelipebest27 10 лет назад

    Excelente videotutorial de lo mejor que he visto.

  • @cristiandroo
    @cristiandroo 9 лет назад

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

  • @jinrobertz
    @jinrobertz 8 лет назад

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

  • @ragnarok_tz
    @ragnarok_tz 4 года назад

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

  • @jaimesandoval9408
    @jaimesandoval9408 7 лет назад

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

  • @brandonordonez5568
    @brandonordonez5568 8 лет назад

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

  • @deybin7
    @deybin7 9 лет назад

    Excelente trabajo FalconMasters muy util e interpretable Gracias.

  • @FalconMasters
    @FalconMasters  9 лет назад +13

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

    • @elsusurrooscuro
      @elsusurrooscuro 8 лет назад +1

      +Jorge C. Si puedes :v

    • @FalconMasters
      @FalconMasters  8 лет назад +3

      Presiono tab, pero porque tengo el plugin de emmet.

    • @sebastiangarzonvargas6239
      @sebastiangarzonvargas6239 8 лет назад

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

    • @GCMSYSTEM
      @GCMSYSTEM 8 лет назад

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

    • @eduardomurillo4775
      @eduardomurillo4775 7 лет назад

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

  • @carlosalbertovizcainogarci3379
    @carlosalbertovizcainogarci3379 8 лет назад

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

  • @darianabracho2646
    @darianabracho2646 3 года назад

    ¡Explicas muy bien! Gracias.

  • @josuedanielflores2008
    @josuedanielflores2008 8 лет назад

    Bastante bueno el tutorial. Se agradece muchísimo

  • @capsuladepsicologia
    @capsuladepsicologia 9 лет назад

    Es verdad, es un buen maestro. felicitaciones.

  • @ABMisterPisos
    @ABMisterPisos 7 лет назад

    Muy buenos cursos os felicito, sois muy buenos saludos

  • @santiagorestreporueda5058
    @santiagorestreporueda5058 9 лет назад

    Parce que belleza de tutorial muchas gracias por explicar tan bien :D

  • @elkinvargas725
    @elkinvargas725 9 лет назад

    Bendiciones mi amigo. Muchas gracias por tus tutoriales

  • @ivanr.valdivia6569
    @ivanr.valdivia6569 8 лет назад

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

  • @yagh53
    @yagh53 10 лет назад

    Muchas Gracias por tus tutoriales, eres muy buen maestro!

  • @alejandrocalderongiron4216
    @alejandrocalderongiron4216 9 лет назад

    Excelente aporte. Muchisismas gracias me ha servido mucho.

  • @osirisrv
    @osirisrv 9 лет назад

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

  • @aylenmenichetti6579
    @aylenmenichetti6579 9 лет назад

    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

  • @photosintesis5420
    @photosintesis5420 4 года назад

    viendo tus videos en 2020 grande

  • @23RUBEN7
    @23RUBEN7 10 лет назад

    Graciiiiiiiiias, Saludos desde Venezuela!

    • @FalconMasters
      @FalconMasters  10 лет назад +1

      Muchas gracias a ti por ver el tutorial.

  • @martincurvale2031
    @martincurvale2031 8 лет назад +1

    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

  • @32yuiman
    @32yuiman 8 лет назад

    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.

  • @PLGuille
    @PLGuille 7 лет назад

    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?

  • @freddysanchez27
    @freddysanchez27 9 лет назад

    Excelente! Gracias por este gran aporte

  • @samuelramosDRS240815
    @samuelramosDRS240815 10 лет назад

    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

  • @gpacheccgpachecc9357
    @gpacheccgpachecc9357 8 лет назад

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

  • @samuelvera5150
    @samuelvera5150 5 лет назад

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

  • @williamjosegarciaroca8266
    @williamjosegarciaroca8266 10 лет назад

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

  • @Thedomingoxp
    @Thedomingoxp 7 лет назад

    uff eres un crack mi hermano

  • @FreeloCreativo
    @FreeloCreativo 9 лет назад

    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?

  • @israel_banks9024
    @israel_banks9024 9 лет назад

    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

  • @alicehime0412
    @alicehime0412 6 лет назад

    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

  • @alexcarvajal2410
    @alexcarvajal2410 8 лет назад

    (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

  • @gabo182b
    @gabo182b 9 лет назад

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

  • @erikmujica9848
    @erikmujica9848 7 лет назад

    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.

  • @canadafendernick51
    @canadafendernick51 Год назад

    Me gusto tu video amigo ❤un abrazo fuerte ✌🏼

    • @FalconMasters
      @FalconMasters  Год назад

      Gracias! Me alegra que te gustara. Saludos!

  • @gregorismenor
    @gregorismenor 9 лет назад +3

    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

  • @Dowg-man
    @Dowg-man 10 лет назад +1

    Tu sabes lo que haces!

  • @johanlobaton846
    @johanlobaton846 7 лет назад

    Gracias,tu video me ayudo bastante suerte.

  • @mistralvideo
    @mistralvideo 4 года назад

    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
      @mistralvideo 4 года назад +1

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

  • @arturorangel7891
    @arturorangel7891 5 лет назад

    Exelente vídeo ;) y muy bien la manera de explicarlo

  • @carolinamunoz5823
    @carolinamunoz5823 7 лет назад

    eres increíble mil gracias...

  • @leocore77
    @leocore77 9 лет назад

    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!

  • @raulchavez6990
    @raulchavez6990 8 лет назад

    Excelente buen aporte estimado !

  • @sabbath13
    @sabbath13 7 лет назад

    muchas gracias por este material. que programa usas?

  • @hectorramos5632
    @hectorramos5632 7 лет назад

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

  • @KaizerHind
    @KaizerHind 7 лет назад

    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

  • @jonathanvalenciagiraldo8634
    @jonathanvalenciagiraldo8634 8 лет назад

    Que programa estás utilizando?, gracias

  • @johannpolancoleal9765
    @johannpolancoleal9765 5 лет назад

    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?

  • @juancamilotobonquesada717
    @juancamilotobonquesada717 8 лет назад +8

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

    • @juandaniel8139
      @juandaniel8139 4 года назад

      Display: block, pero lo aplicas
      .submenu ul

  • @alejandrodiaz7028
    @alejandrodiaz7028 2 года назад

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

  • @mariaguadalupecastillosalv685
    @mariaguadalupecastillosalv685 7 лет назад

    excelente amigo gracias por compartir tus conocimientos felicidades:D

  • @Alanbm_
    @Alanbm_ 8 лет назад

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

  • @PatMr93
    @PatMr93 9 лет назад

    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?

  • @FrancoLacapra
    @FrancoLacapra 7 лет назад

    Muchísimas gracias!

  • @angelicarodriguez611
    @angelicarodriguez611 3 года назад

    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.

  • @jjylisto
    @jjylisto 4 года назад

    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

  • @rockstar9514
    @rockstar9514 9 лет назад

    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