Como Hacer un Menú Dinámico con Flexbox y Responsive Design 

Para que no tengan problemas con los iconos a la hora de descargarlos háganlo desde esta pagina que es la versión que yo uso en el video. fontawesome.com/v4.7.0/

Primer video del año ! Este 2017 tengo planes de subir videos cada semana, si estas de acuerdo que debería de ser así por favor dale manita arriba al video.

muchas gracias , no pares de compartir tus conocimientos

Eres todo un maestro, no sólo por tus conocimientos sino también por la forma en que explicas todo detalladamente. De igual manera es agradable ver los errores de sintaxis que cometes y motivas a revisar bien por si algo no se ejecuta correctamente. No sabes qué tan agradecido estoy con este tutorial, ahora hasta me dan ganas de renovar todos los menús de las páginas que hice jaja. Lo cual es casi imposible de no ser que le diga al cliente: "Tengo una nueva propuesta para su menú", por lo cual posiblemente quiera que sea gratuito al yo ofrecerle (Jaja lógica de cliente) Pero me ayudas mucho en el proyecto que estoy desarrollando actualmente en el cual ya tenía todo el menú responsive listo pero me faltaba la parte de hide y que cambie el ícono de las barras por la "X". Saludos FalconMasters.

Muchas gracias Carlos, todo perfecto! Hace rato estaba buscando como crear mi primer menu responsive y con tu video pude lograrlo. De nuevo gracias.

Excelente video FalconMaster! A mas de un año y sigue siendo útil, sobre todo para poner en práctica los conceptos de flex-box y hacer uso de nuevas librerías.

Excelente Carlos. Muy bien explicado. Gracias por volver a grabar. Saludos

Cuanto tiempo!!!!! La espera ha valido la pena ^^

Gracias por todo que bueno que estés de regreso

Sin ninguna duda es un proyecto muy interesante que realizaré cuando tenga algún rato libre, gracias y un saludo!

Que buenos tutoriales FalconMasters, lo mejor que he visto en diseño web. De verdad muy buen contenido

Como siempre, sigues siendo un crack, por ti, soy desarrollador web!

He aprendido con tus videos, todos son muy buenos. Buen trabajo 👍🏼

en serio eres geniaal, estoy tomando todos tus curso y pronto me voy a registrar el que es de pago

Buen Video!! Me gusta cuando tus videos duran mucho :)

hola, gracias por tu tiempo y el compartir!!! saludos

Deseo desempolvar lo aprendido de Diseño Web , Excelente FM que compartas el conocimiento estare muy al pendiente de cada uno de tus videos, talvez te pueda seguir el paso jajajaja Slds desde Tegucigalpa , Honduras.

Buenisimo tu video muchas gracias por compartir tus conocimientos.

Muchas gracias por el vídeo 🙌 me despejó de muchas dudas al momento de realizar un menú de navegación 👍

Excelente primer video del año FalconMaster...!! TE DESEO LO MEJOR... Una obervación si usaste $("window").on("resize", function({ ... }))... ya no necesitarías definir el ancho del width cuando sea menor de 700 ya que como mencionas el evento resize detecta el ancho de la ventana el cual oculta los enlaces y muestra los enlaces restableciendo sus valores del icono al tamano determinado... Es una observación.. SALUDOS

Muy bien explicado :D, Saludos desde Colombia

Gracias, me ayudo mucho con un proyecto personal.

para entender mejor este tutorial, deberiais ver los dos tutoriales que tiene en el canal sobre flexbox, son muy buenos, enhorabuena por todo compi :)

sos un genio loco ja muy buenos tus tutoriales

Muchas Gracias.. Exelente Cuanto tiempo :D

Muy buen video...me funciono tal cual. gracias falconmaster

gracias falcon por tus tutotiales doy manita arriba

Gracias por tus aportes, por favor complementa este proyecto con un submenú, un footer con redes sociales y un slider por favor. Muy agradecido por todo lo que ya nos has brindado. (Y)

Excelente video genio! Saludos desde Buenos Aires

gracias falconmaster debera esto me ayuda mucho con un proyecto que tengo

VOLVISTE :D !!! BRUTAAL

Muy bueno me funciono! gracias!!

Gracias me has resuelto muchos problemas :D

Eres el mejor man. me gustaria trabajar contigo. tambien se un poco de diseno web. espero seguir aprendiendo de tus videos.

Solo te puedo pagar con mi agradecimiento, gracias Falcon Master.

Genial, primera vez que ejecuto bien codigos de javascript jajaj buenissimo el tutorial muy claro todo

