Como hacer un Menú Vertical estilo Acordeón con HTML, CSS y Jquery (Parte 1)

[@FalconMasters]

Estamos de regreso! Espero que les guste este nuevo tutorial. Manita arriba por la nueva intro del canal (Y)

[@fixpina5712]

+FalconMasters Me encanto la intro, continua con tu exito, y muchas gracias por compartir tus conocimientos. Saludos desde Venezuela!

[@FalconMasters]

+Landoms91 Me alegra mucho que te haya encantado! :D Saludos a ti tambien

[@FalconMasters]

+CoPeTe AEP Muchas gracias! :D

[@batu01]

+FalconMasters Buena intro!, mas corta que la anterior y un diseño mas bonito!, Felicidades!.

[@brianalexander2202]

+FalconMasters En la descripción del vieo no estan todos los links que mencionas.. graciasb

[@ycm819]

Hola Carlos Arturo, varias cosas: 1. En primer lugar la intro está excelente porque es atractiva, sintética y sobre todo rápida; porque no hay algo más irritante que ver introducciones larguísimas como si eso fuera lo más importante. Lo que más nos importa a nosotros los desarrolladores y diseñadores es ver al "rey" o sea al código. :) 2. La velocidad de tu explicación = PERFECTA 3. Algo muy importante, tu dicción = CLARA Y LIMPIA Aquí en KZbin hay muchos tutoriales interesantes pero como están hechos por españoles NO se les entiende nada, casualmente por su mala dicción (pronuncian todo con Z y se apagan al terminar las oraciones) Lo mismo pasa con los centroamericanos que pronuncian el castellano de otra manera, muchas veces ininteligible. 4. Volumen de tu voz = PERFECTO Por ejemplo, hay tutoriales hecho por otros mexicanos que hablan tan despacio que aún levantando todo el volumen no se les escucha claro. 5. Tono de la voz = ALEGRE Y ENTUSIASTA. Eso anima mucho a aprender y a seguir viendo más videos de tu canal. Hay otros casos donde los autores explican de manera tan triste y deprimente que pareciera que los están obligando o que no tienen ganas de hacerlo. 6. Clase preparada = BIEN No hay nada más decepcionante que autores que en medio de sus clases se encuentran con serias dificultades y se ponen a tratar de investigar dónde está el error ¿? y consumen tiempo en el mismo video, lo cual demuestra que el autor ha improvisado, no ha preparado su clase. Yo creo que eso es una falta de respeto hacia los usuarios y seguidores del canal. 7. El fondo del tema = SUPER UTIL En conclusión, un Excelente tutorial y no sabes cuánto te gradecemos que hayas tenido la buena voluntad de publicarlo y compartirlo con nosotros. Saludos desde Perú.

[@ertrii]

Tengo que admitir que todo lo que aprendí, lo aprendí de aquí!, gracias FalconMasters.

[@FalconMasters]

+ertrii Estupendo, muchas gracias a ti

[@demeterzai671]

Hola Falcon, muchas gracias. Entendí todo muy buena la explicación.

[@belenharo6190]

genial al fin nuevo vídeo felicidades esta excelente justo hace unos días lo estaba buscando super bien explicado

[@FalconMasters]

+Belen Haro Muchas gracias :)

[@northerchild]

Que genial que volviste sos un mostro total gracias por tanto!!

[@FalconMasters]

+Norther Child Muchas gracias a ti

[@TorokokoV7]

Falcon, ¿Puedes seguir creando tutoriales así?, o sea, cosas útiles para incluir a una página. Y también, ¿un "temporizador", por decirlo de alguna manera? *LAIKAZO!*

[@FalconMasters]

+nDit Claro que si, seguiré haciendo mas videos asi! Me alegra que te gusten.

[@blancodeplomo]

ya te extrañabamos

[@FalconMasters]

+FridoomAssassin Yo también extrañaba hacer videos.

[@KaorumishimaruXyz]

Al fin!!! Re copado.

[@FalconMasters]

+Kaoru Mishimaru Muchas gracias

