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.
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.
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/
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
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 .
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
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
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
$(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
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.
conoces mucho del tema pero podrias explicar un poco mas pausadamente en la parte del atajo en el cual se copian automaticamente los 5 porfavor, es que no se que teclas presionaste y cuando yo lo hago no me sale gracias!!
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 :)
De hecho incluso para acelerar tu Javascript en vez de cargarlo en el Head, te acelera cargarlo antes de asi: function load() { var scriptElement = document.createElement('script'); scriptElement.src = 'tujavascript.js'; document.getElementsByTagName('head') [0].appendChild(scriptElement); } window.onload = load; Esto lo vi en una Conferencia de un Tipo que Trabajo para Google y Yahoo, lo probe y los resultados fueron impresionantes, porque la página incluso la más compleja carga en segundos, ni se nota que le falta el Javascript hasta que este carga. Saludos Pablo
A todos los que quieran solucionar el problema del 30:30 yo sé cómo, sólo tienes que ponerle al header un position: fixed y listo, pero el header nav quedará mal acomodado así que le tienen que poner un margin-top yo se lo puse de 61px y quedó bien pero cambié mucho las medidas que salen en el video, así que pues ya nadamás es cosa que ustedes le busquen la medida que mejor les acomode, por cierto también el contenido quedará mal acomodado, no lo he solucionado pero supongo que también con un margin-top al section se puede solucionar
Hola FalconMasters, primero que nada, *¡gracias por el video!*, lo explicas todo de una manera excelente. Por otro lado, me gustaría *compartir un código más optimo* basado en el que enseñaste y en los comentarios que he leído aquí mismo, ya que el del video tiene pequeños defectos: 1. Al estar en modo responsive, si abres el menú, lo cierras y luego cambias la anchura de la página a una mayor a 800px (la definida en el media query) *el menú que ya no es responsive no aparece.* 2. Considero que si es un problema el hecho de poder bajar el contenido de la pantalla mientras estás en modo responsive y que la solución más adecuada es *bloquear el scroll.* *Código mejorado:* $(document).ready(main); var contador = 1; function main(){ $('.menu_bar').click(function(){ if(contador == 1){ contador = 0; $('nav').animate({left: '0'}); $('body').addClass('noscroll'); } else{ contador = 1; $('nav').animate({left: '-100%'}); $('body').removeClass('noscroll'); } }); $(window).resize(function(){ contador = 1; if(window.innerWidth > 800) { $('nav').removeAttr('style'); $('body').removeClass('noscroll'); } }); } La clase *'noscroll'* evita que el usuario pueda desplazarse en la página mientras el menú responsive está activo. _Esta clase va en la hoja de estilos de la página en cuestión o en tu hoja de estilos global._ .noscroll{ overflow: hidden; } Y la función *$(window).resize(function(){...});* soluciona el primer problema expuesto en este comentario. Este código no tiene que ser modificado si seguiste todos los pasos del video y *fue logrado gracias a FalconMasters y a Sebastian Pelma y Miguel Santillan* que comentaron este video dejando prácticamente la solución a ambos problemas. Espero que les sea de ayuda y si tienen alguna duda siéntanse libres de preguntar.
Fran lh hola! Sólo ese es el problema? Si es así, entonces asegúrate de que ".noscroll" esté en todas las hojas de estilo (.css) de tu sitio web si es que no tienes una hoja de estilos global que sea aplicada a todas las páginas
Hola, en primera gracias por el tuto, esta muy bien. Pregunta ¿como puedo meter una pagina en el la tiqueta ? para que cuando de click en cualquiera de los de mi menu me muestra la pagina.
Hola nuevamente, solo decir que con tus videos tan way, lo conseguí al final. Ahora me estoy peleando para conseguir que funcione el menú recursivo y el menú pegado a la vez. Gracias.
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.
nice tutorial, i have not understood ur language bcoz iam from india, but i understand way of showing........thankyou its very useful for me..............great tutorial
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?
Hola, buen día, todo salio muy bien, solo tengo una duda, en el caso del menu yo lo coloque cargado al lado derecho de la pantalla , pero lo que me pasa es que yo quiero quitar el sobrante del nav, es decir en el ejemplo depues de Contactos a la derecha tiene un sobrante, yo quiero que solo llegue el color de fondo hasta donde termina la palabra "Contacto" Ejemplo minuto 14:20 (me refiero al sobrante de la derecha), gracias y saludos
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
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!
Hola muchas gracias por el video aunque tenga ya sus años me sirvió mucho y lo entendí a la perfección, recién estoy empezando a programar y me quedo la duda de como hacer para cuando presionas sobre el link del menú este se cierre y te lleve al destino, ya sea en la misma pagina o en una diferente.
Agradecería que me dijeras cómo ocultar el nav en el screen de 800, osea: que no se muestre siempre que cargo la pagina. Un saludo y muchas gracias carnal por tan buen tuto, me ha servido mucho!! Un saludo y sigue así, eres un crack!!
al hacer click en una de las opciones el menu no se oculta eso se soluciona con este pedaso de codigo en js $('nav ul').click(function(){ if(contador == 0){ $('nav').animate({ left: '-100%' }) } }) para los que quieran que al hacer click en una de las opciones de su nav el menu desaparesca ami me funcina bien ya que la explicacion del video fue muy buena que hasta yo que recien estoy iniciando en html lo pude entender
Muchas gracias me funciona al 100% tengo una cosulta claro si ves este comentario , como puedo hacer para poner un limite , que no se haga mas pequeño el menu gracias bye saludos
Excelente el tutorial y por fin uno en castellano y bien explicado. Tengo una sola pregunta: Que agregar en jQuery para que la barra de menu lateral desaparezca de forma automática, tan pronto como llegas a la página de destino? Así come está pues queda estatico y hay que apretar el botón para que desaparezca? de antemano gracias!
Excelente ejemplo Carlos. Nada mas engo una duda...porque no usaste la clase "icon-list2" en lugar de la clase "menu_bar" para el evento click en el js?. Ya que segun yo el Icono con rayitas es precisamente usado como control de menu.Saludos
Me quedé hasta el minuto 17:08, cuando lo jalo hacia la izquierda se me desaparece el menú (botones), llevo dos horas viendo en que puedo fallar pero nada. Ayuda :(
Muchas gracias, excelente turorial, muy bien explicado. Espero me pueda ayudar con una duda, solo pude ejecutar la pagina correctamente en Internet Explorer, pero en Chrome y Mozilla al presionar el botón de Menu no pasa nada, a que se deberá??
esta genial el video tutorial me sirvio mucho , gracias amigo falcon, ahora una consulta, como lo podria hacer en forma de acordion cuando esta en la pantalla completa , es decir q el menu no salga en forma vertical si no en acordion. gracias
Excelente como lo explicas quedan los conceptos muy claros, que pena mi atrevimiento pero me gustaría saber como podría amarrar el menú desplegable a la parte de arriba cuando se desplega el texto. muchas gracias.
Amigo, en principio quiero agradecerte por compartir tanto buena info!!! posteriormente quería ver si es factible que me puedas brindar una mano. Agregue el menú tal cuál, anda muy bien, pero me encuentro con el inconveniente de que cuando lo achico y detrás tengo unos controles, algunos se ven y se mezcla todo con el menú, sabes si hay una propiedad que lo lleve al frente si o si al menú??? agradecería mucho una manito más! saludos.!
Hola, muchas gracias por tu aportación, lo único que no entiendo es lo de tener iportada la librería jquery ¿me podrías explicar en qué consiste por favor? muchas gracias de antemano.
Muy buena la explicación, pero quisiera preguntarte por qué dices ( en la sección correspondiente de tu página web) que no recomiendas su uso y que mejor sería un simple menú flexible? Gracias.
Hola amigo.... Tengo una duda y a la vez problema.... Eh cumplido todos los pasos pero cuando pulso en el menú en modo móvil no se oculta, copié tu function y la eh guardado pero no se que debo hacer con el code.jquery.com/jquery-latest.js, probé poniendo el link como tu haces y no me sirve, guardé el archivo "como" jquery-latest.js en la carpeta raíz y ni así me funciona, entonces no se que hacer... ¿Me ayudas?
excelente tutorial me fue muy útil, solamente tengo una duda, ya todo me salio como quería pero lo que necesito es que al momento de hacer clic en cualquier opción del menú desplegable se vuelva a cerrar el menú,espero me puedas ayudar gracias
Hola maestro. muchas gracias. En la version 400px, me quedaba el menu por detrás del contenido de mi body. Le agregué: z-index: 1; al header en @media screen.
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
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
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 .
Genio! Saludo enorme desde Argentina. Un verdadero maestro en el modo de enseñar!
Simplemente hermano, eres un genio. En la simplicidad de la explicación está la belleza. Muchas gracias.
ustedes son muy buenos en lo que hacen y la manera como explican, muchas gracias....
Parce, desde Colombia... sos un tezo mijo. He aprendido un resto con tus video.
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
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
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
muchisimas gracias
ningun metodo me funcionaba
pero ahora ya puedo .. muchas gracias y bendiciones
gracias.estoy viendo estos videos antes de adentrarme en el cssgrid.
Absolutamente genial. Mucho mejor que la mayoria de los tutoriales en ingles.
Sos un crack, tienes el don de enseñanza, gracias por tus tutos, siempre aprendo algo nuevo.
hola, quisiera saber como hacer un menu responsive, con un menu desplegale inicialmente, osea que salgan mas items del primer
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.
Dios te bendiga hermano...! miles de éxitos en tu vida... me sacaste de un apuro con tu vídeo. Gracias.
Amigo muchas gracias por tu tutorial me sirve mucho para darle mejor apariencia a mi proyecto de grado seguiré viendo tus tutoriales.
conoces mucho del tema pero podrias explicar un poco mas pausadamente en la parte del atajo en el cual se copian automaticamente los 5 porfavor, es que no se que teclas presionaste y cuando yo lo hago no me sale gracias!!
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 :)
Muchisimas gracias me sirvio mucho el video.
Mensaje enviado por: Nuevo Suscriptor
Me hubiese gustado que la barra de menú también se desplazara, pero la verdad quedo bueno, ahora solo falta implementarlo, gracias por el video.
Ricky chavez Gracias a ti :)
De hecho incluso para acelerar tu Javascript en vez de cargarlo en el Head, te acelera cargarlo antes de asi:
function load() {
var scriptElement = document.createElement('script');
scriptElement.src = 'tujavascript.js';
document.getElementsByTagName('head')
[0].appendChild(scriptElement);
}
window.onload = load;
Esto lo vi en una Conferencia de un Tipo que Trabajo para Google y Yahoo, lo probe y los resultados fueron impresionantes, porque la página incluso la más compleja carga en segundos, ni se nota que le falta el Javascript hasta que este carga.
Saludos
Pablo
Muy buen tutorial,he aprendido con claridad como lo has hecho....
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
El vídeo esta muy bien explicado, ademas con ejemplos claros, me resta decir felicidades Man me sirvió de gran ayuda.
A todos los que quieran solucionar el problema del 30:30 yo sé cómo, sólo tienes que ponerle al header un position: fixed y listo, pero el header nav quedará mal acomodado así que le tienen que poner un margin-top yo se lo puse de 61px y quedó bien pero cambié mucho las medidas que salen en el video, así que pues ya nadamás es cosa que ustedes le busquen la medida que mejor les acomode, por cierto también el contenido quedará mal acomodado, no lo he solucionado pero supongo que también con un margin-top al section se puede solucionar
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.
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
Super Carlos!!! Realmente me ayuda mucho este video, para aprender a hacer menus responsives basicas!
Hola FalconMasters, primero que nada, *¡gracias por el video!*, lo explicas todo de una manera excelente. Por otro lado, me gustaría *compartir un código más optimo* basado en el que enseñaste y en los comentarios que he leído aquí mismo, ya que el del video tiene pequeños defectos:
1. Al estar en modo responsive, si abres el menú, lo cierras y luego cambias la anchura de la página a una mayor a 800px (la definida en el media query) *el menú que ya no es responsive no aparece.*
2. Considero que si es un problema el hecho de poder bajar el contenido de la pantalla mientras estás en modo responsive y que la solución más adecuada es *bloquear el scroll.*
*Código mejorado:*
$(document).ready(main);
var contador = 1;
function main(){
$('.menu_bar').click(function(){
if(contador == 1){
contador = 0;
$('nav').animate({left: '0'});
$('body').addClass('noscroll');
}
else{
contador = 1;
$('nav').animate({left: '-100%'});
$('body').removeClass('noscroll');
}
});
$(window).resize(function(){
contador = 1;
if(window.innerWidth > 800) {
$('nav').removeAttr('style');
$('body').removeClass('noscroll');
}
});
}
La clase *'noscroll'* evita que el usuario pueda desplazarse en la página mientras el menú responsive está activo.
_Esta clase va en la hoja de estilos de la página en cuestión o en tu hoja de estilos global._
.noscroll{
overflow: hidden;
}
Y la función *$(window).resize(function(){...});* soluciona el primer problema expuesto en este comentario.
Este código no tiene que ser modificado si seguiste todos los pasos del video y *fue logrado gracias a FalconMasters y a Sebastian Pelma y Miguel Santillan* que comentaron este video dejando prácticamente la solución a ambos problemas. Espero que les sea de ayuda y si tienen alguna duda siéntanse libres de preguntar.
Hola puse tu código pero aún puedo seguir haciendo scroll... no entiendo!
Fran lh hola! Sólo ese es el problema? Si es así, entonces asegúrate de que ".noscroll" esté en todas las hojas de estilo (.css) de tu sitio web si es que no tienes una hoja de estilos global que sea aplicada a todas las páginas
Tengo una sola hoja de estilos pero no añadí ninguna clase llamada "noscroll". Aclaro que no tengo ningún conocimiento de JS.
Ok, ese es el problema. En tu hoja de estilos agrega la siguiente clase:
.noscroll{
overflow: hidden;
}
Con eso ya debería funcionar :)
GRACIAS!!!! Recién leo esa parte de tu comentario xD no me había dado cuenta
felicitaciones maestro, solo decirte que esta muy explicado
Excelente explicación, me estás ayudando mucho. Gracias.
Muchas gracias Carlos!! me ha sido de gran ayuda.
Tienes un estilo muy didáctico e instructivo para explicar las cosas.
Muchas gracias, señor. Muy bien explicado.
Muuuchíiisimas gracias por esta gran explicación!!!
Hola, en primera gracias por el tuto, esta muy bien. Pregunta ¿como puedo meter una pagina en el la tiqueta ? para que cuando de click en cualquiera de los de mi menu me muestra la pagina.
Hola nuevamente, solo decir que con tus videos tan way, lo conseguí al final. Ahora me estoy peleando para conseguir que funcione el menú recursivo y el menú pegado a la vez. Gracias.
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.
nice tutorial, i have not understood ur language bcoz iam from india, but i understand way of showing........thankyou its very useful for me..............great tutorial
Thank you, to take your time to see my tutorial, im glad you understood the video even when you are from india.
una de las mejores paginas que he visitado, enrealidad tienes un buen enfoqur mas directo, sigue así (y)
Explicas mejor que mi maestro, muchísimas gracias
Excelente video. Muchas muchas felicidades, seguire viendo tus videos... explicación excelente, sin salirse del tema.
Uno como estos me gustaria a mi preparar para wordpress, pero es imposible encontrar un ejemplo tan bien explicado como este.
Muy Buen tutorial: Audio bien claro, y explicas muy bien los detalles, das mucho animo y te felicito amigo...Verdaderamente EXCELENTE...
Ya lo solucione, agregue las posiciones: position: relative;
z-index: 1; muchas gracias! Saludos.
martin aquino Genial, me alegra que lo hayas solucionado :D
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. :(
Hola que buen tuto sencillo y muy practico saludos,
yo le tenia miedo a java pero yo programo en visual basic asi que vi que es sencillo....
Gracias
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
Hola, buen día, todo salio muy bien, solo tengo una duda, en el caso del menu yo lo coloque cargado al lado derecho de la pantalla , pero lo que me pasa es que yo quiero quitar el sobrante del nav, es decir en el ejemplo depues de Contactos a la derecha tiene un sobrante, yo quiero que solo llegue el color de fondo hasta donde termina la palabra "Contacto" Ejemplo minuto 14:20 (me refiero al sobrante de la derecha), gracias y saludos
Muy pero, muy bueno tu video, la verdad amigo, sinceramente mereces like (y) y suscripciones al pormayor
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 :)
Chamo, gracias, eres lo máximo, te sigo y estoy haciendo tu curso de php
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
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!
hermano muy bueno tu video, estaba con difucultad y me resolvio todo. Gracias
muchisimas gracias por tu gran aportacion desde SD California
Hola muchas gracias por el video aunque tenga ya sus años me sirvió mucho y lo entendí a la perfección, recién estoy empezando a programar y me quedo la duda de como hacer para cuando presionas sobre el link del menú este se cierre y te lleve al destino, ya sea en la misma pagina o en una diferente.
Hola Carlos, Muchísimas gracias por compartir tus conocimientos. Me ha sido de mucha utilidad. Más Gracias!!!
TE FELICITO ES LO QUE BUSCABA ENTENDÍ TODO GRACIAS¡¡
Muchas gracias. Excelente tutorial.
Chriss123 Gracias
Muchas gracias por el tutorial, me gusto mucho
Exelente!. Muy bien explicado, paso a paso. Muchas Gracias. Abrazo y feliz 2020!
Muchas gracial, uno de los mejores maestros, muchas gracias
Agradecería que me dijeras cómo ocultar el nav en el screen de 800, osea: que no se muestre siempre que cargo la pagina. Un saludo y muchas gracias carnal por tan buen tuto, me ha servido mucho!! Un saludo y sigue así, eres un crack!!
ahora con la tecnologia de flexbox o grid se puede hacer de otra manera, o recomiendas hacerlo de la misma manera.
Gracias, aprendo mas con tus tutoriales que en la escuela :V
+Alejandro Bringas Martinez mal lo llevas...
Buenas tardes, muchas gracias por compartir. Explicás genial!!!.
al hacer click en una de las opciones el menu no se oculta
eso se soluciona con este pedaso de codigo en js
$('nav ul').click(function(){
if(contador == 0){
$('nav').animate({
left: '-100%'
})
}
})
para los que quieran que al hacer click en una de las opciones de su nav el menu desaparesca
ami me funcina bien
ya que la explicacion del video fue muy buena que hasta yo que recien estoy iniciando en html lo pude entender
amigo muchas gracias por este nuevo tutorial esta super bien explicado
te dejo saludos y gracias
Muy bueno, te doy las gracias por tu dedicación. un saludo
Muchas gracias me funciona al 100% tengo una cosulta claro si ves este comentario , como puedo hacer para poner un limite , que no se haga mas pequeño el menu gracias bye saludos
Excelente el tutorial y por fin uno en castellano y bien explicado. Tengo una sola pregunta: Que agregar en jQuery para que la barra de menu lateral desaparezca de forma automática, tan pronto como llegas a la página de destino? Así come está pues queda estatico y hay que apretar el botón para que desaparezca? de antemano gracias!
+Sebastian Angelo-Perez justo lo mismo que me pasa a mi, me pregunto si ya lo has solucionado?
Excelente tutorial... muchas gracias
Excelente ejemplo Carlos. Nada mas engo una duda...porque no usaste la clase "icon-list2" en lugar de la clase "menu_bar" para el evento click en el js?. Ya que segun yo el Icono con rayitas es precisamente usado como control de menu.Saludos
Me quedé hasta el minuto 17:08, cuando lo jalo hacia la izquierda se me desaparece el menú (botones), llevo dos horas viendo en que puedo fallar pero nada. Ayuda :(
Me pasa lo mismo, tengo que actualizar la pagina para que vuelva a aparecer, pero esa no es la manera correcta de que funcione. AYUDA POR FAVOR
@@movie2cnhm lo solucionaron??
Que tal!, muy interezante!!!. felicidades. solo una pregunta. Habra alguna forma de jalar el menu arrastrando con el dedo???
Muchas gracias, excelente turorial, muy bien explicado.
Espero me pueda ayudar con una duda, solo pude ejecutar la pagina correctamente en Internet Explorer, pero en Chrome y Mozilla al presionar el botón de Menu no pasa nada, a que se deberá??
Jair Castañeda Sánchez Que extraño, debería casi ser al revés IE es el que da mas problemas siempre.
Jair Castañeda Sánchez a mi me pasa lo mismo, en firefox ejecuta normal pero no abre el menú al darle click, lo resolviste?
Tengo el mismo problema, alguna solución por favor
Excelente video tutorial! Muchisimas gracias.... si tienes otras informacions sobre web responsive con gusto las vería! Saludos y Gracias!
Gracias por el aporte Carlos!
Muy entretenido y te quedo excelente también hiciste uno sobre pie de paginas y con conbobox
Excelente tutorial, gracias, ya me suscribí para más vídeos.
esta genial el video tutorial me sirvio mucho , gracias amigo falcon, ahora una consulta, como lo podria hacer en forma de acordion cuando esta en la pantalla completa , es decir q el menu no salga en forma vertical si no en acordion. gracias
GENIAL todo perfecto! te ganaste un suscriptor
Excelente como lo explicas quedan los conceptos muy claros, que pena mi atrevimiento pero me gustaría saber como podría amarrar el menú desplegable a la parte de arriba cuando se desplega el texto. muchas gracias.
Amigo, en principio quiero agradecerte por compartir tanto buena info!!! posteriormente quería ver si es factible que me puedas brindar una mano. Agregue el menú tal cuál, anda muy bien, pero me encuentro con el inconveniente de que cuando lo achico y detrás tengo unos controles, algunos se ven y se mezcla todo con el menú, sabes si hay una propiedad que lo lleve al frente si o si al menú??? agradecería mucho una manito más! saludos.!
me alegro mucho de que estés cerca de los 200k suscrip. te lo mereces :)
although i could not understand your language, thank you so much for this tutorial !
Excelente tutorial compañero, te explicas muy bien.
Hola, muchas gracias por tu aportación, lo único que no entiendo es lo de tener iportada la librería jquery ¿me podrías explicar en qué consiste por favor? muchas gracias de antemano.
Muy buena la explicación, pero quisiera preguntarte por qué dices ( en la sección correspondiente de tu página web) que no recomiendas su uso y que mejor sería un simple menú flexible? Gracias.
excelente, tus videos siempre tan bien explicados!!! gracias
+FalconMasters disculpa este mismo menú lo puedes hacer con Bootstrap? Qué muestre igual los mismos iconos?
Hola amigo.... Tengo una duda y a la vez problema.... Eh cumplido todos los pasos pero cuando pulso en el menú en modo móvil no se oculta, copié tu function y la eh guardado pero no se que debo hacer con el code.jquery.com/jquery-latest.js, probé poniendo el link como tu haces y no me sirve, guardé el archivo "como" jquery-latest.js en la carpeta raíz y ni así me funciona, entonces no se que hacer... ¿Me ayudas?
excelente tutorial me fue muy útil, solamente tengo una duda, ya todo me salio como quería pero lo que necesito es que al momento de hacer clic en cualquier opción del menú desplegable se vuelva a cerrar el menú,espero me puedas ayudar gracias
Todos tus vídeos son fantasticos, sigue así!!! :) saludos
Muchas gracias! me alegra bastante que te gusten :D
Hola maestro. muchas gracias. En la version 400px, me quedaba el menu por detrás del contenido de mi body. Le agregué: z-index: 1; al header en @media screen.
Carlos felicitaciones, excelente tutorial...