Como hacer un header dinamico con HTML, CSS y Javascript
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- En este tutorial aprenderás como hacer un header dinámico que cambia de tamaño y posición dependiendo de la barra de navegación vertical.
🚀 Blog de diseño web:
www.falconmast...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
♦ Tutorial escrito, recursos y códigos;
www.falconmaste...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmaste...
♦ Curso patrocinado por okhosting:
www.okhosting.com
¿Te complacería saber que una simple estudiante de administración (que no sabia NADA de css, ni js); por simple hobby quiso diseñar una página web y lo está logrando gracias a tus excelentes vídeos? De verdad que tengo mucho que agradecerte, explicas DEMASIADO bien. Sigue así. porque de tantos vídeos que he visto, ya me quedo con los tuyos, me encantan.
Ta bn 👍 ahora q sos?
@@dibujos_comics🤔 Diseñadora Gráfico. 😁
@@josyarcuri y como te va? De que te ha servido el desarrollo web? Te va bien? O lo abandonaste?
@@josyarcuri otra cosa y ya, ya terminé los cursos de HTML y CSS, que me recomiendas seguir?
Eres muy bueno, yo incluso cada vez que inicio un proyecto tengo que ver este vídeo para poder hacerlo, visité este vídeo más de 8 veces
A veces no se ni como agradecerte todo lo que aprendo de ti, siento que con solo decir gracias no es suficiente.
Una vez más felicidades por tu trabajo, acabo de utilizar esto en el proyecto de un cliente.
Genial! seguro que quedo increible :D
Buena FalconMasters. Una pregunta ¿Porque le agregaste esa direccion URL al momento de hacer el Jquery?. ¿Y para que sirve?. Excelente video. Muchas gracias por la ayuda y sigue realizando mas video con este tipo de calidad en cuanto a contenido y explicacion. Saludo desde Ecuador.
Mil gracias, eres el primer tutorial en todo mis investigaciones de programación que se expresa de manera clara y con ejemplo fácil de entender.
Loco capaz es muy tarde porque el video es muy viejo. Pero TE FELICITO! Sos un ídolo.
Muchas Gracias.
Para nada, aquí sigo :)
Muchas gracias, me alegra que te haya servido
Carlos, aprovecho tu amable respuesta para consultarte.
Como pongo un buscador debajo del header dinamico haciendo que me quede fijo. O sea, que al bajar la pantalla siga estatico el buscador.
Muchas gracias.
Position: fixed, le pones al div y se quedara fijo a pantalla.
que onda cuate de verda gracias sos un genio, yo te estoy siguendo desde html y Css contigo aprendí, y con eso tambien enseño a mis alumnos nunca me había atrvido a comentar pero pilas!! usted, saludos desde República Dominicana
Me encantó... muchas gracias por la ayuda!!! gente como vos, que comparte conocimientos y ayuda, me alientan a seguir! gracias man!
saludos... quien ha tenido el problema que en chrome y en opera no baja el scroll y se vuelve loco el cambio de tamaño del header... agradecido de ante mano con sus respuestas.
Excelente Broth. Saludos desde Santo Domingo.
geniaaaaaaal este tutorial estoy creando una pagina web para un trabajo en mi ciclo y esto me ha ayudado en TODO!! muchas gracias
El mejor diseñador sin duda!
Me encantan tus vídeos, llevo la carrera técnica de programación y siendo sincero me encanta realizar aplicaciones web.
Espectacular, por fin alguien que sabe explicar. Enhorabuena y gracias :)
Hola Falcon. Gracias por el tutorial. Salió todo a la perfección. El único problema que tengo es que utilice una imagen en vez de una fuente para el logo y aunque en .header2 .logo le cambie el tamaño este no se cambia y se corta la imagen cuando bajo el mouse. Alguna solución… porfa
Me encanta, lo hice y esta genial el caso es que tengo que hacer en un submenu y que se haga responsivo pero en un solo boton espero me ayudes gracias
Gracias de nuevo mi querido FalconMasters te felicito.Solo quiero que para el próximo vídeo Nos enseñes a crear un buscador para nuestra web, que no se vaya a google si no que busque hay mismo como el que tienes tu en tu pagina Gracias
Julio Velasco Para eso necesitas saber de PHP y tener una base de datos en la cual buscar, quizá mas adelante pueda hacer un curso de php.
Gracias
buen video bro ¡¡¡ me has ayudado mucho desde solo saber html básico, hasta ya tener un sitio web bien estructurado con menus con estilos, muchas gracias por tu aporte
Creo que nadie se fijo en el error de este video, pero la cosa es que donde Falcon puso los números 1 y 2 en los párrafos se olvido de corregir eso después de quitarle el margin-top al contenido, cuando el baja el scroll los parrafos 1 y 2 desaparecen al instante si se fijan bien salen detras del header.
Y por tal motivo me gustaria que expliquen como podria solucionarse eso, ya que si pongo el margin-top me funciona en el header1 pero en el header2 me sale una parte oculta
Hola carlos! Excelente ayuda y muchas gracias. Tengo una duda, ojala puedas ayudarme. En mis elementos debajo del menu como puedo hacer para no tener que poner un espacio arriba que es el que ocupa el menu??? Tengo que dejarles a todos un padding pero sus contenedores quedan muy grandes.
nuevo sub demasiada explicacion muy facil entender
Entiendo mas contigo que con mi profesora mil gracias enserio 💓
Hola Falcón Máster muy buenos tus vídeos, excelentes te agradeceríamos que por favor nos digas que más opciones tenemos por ejemplo algo sencillo como poner en negrita un título decirnos que más opciones tenemos no todas pero si las más útiles y más usadas algo así.
Le vas a dar un efecto a algo y rápidamente decir si no quieren este tienen estas opciones.
interesante todo al pie de la letra, pero mi pregunta radica en el minuto 20:53 cuando enlazas la librería Jquery. Nos puedes ampliar esa parte
excelente video, una pregunta, intento bajar solo un poquito y baja de golpe mucho, algun consejo para ayudarme, hize todo como lo dice el video pero cuando bajo un poquito se baja mucho de momento
Muy buen tutorial, pero alguine me podria decir el nombre de es fuente?
es muy clean-
Gracias mi amigo no te imaginas como me a ayudado tu video
gracias por los vídeos no me canso de verlos e aprendido muchos de ti
exelente tutorial la verdad me gusto falcom te recomendaria que des cursos de paginas web material desing !! eso seria genial utlizando las herramientas de google
+Kevin Milan Lo tomare en cuenta, si que estaría muy bien
Tio eres el mejor, puedo decir que del 90% de tus tutos los he logrado hacer todos. El otro 10 por ciento sera por errores mios XD
el problema es que si el titulo del div del logo es mas largo se va a correr el espacio entre el menu y el logo, almenos de que subas una imagen con el logo en una letra un poco pequeña para que no se corra el espacio o que escribas un texto corto en el titulo
Muchas gracias bro, me haz ayudado y enseñado mucho, hasta me suscribi ;)
Muchas gracias me has ayudado mucho
Como se le puede incluir a un menú desplegable a este proyecto?
Hola, que tal , oye no puedo aplicar el header2 de la clase, la visualizacion es reducida del header y no se muestra los botonos solo el logo , osea el header2 no se esta aplicando, si podrias decirme cual es mi error.... de antemano gracias. camarada
Amigo, una consulta como puedo hacer para cuando se haga click en alguna categoría del menu no te suba automáticamente arriba de la pagina? gracias
hola que buen video, muy bien esplicado y util.. una pregunta que editor de texto o heramienta utilizar en el video o cual seria la mejor opcion
buenas estoy haciendo este header pero usando tambien bootstrap ..lo que me sucede es que cuando a mi contenido articulo le agrego col-xs-12 o las otras clases y bajo la pantalla con el scroll se superpone mi contenido con mi header...no se por que es eso debe ser por las clases pero no se como arreglarlo
Hola una consulta y como hago para cambiar el contenido dependiendo de la eleccion que selecciono en el menu??
eres el mejor, me sirvio mucho
hola.. esto me ayudo bastante. Pero esto también se puede implementar en Pentaho CDE dashboard?? como seria o en que cambia
Simplemente Carlos Arturo es la VIGA!
disculpa el codigo de jquery de donde lo sacaria o como soy nuevo en esto de la programacion, saludos
Hola, buenos días, disculpa no sé si me puedas resolver una duda, te lo agradecería mucho... Lo que pasa es que al momento de ponerle position: fixed a mi barra de navegación se descompone toda perdiendo todo el estilo q le dí, el logo se queda arriba y los menús se van para abajo del logo y quiero saber por qué..
perdona falcon porque al añadir un slide pierdo la funcionalidad del header dianamico ?
Sale diferente si trabajo desde el editor de códigos dreamweaver?
Hola una pregunta como puedo hacer para mientras vaya bajando el contenido que va quedando arriba se vaya difuminando hasta que se desaparesca gracias
son exelentes tus tutos :)! pero una cosa, cuando veo tu codigo en el blog es diferente y me confunde un poco, fuera de eso eres el mejor
Muy bueno el tutorial muchas gracias hermano saludos desde Venezuela..
me encantan tus tutoriales falcon un saludo.
alert("Realmente si eres un Master, gracias por tus tutoriales");
me ayudan mucho .
Si
Es posible agregar una transition cuando se cambia de clase para una mejor experiencia de usuario? Me ayudaria mucho una respuesta. Gracias por el tutorial.
Gracias FalconMaster, aprendi muchisimo!
Amigo después que yo haga mi header dinámico como aria para colocarlo en las otras paginas como la de contactos la de productos gracias.
Muy bien explicado, Gracias
@FalconMasters Una pregunta urgente... ¿Y si no uso mouse osea el scroll? Cual seria el código js para que funcione con el método tradicional de bajar con la barra lateral???
Oye, me gusto mucho el tutorial, eres muy bueno explicando =) Gracias por compartir, me sirvio de mucho para resolver mis dudas de como utilizar 2 estilos diferentes en el mismo header =D
al momento de colocar los estilos, lo hago normal pero no me funcionan que podria ser? tampoco me aparece el asterisco d ecolor naranja y debo escribir la palabra completa, por ejemplo: background
Buenisimo, pense que ibas a usar un plugin de jquery, que " hace cierta cosa cuando se hace scroll hasta cierto objeto .." no me acuerdo bien como se llama creo que era el waypoint .. Muy bueno como siempre.. Saludos y gracias por el video :P !
La verdad no conocía ese plugin, pero se ve bueno, muchas gracias :D
Lo vi en "Plugins de jquery" de Video2Brain.. tira varios plugins muy interesantes..
Falcon en el minuto 18:23 cuando te muestra el navegador el tamano de la ventana como realizo eso amigo porfavor ayudame
Men! Tu si sabes explicar!
Que programa usaste para emular los moviles?
Falcon una consulta... Cuando bajas con el scroll el texto 1 desaparece de golpe. Podrias mostrar como poner un delay para que no pase eso.
Hola hago lo mismo que haces para ponerle lo de los 500 ms pero lo estoy haciendo en sass y me da error nose como colocarlo . Porque al transformarse en código css creo que se pone incorrectamente :s necesito ayuda por favor.
tengo un problema porque cuando paso por arriba de mi menu se marca el texto con color azul pero las letras estan de color blanco y cuando pasa el mouse la letra se hace azul gracias
Hola FalconMaster!!
Disculpa estuve realizando el código como lo hace en el tutorial, pero tengo el problema de que cuando quiero subir la hoja del index solamente se hace un parpadeo pero no baja, ya revise el código y según esta igual, no se si se me haya pasado algo, podrías decirme el posible error que tuve para corregirlo por favor!! Apenas estoy empezando.
Noté igualmente que cuando se hace @media screen and (max-width: 950px) entonces si me funciona correctamente y no me muestra este problema que te menciono (pero cuando la pagina es mayor a 950px) y no me deja hacer el scroll.
Y de verdad muchas gracias, realizas Tutoriales muy agradables y que lo haces ver fáciles de implementar, así como la explicación que das deja en claro cual es el propósito o función de cada linea. Gracias
Saludo FalconMasters, necesito de tu ayuda, si yo quisiera poner un header dinámico como este, y también un slider en la misma pagina como lo aria? osea los 2 son position:absolute, como aria para que el slider pase por debajo del header, por favor contéstame......
falcon me sirvió el tutorial, me sale todo el header bien lo único es que no me deja bajar la pagina (en google chrome, en cambio en firefox si me deja), cuando intento bajar se me regresa a arriba de la pagina. me podrias ayudar?? Gracias
Me funcionó a la perfección. Muy bien explicado. Gracias!!!
EXCELENTE TUTORIAL..
GRACIAS POR COMPARTIR TUS CONOCIMIENTOS.
Gabriel Gonzalez Gracias a ti por ver el video
hola muy bueno pero cuando minimizo la ventana el header nav a baja y hace que el header se haga grande gracias.
hola esta muy bueno el tutoria,l pero cuando invoco la clase header2 en el index mediante el comando , no me permite visualizar los menús cuando reduzco la ventana de tamaño; qué puede estar pasando? (estoy trabajando con sublime text 3, chrome)
Muy buenos videos me funciono al 100%, pero tengo una pregunta como le puedo hacer para agregar un logo como imagen y al bajar el scroll también disminuya tu tamaño
tengo una imágen como logo y no se centra al ponerlo, se queda alineado a la izquierda en dispositivos móviles, y el texto en el centro, en la versión de escritorio se ve bien
¿alguien me ayuda?
Muy buen tuto!.
Hace rato que vengo siguiendo tus videos y me parecen geniales!
Exitos y que sigas así...un saludo!
Genial, muchas gracias
Hola! me ha funcionado bien, gracias!!
Solo tengo una duda se puede poner desplegable?
seria de ayuda v:
Excelente video. Tengo una duda, como puedo marcar la seccion en la que me encuentro con el header dinamico? Ej: Que si voy a la seccion de Proyectos, me marque que estoy en Proyectos en el header y asi sucesivamente. Logro anclar la seccion de la pagina pero no se como colocar activa la seccion en donde me encuentre.
Gracias.
Muy bien explicado Falcon!
Hola, como le hago si los botones tienen menú desplegable con listas?
ayuda!!! al hacer scroll mi header no está pegado a la parte de arriba, sino que, baja como 40px. como lo arreglo(tengo lo mismo que sale en el video)
como p uedo poner un fondo en la parte blanca donde esta el texto?
Amigos alguien me conteste si puede claro, porque cuando hago el :
.header2 nav {
line.height:100px;
me funciona en el sentido de que el header se mueve mientras bajo la pagina eso esta correcto pero esque se me descentra el logo y el nav y eso que revise si puse el float y estan correctos el de logo lo tengo en la derecha y el de nav a la izquierda pero al poner la fincion del header2 nav con line.height:100px; se me descentra todo, porque puede ser?? gracias de antemanos a todos los que me ayuden !!
Lo solucionaste?? me pasa lo mismo
x3
Excelente vídeo muy bien explicado ;) te Felicito he aprendido muchas cosas en tu canal!
Muchas Gracias :D
muito show sua aula, adorei, me ajudou bastante, muito obrigado e continue fazendo esse maravilhoso trabalho que você tem feito. ;)
ñ
buenas noches una favor como haria con un menu desplegable,le cuento q no me resulta,de antemano gracias por la ayuda
y es posible colocar una imagen que funcione como un boton, justo arriba del header?
brother muy buen tutorial , pero solo una pregunta como hago para que al momento de hacer el scroll el cambio del menu no sea tan brusco, es decir que halla cierta transicion de antemano muchas gracias desde colombia
Una pregunta... bueno tengo un problema... el cuan es cuando realizo todo esto resulta bien... pero el problema es cuando quiero bajar la pagina , baja y retorna arriba automaticamente... no me deja bajar en la pagina por que es este problema?...
tengo una consulta como haria utilizando el notepad++ para hacerle al texto para que me salga porfa ayuda
q tal carlos oiep omo le puedo hacer para agregar una fuente nueva ya sea q yo la descargue como le hago para anexarla ami proyecto o por ejemplo aplicarla en mi header
excelente tutorial, consulta, como podríamos hacer que al general el cambio no sea brusca el dinamismo, puede ser con jquery eso?, saludos y gracias por tus tutoriales.
Buenas tardes me gustaría saber al colocar un mega-menu dentro de un header estático tal cual aparece en el videos cual es la función que se debe dar al estilo para que se despliegue sin ocultarse
gracias.
Hola, buen video. Quisiera saber si en vez de colocar el logo como texto, pongo una imagen, como la podría centrar verticalmente? Porque line-height no me funciona, supongo que porque es una imagen. Saludos.
Falcon necesito ayuda por favor los párrafos se centran al juntar el wrapper con el contenedor pero solo me muestra una sola línea cortada de los varios párrafos necesito ayuda por favor :'c
Gracias por todo, pero tengo un problema si tengo un slideshow cuando realizo el desplazamiento el header queda por debajo de las imagenes del slideshow, como puedo solucionarlo? gracias
en mi seccion tengo una imagen de background con filtro blur, cuando bajo la imagen cubre el header dinamico ...alguien sabe como arreglarlo ?
Hola una pregunta urgente .. esos se puede hacer igualito como lo hiciste solo lo de el logo y el inicio y el fondo en adobe Dreamweaver CS6????
una pregunta de donde se descargan las librerias de jquery :P
Hola falcon buenas tardes, quisiera saber como hago submenus, ya lo intente pero el ecabezado se agranda, ayudame???
Si hago el header un poco transparente como hago para que lo que va subiendo no se vea debajo del header pasando, es que se me superpone por qué a el header le puse position: fixed
top: 0;
Que hago ayuda plox
o mejor dicho que navegador usas?