bien bien esto andaba buscando muy amable.. gracias por compartir lo q sabes

[@FalconMasters]

+Enrique muñoz Muchas gracias a ti por el apoyo me alegra que te sirva :)

[@carlosdiazlopez9905]

hola amigo muy buenos tutoriales, en el minuto 10:42 mi pregunta es al momento de hacer responsive es un complemento que utolizas para que te de los pixeles por que veo que arrastras y en la parte de arriba va cambiando el tamaño en pixeles gracias y si es complemento me puedes decir cual es por que esta bien jeje saludos gracias

[@angel29manuel12]

Hola Falcon, estupendo video, tengo una duda en caso de agregar un submenu dentro del menu redes sociales, como haria el despliege del mismo, ya que no me funciona

[@rarango19650723]

Hola Falco, Muy bueno estos tres video todo me funciona, menos el acordeón, ya no encuentro jquery-1.12.0.min.js en la pagina jquery, eta es jquery-3.2.1.min.js, con esa tambien sirve? gracias

[@automediacar]

Genial Falcon, estaba esperando este video...!!! Como dirìamos en Quito... Pai, que significa Gracias...

[@FalconMasters]

+Robert Encalada “automediacar” Pai pa ti! Muchas gracias

[@WilsonCastroAyala]

Hola muy buena tu canal pero podrias decirme que programa usas para ver tus cambio a lado de sublime?? para no estar actualizando cada rato en la web mil felicidades cursos muy bien explicados

[@silvanonunez862]

saludo falcon como puedo hacer consulta a una base de dato que me traiga la hora de entrada de lunes a viernes y que me de total de horas de retardo de cada persona es decir los minutos y horas.

[@pocoyo87400]

buenas! carlos arturo, tengo un problema y es que como ya señalaste habemos personas que no nos funciona el codigo jquery, y por descarte ya verique que este enlasada con el index y este bien la ruta, nose si tiene que ver la version del Jquery, pero todo lo demas iba bien hasta que llego la parte del Jquery, por favor nos puede tender la mano y guiarnos como podemos resolver, ya que no tiene ciencia el menu sin eso, gracias espero tu respuesta lo mas pronto posible

[@PedroMollar]

Carlos, la página de donde sacas los iconos no funciona

[@arturoespinoza6254]

Hola Falcon, muy agradecido por el tutorial, son muy buenos! Hace tiempo hice una aplicacion utilizando frames y frameset, en la cual al clickar un enlace, el contenido se ejecutaba en un frame diferente utilizando la funcion parent. Podrias indicarme donde puedo conseguir informacion para hacerlo con DIVS? Gracias!

[@JesusRamos-vd4xz]

hola Carlos, ¿Como puedo hacer gráficas animadas?, es decir que a partir de datos almacenados en sql pueda graficar y tenga moviviento al ejecutartarlo. Saludos y gracias anticipadas.

[@radian825]

En el font-awesome no aparece ese enlace pone que descargues una carpeta, la descargas copias todo y no muestra los iconos.......

[@elchochaso]

pregunta como accedo al contenido de los item de ese menu

[@WOLF91]

gracias. excelente contenido

[@nicogarcia3852]

falcon holaeste tmenu acordeon sirve para menus horizontales?

[@lucialeiva1608]

Hola en el curso de Udemy pones los links?

[@edgaralonso3846]

Hola buenas tardes amigo, muy buen material pero no me despega el menú el jquery actual es el 3.6 alguna solución. Gracias

[@3l1t37]

hola amigo FalconMaster una consulta como puedo hacer que cuando elijo la opción me salga al costado el formulario... soy nuevo en esto.. =)

[@angeldanielcardonalopez5452]

hola pero ¿cuales son los links del video que me llevaran a Google-fonts y el Font-awesome?

[@roloox-o5o]

FalconMasters cunado pongo el link de icon funciona tambien sin iternet??

[@DX_Hol]

Todos estos videos los podemos encontrar en tu nuevo curso de udemy ?

[@kathyqueenheart]

