Como hacer un menú de navegación adaptable a dispositivos móviles (Responsive Design)
HTML-код
- Опубликовано: 28 июл 2014
- Aprende como crear un menú de navegación 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...
---
♦ Tutorial escrito, recursos y códigos;
www.falconmasters.com/web-desi...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmasters.com 
Наука
![🔴POSITION en CSS [GUÍA COMPLETA] en ESPAÑOL 🔴 Eduardo Fierro Pro](http://i.ytimg.com/vi/FLet5o2ecE8/mqdefault.jpg)
El vídeo esta muy bien explicado, ademas con ejemplos claros, me resta decir felicidades Man me sirvió de gran ayuda.
Simplemente hermano, eres un genio. En la simplicidad de la explicación está la belleza. Muchas gracias.
Sos un crack, tienes el don de enseñanza, gracias por tus tutos, siempre aprendo algo nuevo.
Nunca te agradecí, pero este video me salvó la vida muchas veces. Gracias totales!
Para todos los interesados para hacer esta navegacion pero con menus desplegables, aquí tienen el tutorial:
www.falconmasters.com/web-design/menu-desplegable-adaptable-dispositivos-moviles/
donde encuentro el fonts.css?
FalconMasters Hola! una pregunta, a la hora de poner los iconos del nav, no me aparecen sale un cuadrado vacio en chrome y en firefox me sale un cuadrado con unos números. Revise por todo lado y no encuentro error y a la hora de comparar con tu codigo todo esta bien.
Ivan Duque Eso me sucedio ayer, supongo que guardaste tu css de iconos (fonts.css) en la propia carpeta de css, por lo tanto tenes que corregir la ruta de busqueda al momento de mandar a llamar los iconos, para eso tenes que abrir el css y en las primeras lineas de codigo con url tendras que anteponer " ../ " para que puedas corregir la ruta.
Kevin Osorio yo el "style.css" lo tengo dentro de la carpeta fonts bueno lo re direccione el css con mi html y bueno luego me fui y modifique el style y me quedo algo asi
________________________
font-family: 'icomoon';
src:url('/icomoon.eot?-4ds6un');
src:url('/icomoon.eot?#iefix-4ds6un') format('embedded-opentype'),
url('/icomoon.ttf?-4ds6un') format('truetype'),
url('/icomoon.woff?-4ds6un') format('woff'),
url('/icomoon.svg?-4ds6un#icomoon') format('svg');
________________________
el problema es que no me funciona cuando lo subo a un hosting y es pagado y ademas lo probe como me dijiste con "../" y nada
No se si estoy seguro, pero al vos decirme que lo pusiste en la misma carpeta entonces no hay necesidad de en la parte del URL poner la /
Te explico, en la dirección si tanto tu style.css esta dentro de la carpeta fonts como el resto de tu css pues no hay necesita de poner la /, eso solo lo usas cuando tenes que acceder a una carpeta que está dentro de la principal.
Estoy divagando pero bueno, cambia tus URL a esto : " src:url('iconmoon.eot?-4ds6un'); y hace lo mismo para el resto.
En tu html tendrás que poner href="fonts/style.css" porque se supone que ese css en especifico que es el que contiene los iconos están dentro de esa carpeta en vez de la carpeta que debería ir, la cual es css
Muy Buen tutorial: Audio bien claro, y explicas muy bien los detalles, das mucho animo y te felicito amigo...Verdaderamente EXCELENTE...
He seguido tu tutorial paso por paso y me ha salido a la primera, muy muy bueno eh, me ha encantado, aunque todos tus tutoriales me parecen de lo mejor de youtube :)
Mis mas sinceras y encarecidas ,me acabas de sacar de un gran lió , explicas muy bien y claro,sigue con el gran gran trabajo de compartir tu conocimiento , saludos y de nuevo gracias .
Excelente tutorial, explicás muy bien. ¡Muchas gracias!
Buenas tardes, muchas gracias por compartir. Explicás genial!!!.
Eres el mejor!!...
En serio que me sirvió bastante tu video, muy bien explicado y funcional al 100%, ya está implementado en mi proyecto para celular y jala muy bien. En serio muchísimas gracias.
Espero y sigan subiendo más videos porque ayudan a personas que estamos iniciando en esto del diseño con CSS
Genio! Saludo enorme desde Argentina. Un verdadero maestro en el modo de enseñar!
Muchas gracias Carlos!! me ha sido de gran ayuda.
Tienes un estilo muy didáctico e instructivo para explicar las cosas.
Amigo muchas gracias por tu tutorial me sirve mucho para darle mejor apariencia a mi proyecto de grado seguiré viendo tus tutoriales.
Excelente video. Muchas muchas felicidades, seguire viendo tus videos... explicación excelente, sin salirse del tema.
Dios te bendiga hermano...! miles de éxitos en tu vida... me sacaste de un apuro con tu vídeo. Gracias.
Hola Carlos, Muchísimas gracias por compartir tus conocimientos. Me ha sido de mucha utilidad. Más Gracias!!!
GRACIAS! justo estaba haciendo un ejercicio de ese tipo menús y no me salía (ponía al revés la variable booleana), ya con tu ejemplo si me quedó perfecto.
Parce, desde Colombia... sos un tezo mijo. He aprendido un resto con tus video.
Excelente tutorial ! Es justamente lo que estaba buscando. Muy sencillo y de diseño delicado. FELICITACIONES
Genial, muchas gracias, me alegra bastante que te haya gustado y servido! :D
Absolutamente genial. Mucho mejor que la mayoria de los tutoriales en ingles.
ustedes son muy buenos en lo que hacen y la manera como explican, muchas gracias....
muchisimas gracias
ningun metodo me funcionaba
pero ahora ya puedo .. muchas gracias y bendiciones
Exelente!. Muy bien explicado, paso a paso. Muchas Gracias. Abrazo y feliz 2020!
Muy buen tutorial,he aprendido con claridad como lo has hecho....
amigo, excelentes tutoriales, la verdad gracias a usted aprendí html5 css, sigo el de bootstrap, pero ojala hicieras javascript, por que explicas muy bien.
un saludo desde Colombia :D
TE FELICITO ES LO QUE BUSCABA ENTENDÍ TODO GRACIAS¡¡
excelente, tus videos siempre tan bien explicados!!! gracias
Muchas gracias. Excelente profesor!!!!
Excelente tutorial, gracias, ya me suscribí para más vídeos.
gracias even I find it hard to understand spanish but thank you so much for your help I really need these things thank you so much you help me a lot
Muchas gracias, señor. Muy bien explicado.
hermano muy bueno tu video, estaba con difucultad y me resolvio todo. Gracias
Excelente explicación, me estás ayudando mucho. Gracias.
Excelente tutorial! Sinceras felicitaciones. Saludos.
Excelente tutorial compañero, te explicas muy bien.
Muuuchíiisimas gracias por esta gran explicación!!!
muchisimas gracias por tu gran aportacion desde SD California
Explicas mejor que mi maestro, muchísimas gracias
una de las mejores paginas que he visitado, enrealidad tienes un buen enfoqur mas directo, sigue así (y)
Chamo, gracias, eres lo máximo, te sigo y estoy haciendo tu curso de php
Carlos felicitaciones, excelente tutorial...
Enhorabuena por el tutorial, muy bien explicado. me ha sido de gran utilidad en mi continuo aprendizaje sobre diseño web. Gracias.
Francesc Morera Gracias a ti por ver mis videos :)
Super Carlos!!! Realmente me ayuda mucho este video, para aprender a hacer menus responsives basicas!
gracias.estoy viendo estos videos antes de adentrarme en el cssgrid.
GENIAL todo perfecto! te ganaste un suscriptor
Gracias por la explicación, muy bien explicado!
excelente tutorial, funcionó todo perfecto mil gracias
felicitaciones maestro, solo decirte que esta muy explicado
amigo muchas gracias por este nuevo tutorial esta super bien explicado
te dejo saludos y gracias
El problema que tienes con el nav, que al bajar se desprende del header, es muy simple de resolver.
Simplemente agregas al responsive especificamente al header la propiedad: position:fixed;
z-index:100;
Entonces quedara fijo el header y al bajar el mismo bajara junto con el nav.
Edito: Yo a la parte en la que Colocas el Menu con la etiqueta a (link) lo cambiaria por una etiqueta p y en la clase btn-menu pondría cursor:pointer;
Asi cuando la persona este navegando y clike el menu no se le vaya para arriba la pagina.
Francisco Amuchastegui Tienes toda la razon, asi es.
FalconMasters
Sos un genio sigo todos tus videos!! porfavor seguí subiendo muchos más. Me ayudaste a construir mi propia web! Tiene algunos errores pero si la sigo trabajando va a quedar perfecta! Si puedo pedirte un tutorial, es que nos enseñes a crear una galería de Videos. O también estaría bueno que nos enseñes como hacer que nuestra imagen de fondo se valla cambiando. O hasta nos podrías enseñar alguito mas de javascript como por ejemplo botones de Me gusta y comentar y ese tipo de cosas. En fin te dejo mi página para que la veas. Genioo!!
curiosoarte.com.ar/index.html
El problema es que si tenes varias imagenes, banners y logos se pueden producir errores como en mi caso. Yo lo que hice fue agregar una funcion al menu js con la propiedad overflow.
Primero en el css crean la clase noscroll{ overflow:hidden; } y en el JS que tienen creado para mostrar/ocultar el nav agregan cuando el contador es igual a 1: $("body").addClass("noscroll"); y cuando el contador es igual a 0 $("body").removeClass("noscroll");... de esta manera cada vez que clickeen en el menu se deshabilitara el scroll e inversamente cuando se oculte.
@@sebastianpelma2939 No te produce errores si declaras o especificas cada cosa como lo que mencionaste
Muy bueno, te doy las gracias por tu dedicación. un saludo
Thanks for these beautiful tips pal, keep it up.
Heyyyyyy!!!!!! Excelente la manera como explicas tus vídeos, como los editas y sobre todo el trabajo tan impecable que realizas! muchísimas gracias por tu aporte, me ha servido de mucho. Sigue así :D
Saludos desde Colombia!
Muchas gracial, uno de los mejores maestros, muchas gracias
Todos tus vídeos son fantasticos, sigue así!!! :) saludos
Muchas gracias! me alegra bastante que te gusten :D
although i could not understand your language, thank you so much for this tutorial !
me alegro mucho de que estés cerca de los 200k suscrip. te lo mereces :)
Excelente video! Muchisimas gracias!
que tala mio, primero quiero darte ls gracias por un excelente tutorial me a servido mucho.
es exactamente lo que buscaba
Buen video, buenos tutoriales, buen canal!! enhorabuena y gracias
Excelente video tutorial! Muchisimas gracias.... si tienes otras informacions sobre web responsive con gusto las vería! Saludos y Gracias!
Gracias estuvo bien explicado. Saludos.
super bno el vídeo me encanto, gracias amigo!
Hola que buen tuto sencillo y muy practico saludos,
Buen video explicas bien amigo, sigan asi!!!
Tremendo tutorial ! Gracias.
Gracias eres genial, me ayudaste muchísimo
Muchas gracias por el tutorial, me gusto mucho
Excelente tutorial... muchas gracias
Muchas gracias, !!! impresionante !!!
Sou brasileiro e não encontrei um vídeo tão bom quanto este no meu idioma. Perfeito entendi e conseguir fazer tudo perfeitamente. Muito obrigado.
Hola,estoy agradecido por el video, el tutorial esta excelente, lo seguí al pie de la letra, solo un pequeño detalle cuando doy un click para ocultar el menú y después agrando la pantalla este no aparece. se puede solucionar?
Me pasa lo mismo. :(
Muchísimas gracias, excelente
hola, quisiera saber como hacer un menu responsive, con un menu desplegale inicialmente, osea que salgan mas items del primer
Waoo brother tienes el don de la enseñanza, suelo ver muchos tutoriales y sino es pork tengo ciertos conocimientos de Html css es q entiendo, pork de lo contrario nada de nada, sin embargo tu explicas y haces ver todo muy sencillo incluso javascript del cual conosco solo lo basico...gracias sigue asi
Muchas gracias por tu comentario, en verdad lo aprecio mucho. Muchas gracias por ver mi contenido :)
FalconMasters one question: tienes en mente lanzar algun tutorial sobre diseño de apps en Android o IOS? o alguna recomendacion de que herramienta de entre las tantas q hay (eclipse, xamartin, phonegap, appinventor, etc) seria la mas ideal o factible para este tipo de diseño? gracias de antemano
Gracias por el aporte Carlos!
Excelente explicacion Gracias!!
Muchisimas gracias me sirvio mucho el video.
Mensaje enviado por: Nuevo Suscriptor
Para los que no saben agregar el .js para el proyecto simplemente agregenlo en etiqueta dentro del html.
$(document).ready(main);
var contador = 1;
function main(){
$('.lineas').click(function(){
//$('nav').toggle();
if(contador==1){
$('nav').animate({
left:'0'
});
contador=0;
} else {
contador=1;
$('nav').animate({
left:'-100%'
});
}
});
$(window).resize(function(){
if(window.innerWidth > 960) {
$("nav").removeAttr("style");
}
});
}
Aqui esta solo para copiar y pegar!!!! No se atracen en este caso en js pero si lo pueden hacer mas adelante excelente!
Gracias!!
@OGAMEOVER
sos un capo
Excelente!!! Muito obrigada!!! :)
Muy pero, muy bueno tu video, la verdad amigo, sinceramente mereces like (y) y suscripciones al pormayor
Excelente! muchas gracias!
Me gusta: muy buena explicación
Muchas gracias. Excelente tutorial.
Chriss123 Gracias
Que excelente, bien explicado.
Excelente tutorial !..mil gracias. me subscribo!
+Luis Brizuela Gracias :)
Vales 1000
Excelente así se explica good!
Me suscribo (Y) acabo de ver 3 videos tuyos, excelente sigue asi!
+Fabian Andres Millan Jaimes Muchas gracias
Gracias, excelente video!
Buen tuto , excelente me ayudo bastante
Excelente vídeo tutorial...
Eres el mejor, un subs mas x)
Grande master, buenísimo el video
como haces para que te funcione luego de subirlo a un hosting
Muchas gracias, buen vídeo, ademas seria bueno vídeos sobre android.
excelente tutorial muy bien explicado
Muchas gracias! Fue de demasiada ayuda! Eres genial!!! Ahora nada más tengo que ver cómo hago para poder incorporar esto a la página que estoy haciendo, y hacer que la barra de menú (que ya tengo) desaparezca y se convierta en esto otro! Si tuevieras algún otro video al respecto te agradecería el link! Saludos y un estrechón de manos desde Costa Rica.
Grax, hace mucho tiempo vi este tutorial y me parecio innecesario, pero ya he hecho tantas cosas, que solo me queda perfeccionar detalles como este
Estimado, hasta la linea 59 del css iba todo bien hasta que, cuando achico el menu, no me aparece ningún menú... solo queda la "info de relleno (lorem)" Estoy haciéndolo en DW y no se que pasa. Saludos!