Como hacer un menú desplegable adaptado a dispositivos móviles (Responsive Design)
HTML-код
- Опубликовано: 29 дек 2014
- En este tutorial aprenderás como hacer un menú de navegación desplegable y adaptable a dispositivos móviles.
🚀 Blog de diseño web:
www.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
♦ Link del primer menú:
www.falconmasters.com/web-desi...
♦ Tutorial escrito, recursos y códigos;
www.falconmasters.com/web-desi...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmasters.com
♦ Curso patrocinado por okhosting:
www.okhosting.com 
Наука
FalconMaster definitivamente sus tutoriales son de los mejores que he encontrado en youtube, son muy practicos para aplicarlos en los sitios web que se desarrollan y sinceramente uno aprende, gracias amigo
Excelente video, buscando días como hacer un sidebar y este es el mejor video que he visto hasta el momento y el que mejor explica su funcionamiento.
Buenas tardes FalconMasters, de verdad eres un genio tío, me gusta los vídeos que subes aquí, por que explicas con mucha claridad.
Estoy aprendiendo mucho con tus vídeos que nos ofreces en youtube.
Excelente tutorial, efectivamente mejor mire los dos videos así el conocimiento es completo Mil Gracias
Falcon me has salvado, y gracias a tus tutos soy el mejor de mi clase, explicas de una manera excelente y muy detallada. Muchísimas gracias bro :'3
Recién descubro tu canal, y al mismo tiempo tu Portal Web, y la verdad me parecen excelentes tus tutoriales, me son de mucha utilidad ya que soy desarrollador web, acabas de conseguir un nuevo sucriptor :D
Felicidades excelente tutorial, al principio no me salia el menú pero revisandolo bien y volviendo a seguir los pasos donde había mis errores, gracias por tan buena orientación en este tema...
realmente te felicito por esos conocimientos y te agradezco el echo de que los compartas eres increíble
I do not understand your language but i learning lot of things from you. Thanks Man !!
+Ahmet IPEK Thank you very much for watching my videos. Im glad they are helpful to you :)
+FalconMasters como le ago para unir el menu y el formulario en una sola parte
Muchas gracias tus conocimientos son de un valor incalculable. Gracias.
Excelente video ! Solamente vi éste y el de bootstrap, los dos ESPECTACULARES , te felicito
Muchas gracias Falcon, por tomarte el tiempo y la dedicación de explicar cada parte, me ayudo mucho en mi proyecto que estoy trabajando, ya tienes un SUSCRIPTOR mas.Saludos!!!
Excelentes tutoriales; claro, preciso y rapido. les recomiendo
Me has ayudado mucho, te mando felicitaciones por tu dedicación y compartir tu valioso conocimiento, muchas gracias
Bro, te admiro!!!
He estado viendo tus videos, revisado tu sitio web y me encanta la forma que explicas todo, con claridad y detallamente
Estoy a punto de terminar mi high school y quiero estudiar Computer Science en College, tus videos me inspiran cada vez mas y quiero aprender hasta llegar a saber lo que tu ahora sabes
Gracias por compartir!!! Se te quiere loco
Genial, muchas gracias y mucha suerte!
FalconMasters como se haría este mismo menú , pero que ocupará todo el ancho de la pantalla de escritorio ???
with:100%;
Muy buen tutorial y gracias por aver hecho otro corregiendo las dudas que me dejo tu otro video
excelente video tutorial, el mejor que he visto. Gracias por aportar tus conocimientos
Muchas gracias, tus videos me han sido de mucha ayuda. Por favor sigue haciendo videos tan buenos!
gracias por proporcionar tus conocimientos con los demás..
El mejor canal sobre como crear paginas web te felicito
sos un capo!!! me resolviste un quilombo que tenia. gracias capo sos el mas.
Super! Excelente y práctico video, bien explicado, buen uso de herramientas. Felicitaciones
Excelente aportación, se agradece tu esfuerzo.
Excelente tutorial, mi primer menu en la web, Gracias ..
muy agradecido por la info..
lo estoy probando en Eclipse y me va muy bien..
Hola!! Gracias por tus grandes tutoriales.
wow excelente gracias por tus tutos he aprendido y estoy aprendiendo demaciado
Muchas gracias amigo me sirvió mucho, excelente vídeo
Buen video, gracias por compartir tus conocimientos con nosotros, ahora lo intentare hacer :) sldos sigue asi
Como siempre excelente explicación!!!
Muchas gracias, excelente trabajo
Mais um excelente tutorial! Muito obrigada!!! :)
Muy buen tutorial, muy bien explicado.
Son exelentes tus tutoriales
Buen trabajo falconmaster :) me sirvió tu menu
Te mereces mas apoyo bro eres el mejor ... #DiosTeBendiga
Excelente todo funciona perfecto muchas gracias
excelente amigo, me ayudaste mucho con este tutorial
Excelente presentacion estimado.
Me ayudaste un buen, explicas muy bien, gracias mi buen :D
GRACIAS, BUEN APORTE y todo claro :)
Gracias; me fue de mucha ayuda tu tutorial,
Saludos, Arturo, muy bueno
Hola FM, muchas gracias por el vídeo, me quedó idéntico y funciona bien, pero tengo una duda ¿cómo agrego otro nivel de profundidad al menú? es decir, ¿cómo agrego otro sub-menú dentro de otro sub-menú? para que me quede no de 2 sino de 3 niveles...
excelente tutorial amigo te has ganado un sub mas
sigue asi
muchas gracias por el video!
Thanks for this nice and awesome tutorial
Hi falconmasters, great job! I love it so much, and i have one question related to this: how can you make a second drop down menu responsive?
Gracias man, me ayudaste mucho :D
Excelente tutorial!!!!
gracias. Muy buen aporte
Excelente tuto...
Gracias por compartir!!! =)
TE ADORO!!!
Eres un master, jajajajaja (por eso lo de falconmaster verdad?) muchas grax por el tuto.
Grande falcon grande capo :v, genial tu video, ya pude aprender !!!
Me encantó. Gracias
hola Falcon me han ayudado demasiado tus tutoriales, tengo una duda estoy realizando un menú sencillo, solo de enlaces no es una lista, y esta acompañado del los span (iconos), quisiera que al momento de que se fuera reduciendo el tamaño de pantalla tipo 400 px, solo quedaran los iconos y desapareciera el texto en el nav, te agradeceria :) bastante
Aula perfeita 👏👏👏👏👏👏👏
Qué gran video..... Qué gran aporte :D
Orlando Campos Muchas gracias
Me encanto el tuto por que vas paso por paso
gracias
Excelente vídeo.
gracias amigo por el tutorial me quedo padre el menú, pero tengo una pregunta ¿Cómo puede poner este menú en mi blogger? y gracias de nuevo.
muy buen video, sigue asi
MUCHAS GRACIAS :D
Muy buenos tutoriales, muy explicados y detallados.
Tengo una duda, un tanto fuera de lado de código o de estructuras, sería esta mi pregunta, ¿Como tienes configurado el Sublime ? veo muchas funciones que no me aparecen a mi. Saludos.
Muy bueno men, mil gracias, voy a chequear tus cursos de HTML a ver que tul pero ya con esto te ganaste mi aprecio jaja
Buen aporte.
Una pregunta falcon , yo ya hice todo me sale genial pero abajo del menu tengo un slider, el cual el menu antes me salia abajo le agregue un z-index:1000;
lo malo a la hora de hacerle clik me sale el menu y se vuelve a ocultar solo automaticamente , queria saber si me podias ayudar a solucionar el problema ese
Hola Falcon, tengo una consulta, hay alguna forma de transformar este menú responsive a Wordpress? Me gustaría usarlo para mi pagina, demás está decir que seguí tu curso de creación de tema Wordpress y me gustaría ocupar este menú en él, pero no se como configurarlo en wordpress.
SALUDOS Y EXCELENTE TRABAJO EL QUE HACES.
Excelente te felicito
me encanto gracias
Excelente, gracias :P
muy bien excelente muchas gracias por compartir
deje de hablar :v
JEJEJE LOCA
Esta bueno el tuto
Hola falcon,
muchas gracias por el tuto
solamente tengo una pregunta,
para hacer este menu fijo ,
para que al momento de realizar scroll mi menu se vea ,
gracias
Hola FalconMaster, realmente eres un genio! muy bien explicado! grandes mejoras le hiciste a este segundo menú. Te hago una consulta, seguí los mismos pasos e inclusive para ver donde estaba el error me copie de tu web el código y el inconveniente persiste. No puedo sacar el scrollbar. De donde lo haces?
Muchas gracia! sigue así!!!! éxitos.
Excelente tutorial...!! todo funcionado ok. Pero amigos de FalconMaster, puede indicarnos los utitlitarios para maquetacion en Sublime ?
FELICIDADEZ EL NOMBRE DE TU PAGINA LO DICE TODO MASTER FELICIDADEZ Y GRACIAS POR LOS TUTORIALES. ;)
+kronno salas Muchas gracias
Buenas noches..... Excelente tutorial.!!... Tengo una consulta; ¿como hago para que el submenu o los children me aparezcan de forma horizontal debajo del menu ppal?... muchas gracias de antemano
Muchas gracias me sirvio muchisimo el video, pero tengo una duda, cuando la pantalla disminuye el tamaño (esto solo pasa en la pc) y usas el menu desplegable (cuando esta en tipo acordeon) al volver a poner en tamaño normal a la pantalla el menu desaparece.
Ademas queria preguntarte como hago para que el menu sea pegajoso o sticky
Muchas gracias por todos tus videos pero hay alguna forma de que cuando se haga click en el botón recién aparezca el submenú, y no cuando se pasa el mouse por encima?
Oye, genial tutorial, muchas gracias!!
Sabes, tengo una duda, como puedo poner este menú en un solo archivo, y que todas las demás páginas de mi sitio lo puedan visualizar? (así, si lo modifico, lo hago una sola vez, y se actualiza en todas las páginas) con un ? o con algún otro código, tal vez css o php? Muchas gracias!
Excelente hermano, al parecer era un punto xD Luego les paso la web, me ha servido de mucha ayuda de lo que viene siendo el diseño web, un saludo.
Frank me alegra que lo hayas podido resolver
Eres un genio Carlos, ¡Te pasas con tus tutoriales!
Hola; pude hacerlo el menú correctamente pero me surge un problema. En la pagina tengo un slide y al desplegar el sub menú me queda atrás del slider. pero solo al verlo en la pc.
Hola @falconmasters muchas gracias por el tutorial, quisiera saber si podrías ayudarme, tengo todo hecho solo que al darle click al menu en un tamaño menor despliega el menu completo pero rápidamente lo contrae, habrá alguna forma de repararlo.
Exelente video
Oswaldo Barajas Gracias
FalconMasters hola amigo tengo una duda ocupe un tutorial antes de este para hacer el menu, y si funciono
pero en celulares con pantalla muy pequeña se corta el menu y no se desplaza hacia abajo para ver mas opciones y no se como corregirlo y no se si tu tengas ese problema checalo con otro celular en verdad veras que el menu si se pasa en modo mobile pero si la pantalla es muy pequeña no se minimiza y no puedo ver todas las opciones checalo lo tengo en este sitio
petservice.webcindario.com/
espero puedas ayudarme mi twitter es "@javiiiiier" gracias =)
Excelente video, tengo una duda, en caso de que quisiera agregar otro sub menu dentro de un submenu, es decir un menu con 3 o n niveles como se solucionaria el despliegue de las opciones con los eventos de jquery?
Hola hermano.
Tengo una pregunta, ya que no se me despliegan los submenus.
¿Que propiedades tiene la clase CARET?
Muchas gracias de antemano.
Genial el tuto.
Saludos.
Hola, muchas gracias por tu paciencia para este tutorial, todo me funcionó perfectamente, sin embargo, me gustaría saber como lo puedo hacer para crear un sub sub nivel, ya que, al seguir los pasos anteriores, me quedaron los sub sub niveles, de una forma desordenada y las cajas no aparecieron a la derecha como yo los quería, sino encima, como puedo corregir este error? espero que me puedas ayudar y sigue así que están muy buenos tus tutoriales, saludos.
Carlos, como estas excelente tutorial eres el mejor; mi pregunta es la siguiente: ¿como haría si quisiera hacer que el menú en vez de ser de forma vertical sea de forma horizontal haciendo el mismo efecto en jquery?
Muy bueno tu video.
hola una pregunta y si das un click y ocultas las cosas y despues lo cambias a escritorio se quedan movidos hacia la izuierda porque se queda activado el triguer de java script, como desactivarlo?
Donde me recomendarias para comenzar a leer y aprender Jquery ? Muchas gracias por todo.
Hola amigo Excelentes tutoriales, tengo una pregunta necesito colocar el menu mas abajo , porque arriba agregue otro navbar, cuando estoy en modo movil el menu me aparece despues del navbar, como hago para que me aparesca sobre cualquier otro elemento que agregue. Cuando lo pongo de primero asi como en el video no tengo problema.
!Gracias...
43:25 como se le hace para que al presionar fuera del menu se desaparesca, aunque no presione el boton?
Gracias, muy util, me han gustado todos tus videos, merece un Like.
Tengo una duda hemano, trato de hacer un menu desplegable tipo acordeon, pero el problema que tengo y es una duda en la cual me gustaria que me guies, es que necesito que al desplegar cada Item de dicho menu, tenga varios input type=checkbox, gracias, espero tu colaboracion
Hola gracias por el apoyo, tengo una consulta como hago para que cuando quiera salirme de la barra de navegación,osea que con un click en el contenido de la página se salga de la barra de navegación.
Excelente video. una pregunta cuando tengo la ventana en menos de 800 px para modo celular, solo me aparece el icono del menu pero al momento de dar clip no me aparece el sub menu.
saludos
Hola Falcón te sigo en las diferentes redes y e aprendido mucho en muy corto tiempo pero en la página que he creado incluyo una caja de texto y un slides y ahora el sub menú en vista de tablet o dispositivo no despliega los sub menus eso se podría deber a algún conflicto entro los diferentes archivos js ?
Muy buen tutorial ! Felicitaciones !
Pero lamentablemente no me sirve para mi sitio ya que a mi como a varios usuarios que vi en los comentarios no me funciona el scroll del min 34:36
Si pudieras aclararnos un poco el panorama te lo agradeceria mucho !
Muy bueno!
Asier Willyams Gracias
Una pregunta men, como puedo adjuntar eso a blogger? Coloque el un gadget con codigo html y solo me arrojo el html pero no me lee la direccion de estilos.css, en ese caso que se debe hacer?