Hola, ya terminé con el curso (muy útil) de HTML, cual me recomendarías mirar antes de crear un menú vertical? Muchas gracias :D

[@yasmannymora1744]

ayuda porfavor no me funciona al momento de desplegar los submenús nose si se deba a la versión del jquery

[@sistemaspersonalizados3861]

Hola, estoy tratando de enlazar el menu a otra pagina pero no funciona, me puedes indicar cual es el error.

[@joelcosztrako8084]

Aaaaaaleluya! Aaaaaaleluya! Aleluya! Falconmasters subio nuevo video!!!!!

[@masterweb6837]

buen canal bro excelente

[@FalconMasters]

+WebMaster Muchas gracias

[@rodrigohernandoyubero6640]

No aparece el link con el código... si fuera tan amable de subirlo porfavor? Yo cuento con su curso de diseño web de udemy y tampoco lo encuentro ahí. Gracias

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@alejocuello8655]

Hola FalconMasters la verdad no hallo las fuentes entré a Google fonts pero no aparecen

[@josueespino7173]

donde esta la pagina pero los iconos?

[@polodibujanye]

¿Por qué Ud. pone "CODIGO DEL PROYECTO" si en su página no aparece nada? Es solo para que entremos a su pagina?

[@sparovas]

Realmente quería poder comprar el curso de PHP pero no alcance durante el tiempo de descuento. Tu crees que existan otros descuentos a futuro?

[@FalconMasters]

+Erick Poppe Andrade Si habrá mas descuentos en el futuro :)

[@sparovas]

+FalconMasters excelente :')

[@AngelaLariosLuna]

FM, este tutorial no esta en tu pagina u.u igual, muy buenos tus tutoriales

[@palmenros]

¡Geniales vídeos! Una cosa, he visto que has vuelto a Sublime Text, ¿Cúales son sus ventajas sobre Atom? Gracias

[@FalconMasters]

+Pedro Palacios Pues cada vez tiene menos ventajas que atom, simplemente lo uso porque me gusta. Pero atom tambien es estupendo. Incluso pienso utilizarlo de nuevo.

[@cl_gestinfo]

Tengo como 25 itemes de menu y me muestra en el telefono móvil los primeros 11 y no se puede hacer scroll hacia abajo para ver los restantes ... alguna sugerencia ???

[@FalconMasters]

Puedes ponerle al contenedor padre un overflow: auto; Asi aparece un scroll automático cuando no caben mas items.

[@cl_gestinfo]

@@FalconMasters Hola. Me funciona perfecto el scroll cuando lo veo en el computador, pero no cuando lo veo en el dispositivo móvil a pesar de ponerlo tambien debajo de @media y dentro de .contenedor-menu { overflow: auto; }

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@Tabsguitar280]

porque la clase activado se agrega y se remueve

[@nairlullaby2748]

Donde podria ver el codigo del proyecto? No lo encontré e la web. Muchas gracias

[@fcolima2191]

oye carnal, utilizo tu codigo, pero no me salio el menu, copie letra por letra y el link esta bien. pero ni asi que onda alli?! espero tu respuesta.

[@jensysantana8663]

Usa este link y te saldra si o si

[@alandacikdsk3366]

como puedo escribir adentro de los acordeones ?

[@raulbellosom]

Hola amigo me gusta mucho todo tu contenido admiro tu trabajo ojalá y puedas contestar a esta pregunta: De casualidad tienes algún otro curso de desarrollo de webs Html? Es que explicas muy bien en tus videos pero aun no tengo idea de como generar una buena estructura (no me queda claro cuando usar las palabras reservadas como hgroup o div u otros)

[@FalconMasters]

+Raul Belloso Hola que tal, muchas gracias me alegra que te sirvan mis videos. Despues del curso de HTML puedes pasar a ver mis videos de diseño web como el "curso de diseño web desde cero" en la mayoria de mis videos practicos explico como usar esas etiquetas. Saludos

[@raulbellosom]

+FalconMasters Muchísimas Gracias enserio Muy Buenos tus videos,