muy bien saludos desde Colombia

excelente video 👍👍👍

44:20 gritan un gool? me parece que si jaja, gran video falcon

volvisteeee por finnn el mejorr

Buenisimooo, gracias!!

ERES EL MEJOR MAN

Muchas Gracias :D

GRACIAAAAASSSS!!!! Saludos

que buen menu gracias por el tuto.

Ya te extrañaba

Gracias a ti estoy estudiando Programacion :)

Excelente tutorial muchas gracias, solo una pregunta en I. Explorer 11 se pierden los margenes del texto, el texto cubre toda la pantalla. como soluciono ese detalle que en los demás navegadores se ven ok. Saludos

Para el hueco que hay entre los 701 y 717 px donde desaparece el menú, lo que hay que hacer es cambiar el max-width del mediaquery en el archivo css. en lugar de poner 700px, pon 717px. solo en el css, el javascript lo dejna tal como está.

Ya te empezaba a extrañar

exelente!!!

Muy bueno

Gracias

Hey bienvenido de vuelta. Me ha gustado el video, sigues siendo todo un MASTER. Quería comentarte que Icomoon ya tiene los iconos Material Design, así todo tu diseño se ve mas unido 😉

Hola Falcon como va, te pregunto estuve siguiendo tus videos estan muy buenos mi pregunta como seria el codigo para realizar el menú al jirar un dispositivo movil horizontalmente para que el menú se muestre de una forma y al colocar el dispositivo en forma vertical vuelva a su estado normal gracias

Hola Falcon muy bueno el video te consulto los iconos de contacto no me aparecen en el menu que puede ser gracias

falcon como comentas una linea o varios lineas a la vez '?

Carlos, muchas gracias, su tutorial es mui bom y ha contribuido mucho con mi proyecto. Pero como otros ya comentaron aquí, hay el problema de que sólo aparece el logotipo (imposibilitando la navegación) en la resolución 701a 717 de la pantalla. Ver lo que descubrí: . Si usted excluye del html todos los párrafos de la div "main" dejando sólo 1, todo se vuelve perfecto. El problema es que, obvio, las páginas precisam recibir más de un solo párrafo. . Si se pone 717px (en lugar de 700px) en la media query, pero manteniendo > 700 en el "if" del javascript, todo se vuelve perfecto en Chrome y en IE, pero no en Firefox, que muestra el menú abierto. En fin, creo que para resolver de hecho este problema es necesario algún ajuste en el javascript. No entiendo nada de javascript, así que espero su preciosa ayuda. Pido disculpas por mi acento.

Excelente vídeo. si yo quisiera hacer una pagina web y que cambiara todo el diseño en el momento de recargar la pagina web como seria. te agradecería mucho

Muy bien. Y para que no mande el script en el resto de la página que diseño ¿cómo se corta?

Hola , gracias por el tutorial, oye una duda, ¿que puedo hacer si las fuentes que quiero ocupar, no están en google fonts?, tampoco son fuentes de las que vienen por defaul, me veo en la necesidad de subirlas al servidor pero no tengo idea de cómo, veo que no basta con subir el archivo de la fuente .otf.Saludos y gracias