[@jesusgm2419]

Muy bueno. pregunta :D ¿porqué has estado algo inactivo?

[@FalconMasters]

+Jesús García Lo que pasa es que he estado trabajando en otros proyectos, incluyendo el curso de PHP

[@jesusgm2419]

+FalconMasters Ok bro, me parece perfecto te deseo lo mejor y me encanta tu canal.

[@FalconMasters]

+Jesús García Muchas gracias! :D

[@hectorramos5632]

Para los que no le salen los iconos agreguen este link en la parte de arriba.

[@tejos]

Hola, estoy intentando y no me aparecen los íconos y tengo bien los enlaces :-/

[@hectorramos5632]

Intenta con otro link, capaz debe ser la versión que tienes.

[@tejos]

Gracias, estaba revisando otros enlaces en la misma web...

[@yessikaroman182]

gracias me ayudo mucho.

[@josuevaldez1559]

Consulta como podria al deslizar un menu y hacer click me muestre una imagen otro click y me muestre otra imagen en el mismo lugar alguien ayudeme :(

[@eledi]

Crack!

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@Francoleonel11]

Hola, me pone un cuadradito en vez de el icono

[@sistemaspersonalizados3861]

estoy trabajando con mvc 5, visual studio 2017

[@andreslora6709]

NUNCA SE ME PONEN LA IMAGENSITA POR EJEMPLO EL DE INICIO LA CASITA PORQUE?

[@zeta0ron]

pone la referencia

[@santiagoyosha4519]

Como Consigo Un Programa Para Hacer Paginas Una Recomendación .

[@miguelencarnacionpalacios8246]

Un favor, pordría hacer un menú con logo centrado...

[@reneromero5731]

FalconMasters sube de nuevo el codigo porfavor no me sale :(

[@mastergamervzla8439]

Los iconos se colapsan y no se que hacer alguien me puede ¿ayudar?

[@ieZ000]

falcon puedes hacer un tutorial php de formulario pls :)!

[@FalconMasters]

+ieZ En el curso de PHP enseño como hacer uno. Esa es una de las muchas practias. www.tutorialdephp.com

[@ieZ000]

FalconMasters okeyy gracias :)!

[@ieZ000]

FalconMasters hey FalconMasters se puede subir un html en blogger? o el html se puede cambiar a xml?!

[@Mayo21199]

Crack, quien utilizaba Internet Explorer en 2016 GENIO, FIERA,MASTODONTE,CHARMANDER. Ves con cabras. Tomate

[@Jesus-mq8vi]

Amigo muy buen tutorial, pero necesito saber como poner esos iconos cuando no tenga conexión a internet.. ^^

[@joelcosztrako8084]

Puedes usar icomoon, él ya tiene un vídeo sobre eso

[@FalconMasters]

+Jesús Peña Puedes irte a la pagina de fontawsome y descargarlos a tu computadora, simplemente tienes que relacionar bien el archivo css que te daran.

[@Jesus-mq8vi]

FalconMasters Listo! gracias amigo...

[@gabrielluna2474]

no me funcionan los iconos

[@zeta0ron]

agrega esto men

[@jensysantana8663]

con este link te funcionaran si o si

[@Agusz12]

@@jensysantana8663 Graciasss

[@jensysantana8663]

@@Agusz12 descuida el conocimieto es para compartir, feliz navidad...

[@Agusz12]

@@jensysantana8663 Igualmente bro!!

[@franzibanez1558]

No se puede descargar el código fuente, Muy bueno el menú Saludos desde BOLIVIA!!!

[@SanchezGamers10]

Un favor pls, me podrias pasar el link para tener los iconos directamente con la pagina!? pls,

[@EdTkiere]

me pasa llo mismo lo que hice fue descargar font awesome y redireccionarlo pero no pasa nada

[@cesarramirez3476]

el proyecto descargable no lo tienes

[@cesarrodriguez2233]

que pena podrias renovar los links

[@burdokcraz1748]

muy bonito el menu lastima que no funciona el tuto