Rayos, siempre trato de hacer lo de sus videos y JAMÁS me salen :((((( ya van 3 videos jajajajaja pero además de todo eso SI APRENDIIIII

Hola! Buen video! Consulta: ¿ Como lo haces para ir visualizando el tamaño de la página web de distintas formas (escritorio, tablet, celular, etc)? Esto lo haces en el min. 1:42 Saludos

Una pregunta Falcon si yo quisiera unir varios programas en una pagina por ejemplo una calculadora y colocarle a este mismo programa esa calculadora como haría o para ser mas especifico en un vídeo tuyo donde hiciste un reloj si quisiera agregarle mas contenido por decir un menú desplegable o un calendario que yo mismo he programado como le haría, si podrías responderme o hacer un vídeo de esto seria genial y te lo agradecería bastante.

Hola Falcon, quisiera saber si pudieras mostrar tus tutoriales aplicables a wordpress (formato PHP)(separado por header-index-footer). te lo agradecería. me encantan tus vídeos saludos

Muchisiimas gracias FalconMaster!!! eres una maquina joer!!! este menú me a servido para mi proyecto de diseño y programación web :) me encanta este menú!! Hice todo tal cual lo explicabas, paso por paso y parando el video y comprendiendo el porque de todo jjja que hay muchas etiquetas y demás, no conocía lo de Flexbox, vere el tutorial que tienes en tu canal. Solo una cosa que no he entendido porque me daba fallo, después de estar un buen rato investigando el porque me daba fallo, viendo todas las lineas de código y demás como lo tenias en tu video, estaba todo bien y me segui dado fallo entre la anchura de pantalla que iba desde 700px al 749px, los elementos del menú no me salían en línea grrrr y me llevo de cabeza un buen rato mirando todo, mira me salía asi ibb.co/j6a0YA , menos mal que me di cuenta que el problema era la anchura del logo que era demasiado grande y no dejaba espacio para poner los demas elementos en línea, pero use lo que decias tu en el video, es decir 250px de anchura, y a ti te sale bien ¿??? no lo entiendo, pero bueno que baje la anchura de la imagen a 100px y ya me sale bien sin ese fallo, asi como en tu video ibb.co/bu4G6V Muchas gracias por estos tutoriales tan bien esplicados :) me encanta tu canal!! Espero que sigas haciendo muchos videos asi.

el toggleClass puedes usarlo en una sola linea es decir toggleClass('fa-bars fa-times'), y el ocultar y mostrar el menu cuando es menor de 700 se puede hacer todo con media en css sin usar jquery

42:20 😱😱😱😱😱

Hola te consulto estya botonera que mencionas en el video es compatible con php? ya que he hecho una botonera con iconos y al trabajar bajp php los mismos no aparecen que puede ser gracias

Todo funciona de maravilla, a excepcion que en responsive no me oculta los enlaces automaticamente, y si le doy click en los icono del repsonsive solamente los cambia,ya vi el video 3 veces y esta igual, "creo" no se a que se deba :c $(function(){ var header = document.getElementById('header'); var headroom = new Headroom(header); headroom.init(); //Menu responsive //Calculamos el ancho de la pagina var ancho = $(window).width(), enlaces = $('enlaces'), btnMenu = $('#btn-menu'), icono = $('#btn-menu .icono'); if (ancho < 700){ enlaces.hide(); icono.addClass('fa-bars'); } btnMenu.on('click', function(e){ enlaces.slideToggle(); icono.toggleClass('fa-bars'); icono.toggleClass('fa-times'); }); $(window).on('resize', function(){ if($(this).width() > 700){ enlaces.show(); icono.addClass('fa-times'); icono.removeClass('fa-bars'); } else { enlaces.hide(); icono.addClass('fa-bars'); icono.removeClass('fa-times'); } }); });

bro estoy haciendo el menu paso por paso tal cual pero el headroom no me carga.... no me muestra las clases del header ni se inicia .... simplemente no funciona

hola amigo tengo una pregunta sabes como cambiar el tamaño de las miniaturas en blogger saludos

42:20 que fue eso we :0

hola carlos necesito que la imagen del fondo quede quieta y hacer la pagina encima de esa imagen, me podes decir en cual tutorial se encuentra esta parte . gracias

a mi no me sale como tal los iconos del menú abre hecho algo mal? Aunque ya revise todo el cogido y esta correcto

Buenas noches podras subir el codigo que no puedo lograr que me funcione, mas que nada la parte de js

Bro tengo un problema, despues de poner el resize, funciona todo bien, excepto cuando de resolucion pequeña la vas haciendo mas grande, y sobre los 869px de ancho se oculta el icono

Amigo una pregunta tu pagina es adaptable si lo bajo en el PhoneGap. o si lo pongo la URL desde el Movil?

amigo este menu lo puedo trabajar en combinación con bootstrap?

Hola , como podria hacer para que la barra tambien se oculte cuando no haya movimiento por ejemplo...por mas de 2 segundos??....con esto me refiero a que aunque se este haciendo scroll hacia arriba, si el usuario se queda en una seccion por mas de 2 segundos se esconda la barra igualmente....saludos !!! y sigue asi !

Hola FalconMasters, muchas gracias por tus tutoriales, son muy buenos, estoy usando muchos de ellos para crear mi página web. Hay una cosa que no me sale del todo bien en este menú. Y es que me he fijado que al cambiarle la resolución a la pantalla del navegador, si me quedo sobre los 702px el menú deja de mostrarse. Sin embargo al usar la herramienta de crtl+shift+M sí se ve bien. ¿Puedes explicarme a que se puede deber ese error? he repasado el código entero varias veces y está igual, de hecho funciona perfectamente con crtl+shift+M cambiando distintas resoluciones. Pero al hacerlo con la propia ventana del navegador me da ese pequeño fallo. A ver si puedo solucionarlo de alguna manera. Y gracias :D

Falcon! podrias hacer un video para hacer un slides full screen ?

amigo falcón realice la adaptación de tu código jquery a un menú que hice para mi pagina y funciona al reves en pantallas menores de 700 px los enlaces los muestra y si presiono el boton bars lo oculta que podra estar pasando.. gracias me suscribo he visto varios de tus videos y son geniales.. gracias espero me puedas ayudar

Muy buen video, no recuerdo ni cuando tenias 1000 subs, vaya el tiempo pasa volando, por que no haces un tutorial sobre un efecto que mientras vas bajando la página empieza a aparecer el cóntenido de los lados o un efecto de opacidad

Una disculpa, no he podido ver el video. Pero me gustaria saber si es posible que el logo quede en la mitad del menu. Es decir si poseo 6 secciones para el menu, que quede entre 3 a la izquirda y 3 a la derecha. ¡Saludos!

Hola Como estas, te cuento una cosa estoy haciendo el sitio seguin me guio en el video estoy haciendo la navegacion de una seccion a otra y cdo paso de una pagina la otra el menu a veces no se depliega lo que es el header ....me podras decir que puede estar pasando? gracias

Hey Carlos sabes el efecto de bajar y que desaparesca el nav y al subir aparesca no funciona , lo probe en mi movil y solo se queda fijo el nav mientras hago scrolling hacia arriba o hacia abajo en mi movil :c esta bien que suceda esto ? Gracias!

esto se puede hacer dentro de wordpress? como se pueden modificar los themas de wordpress, eso seria un buen video para comenzar a meternos en codigo para aquellos que usamos page builders como divy y elementor

Hola carlos tengo una duda (quizá muy tonta pero prefiero preguntarla 😅), que diferencia existe en el media query entre poner max-width y min-width? En una página puse 3 min-width y al ver tu video de la página web responsiva le cambie por max y se me descuadró todo, además observe que tú solo necesitaste 1 max-width y yo tuve que poner 3 min (468px, 767px y 950px). Gracias, y muy buenos videos de gran ayuda y súper bien explicados!

Para hacer esto con css grid o no es recomendable?

Respecto al tema de donde estamos sacando los iconos, no genera errores en ellos al subir la pagina a un servidor?x|

Estoy usando este menú para mi página incluyendo el framework de Bootstrap. Me funciona perfectamente el menú, pero al momento de hacer scroll, el menú me aparece debajo del contendio de mi página. Verifique que solo el contenido dentro de una "col" en bootstrap es cuando aparece el menu por detras... que puedo hacer??

falcon yo hice el thema responsive desing pero no puedo agregarle tienda con wordpress el tema es el que diste como hacer un tema responsive desig y no le puedo agregar tienda y no se como poner mis propios estilos y codigos html a wodprress porfa ayudame gracias

Buen tutorial, como siempre sabes hacerlos, podrías complementarlo con submenus desplegables?

Intenté aplicarlo en Angular pero no me agrega las propiedades del headroom al menú (header). Así que lo busqué en NPM y es muchísimo más sencillo usar Headroom, porque te crea una directiva y esa la usas y listo, fácil y rápido.

Ya era hora Falcon!! Estaba terminando de ver tu curso de Diseño Web Profesional en Udemy, bastante bueno la verdad, estaba pensando en adquirir el de PHP y MySQL para completar el aprendizaje, pero no me puedo decidir si aprender PHP para backend o algún otro lenguaje, tu cual recomiendas? a cual le vez mas futuro? podrías hacer un vídeo recopilando información sobre los diferentes lenguajes usados para hacer paginas web, ya sea para frontend o backend? algo asi como los mas populares y ejemplos de paginas que trabajan con ellos, de antemano gracias y un saludo!.

genial lo que se puede hacer , cuando se pone en movil ese munu se puede poner en footer y se pueda clickear con el dedo gorda de la mano derecha.

Hola. He seguido el tutorial y funciona muy bien, solo que ahora tengo un pequeño problema con el slide de fotos de mi web en prueba: www.riverministry.es/prueba/index.html si entrais a la URL veréis que el slide de fotos cuando se desliza lo hace por encima del menú.... ¿tenéis alguna recomendación sobre cómo podría hacer que mi slide de fotos se muestre por debajo de la barra de menú?

hola, podrias explicar como tener varios estilos en el body, por ejemplo que cada pagina tenga un estilo diferente, saludos !!!!!!!

Porque despues de varios clicks en el menu para cerrar o abrir no se memuestra el icono solo desaparece??