Muy entendible y en tan poco tiempo, desde como vas construyendo la maquetación de forma practica y fácil de entender hasta como vas mostrando los resultados de cada función del css paso a paso para ver como funcionan 😃
Una ayuda para los que quiera hacer el fondo a parte y que no sea todo el body, van a encontrar que el padre osea el contenedor baja junto a la barra de navegacion, le agregan un overflow como lo siguiente y se arregla (Al padre se lo agregan) .img-container { width: 100%; height: 100vh; background-image: url(img/img.jpg); background-size: cover; overflow: auto; }
Brother, me encanto el video, preciso y corto. Pero me hubiera gustado que narraraz el por que de cada codigo. Mas que nada, yo me estoy iniciando en la programacion y no se muy bien el por que de cada codigo. Pero igual, excelente el video.
2 роки тому+1
Gracias Alex por el comentario. Esta en planes cuando se den las condiciones explicar!! Saludos
la pregunta del millon es: en mi version web mi barra tiene 4 items INICIO , NOSOTROS, SERVICIOS, CONTACTO , son anchors y cuando clickeo en cada uno me lleva a una parte distinta de la pagina, pero mi hover dentro del apartado SERVICIOS me despliega opciones , el tema es que cuando estoy desde la version movil para desplegar esa lista tengo que presionar la palabra SERVICIOS lo cual me lleva a otro lado , me explico? como hacer para que se despliegue pero no me lleve a otra parte de la pagina o.o
Execelente vídeo, me funcionó, solo que tengo un problema. Hice todo exactamente como lo muestra el vídeo paso paso pero al final no se por que en los menús desplegables al pasar el cursor por encima de ellos no se se ponen todos de color negro como en el vídeo osea si se pone el color de fondo negro al pasar el cursor sobre ellos pero hay una pequeña parte qué no se logra poner por completa en negro, alguna solución?
Рік тому
Hola Ricardo, pudiste solucionar el problema?? si no mandame el proyecto a martyn.1501.2013@gmail.com para verlo.
hola amigo, el problema es el padding del .menu-vertical , yo pude solucionarlo con un padding:0; , te recomiendo que siempre que tengas ese tipo de problemas inspecciona tus elementos y agrega un border para observar mejor el box model y darte cuenta mas fácil.
@ a buenisimo! si le hagregè ese y height, empecè a aprender hace re poquito, estoy tratando de hacer uno por dìa, gracias por responder, me gusto mucho el video!!
2 роки тому+1
@@est3bannn buenísimo Esteban, cualquier cosa estamos para ayudar! Saludos
Hola como puedo hacer que al tocar una opcion del menu despegable, esta me diriga a una parte de la pagina... Digamos al tocar Html me lleve a la seccion Html, quiero hacerlo con un producto
6 місяців тому
Hola Daniel, simplmente pone en el hrfef la a la página donde quieres ir. No se si esta era tu duda. Saludos.
Hola. Como seria si quiero hacer que desaparezca el menu al hacer click en una de las opciones?
2 роки тому
Hola Pedro. Para ocultar el menú principal una opción sería usar javascript. De todas formas, al hacer clic en cualquiera de los links, te llevaría a otra página donde el menú no lo pones si no lo necesitas. Si especificas mejor cual es la idea de ocultar te podría ayudar mas detalladamente. Saludos
bro tengo un problema que las litas que se dropean para abajo, tienen una parte que no se pinta, quedan unos pixeles de las etiquetas sin pintar y queda feo
2 роки тому
Hola, mandame el código por aca, el html y el css. O por drive
Hola que tal, que pasa si quiero que el background color ocupe todo el ancho de la pantalla?, como lo solucionarias tu, con esta forma me ha imposibilitado hacerlo, puedes enseñarlo porfavor. Gracias de antemano.
2 роки тому
Hola, para que el background del nav ocupe todo el ancho de la pantalla tendrías que poner el nav dentro de un header, dando el mismo color de fondo que el nav, y haces que ocupe el 100% de ancho. Lo otro queda igual.
Bro una sujerencia aplicale al .menu-horizontal li:focus-within .menu-vertical { display: block; } para que la lista se mantenga y se muestre solo al darle click 👍👍 Gracias por tu contenido exelente
Hola, buen video, te quería hacer una consulta, seguí el tutorial paso a paso, pero la lista-vertical me queda alineada hacia la derecha y poniendo en "menu-vertical li:hover { text align: left } (mas lo que pusiste en el tutorial), no me lo corrige, sabes por que puede llegar a suceder esto? Desde ya muchisimas gracias !
2 роки тому
Hola, mandame el código por drive a martyn.1501.2013@gmail.com así puedo ayudarte mejor...
¿por que cuando cargo la url de una imgen en el css, no me aparece si la dirección esta puesta bien sin errores
3 роки тому
Hola! Mandame, fijate si la imagen esta en la carpeta correspondiente y esta bien escrito el nombre de la imagen. Cualquier cosa mandame el código a martyn.1501.2013@gmail.com
Buen día, si por Ej tengo una caterogia producto y de ahí se despliega un sub menú, por Ej remera. Como puedo hacer para que al clickear me lleve a la lista de remeras? No se si me explico 😂
Holaa, espero puedas ayudarme. Cómo podría hacerle para que al darle click a un tema y estar en esa página, ese recuadro mantenga el color? Por ejemplo, si estoy en la parte de Inicio que ese recuadro esté de color y si paso a cursos que ahora sea ese. Por favor:(
Рік тому
Hola Fernanda, una forma de lograr eso es asignar una clase al al elemento que queres que este destacado. En cada página agregas la clase al li correspondiente. Y mediante css le das el estilo que queres. Cual cosa avisame. Saludos.
@ gracias! pero no me sale:( estoy confundida en dónde debo poner el código de la clase, en el archivo de estilos y después en el archivo que lleva la información del tema? O sólo va en el archivo del tema? Es que ya logré cambiar el color del bloque del tema, pero me lo aplica parejo en todas las páginas aunque lo ponga en la página del tema específico, o no sé si lo estoy poniendo mal:(
Muy buen vídeo, he conseguido mi objetivo, pero ¿que habría que poner y donde para hacer que el menú vertical se despliegue con una transicion?
Рік тому+1
Hola Victor, en el caso que quieras usar algun efecto al aparecer, en vez de ocultarlo con display:block, tenes que darle opacidad 0, y al mostrarlo cambiar su opacidad a 1. Ademas debes poner transition: 1s en la clase que donde pusiste opacity:0. Espero te sirva. Saludos.
Muy entendible y en tan poco tiempo, desde como vas construyendo la maquetación de forma practica y fácil de entender hasta como vas mostrando los resultados de cada función del css paso a paso para ver como funcionan 😃
Gracias por el comentario.
Dios te daría un abrazo ahora mismo, me sacaste de un lio, gracias por la ayuda de verdad
Que bueno que te sirvió!! Saludos
Muy buenaa! Este tipo de videos cortos y rapidos hacian falta
Saludos!!
Llevaba 2 horas preguntandome porque no funcionaba y era por una letra en el nombre del css. :) PURO CARNEIRO!!!!
Hola Miguel!!! Suele pasar jaja!! Saludos!!
Una ayuda para los que quiera hacer el fondo a parte y que no sea todo el body, van a encontrar que el padre osea el contenedor baja junto a la barra de navegacion, le agregan un overflow como lo siguiente y se arregla (Al padre se lo agregan)
.img-container {
width: 100%;
height: 100vh;
background-image: url(img/img.jpg);
background-size: cover;
overflow: auto;
}
De los videos que observe no me funciono nada y me encontré con este video y excelente me funciono muchas gracias
Buenisimo!!! Saludos!!
Brother, me encanto el video, preciso y corto. Pero me hubiera gustado que narraraz el por que de cada codigo. Mas que nada, yo me estoy iniciando en la programacion y no se muy bien el por que de cada codigo. Pero igual, excelente el video.
Gracias Alex por el comentario. Esta en planes cuando se den las condiciones explicar!! Saludos
De lo mejor, sencillo y práctico...
Gracias, saludos
simplemente muchas gracias, eres un crack! tus videos me han ayudado a practicar bastanteee!
Hola Micaela, gracias por comentar!! Qué bueno que los videos te han servido. Te encargo compartir el canal!! Saludos!!
Nuevo sus!! a practicar estos videos cortitos son lo mas!!!! graciass
Excelente! Sencillo y preciso
Excelente "tutorial" amigo, como tal no me funciono para la nav bar que ya tenia jajaja, Pero me dio una muy buena idea de como hacerla, gracias
gracias no sabia hacer un menu desplegable muy buen video
De nada!
Hola, como hago para que los submenús se desplieguen hacia arriba en vez de hacia abajo?
MUCHAS GRACIAS ME EAYUDASTE CON UN PROYECTO
Genial!! Que bueno que te sirvió. Saludos!!
Buen video, sencillo, rápido y funcional, bastante infravalorado la verdad que tenga más de 30 k de vistas y menos de 1 k de likes
Hola Elías, muchas gracias por el comentario y apoyo!! Te encargo compartir el canal. Saludos!!
y para que funcione un boton, fue me muchisima ayuda por favor responder
Hola, gracias por comentar!! Tu duda es cómo hacer para que funcione cualquier de los enlaces del menú??
la pregunta del millon es: en mi version web mi barra tiene 4 items INICIO , NOSOTROS, SERVICIOS, CONTACTO , son anchors y cuando clickeo en cada uno me lleva a una parte distinta de la pagina, pero mi hover dentro del apartado SERVICIOS me despliega opciones , el tema es que cuando estoy desde la version movil para desplegar esa lista tengo que presionar la palabra SERVICIOS lo cual me lleva a otro lado , me explico? como hacer para que se despliegue pero no me lleve a otra parte de la pagina o.o
Papi coloquese un 10 y vaya tómese un gaseosa a nombre mío.
Jaja Gracias Andres por comentar!
Saludos.
Excelente pero no entiendo la primera parte @import url (.......) que se está llamando ahì
Hola Andres, ahí estoy importando la fuente (la tipografía) de google fonts.
Execelente vídeo, me funcionó, solo que tengo un problema. Hice todo exactamente como lo muestra el vídeo paso paso pero al final no se por que en los menús desplegables al pasar el cursor por encima de ellos no se se ponen todos de color negro como en el vídeo osea si se pone el color de fondo negro al pasar el cursor sobre ellos pero hay una pequeña parte qué no se logra poner por completa en negro, alguna solución?
Hola Ricardo, pudiste solucionar el problema?? si no mandame el proyecto a martyn.1501.2013@gmail.com para verlo.
hola amigo, el problema es el padding del .menu-vertical , yo pude solucionarlo con un padding:0; , te recomiendo que siempre que tengas ese tipo de problemas inspecciona tus elementos y agrega un border para observar mejor el box model y darte cuenta mas fácil.
Una pregunta por q no me da styles solo me da una parte no me da todo
hola! como hago para cambiar el tamaño de la foto del fondo? me queda muy grande y con background-size no la puedo achicar
Hola Esteban, para que quede bien la foto que uses tiene que ser rectangular, además agregarle background-position: Center Center;
@ a buenisimo! si le hagregè ese y height, empecè a aprender hace re poquito, estoy tratando de hacer uno por dìa, gracias por responder, me gusto mucho el video!!
@@est3bannn buenísimo Esteban, cualquier cosa estamos para ayudar! Saludos
Hola, una pregunta; ¿en tu CSS, de dónde sacaste el link del @import url que está entre los paréntesis?
Hola!! De la página de google fonts!!
Hola como puedo hacer que al tocar una opcion del menu despegable, esta me diriga a una parte de la pagina... Digamos al tocar Html me lleve a la seccion Html, quiero hacerlo con un producto
Hola Daniel, simplmente pone en el hrfef la a la página donde quieres ir. No se si esta era tu duda. Saludos.
Gracias!!!!! Muy sencillo y útil:)
Hola, qué bueno que te sirvió el video! Saudos!!
Hola. Como seria si quiero hacer que desaparezca el menu al hacer click en una de las opciones?
Hola Pedro. Para ocultar el menú principal una opción sería usar javascript. De todas formas, al hacer clic en cualquiera de los links, te llevaría a otra página donde el menú no lo pones si no lo necesitas. Si especificas mejor cual es la idea de ocultar te podría ayudar mas detalladamente. Saludos
muchas gracias bro por este video me ayudo mucho
Hola Daniel, que bueno que te sirvió! Gracias por comentar. Saludos!!
bro tengo un problema que las litas que se dropean para abajo, tienen una parte que no se pinta, quedan unos pixeles de las etiquetas sin pintar y queda feo
Hola, mandame el código por aca, el html y el css. O por drive
@ Hola yo tengo el mismo problema, lo pudieron resolver?
@@cristian92nqn Hola Cristian, si podes mandarme el código mejor, así te puedo ayudar. puede ser por drive o por github.
@ dale me pasas tu mail asi te lo mando?
@@cristian92nqn martyn.1501.2013@gmail.com
Hola que tal, que pasa si quiero que el background color ocupe todo el ancho de la pantalla?, como lo solucionarias tu, con esta forma me ha imposibilitado hacerlo, puedes enseñarlo porfavor. Gracias de antemano.
Hola, para que el background del nav ocupe todo el ancho de la pantalla tendrías que poner el nav dentro de un header, dando el mismo color de fondo que el nav, y haces que ocupe el 100% de ancho. Lo otro queda igual.
@ gracias me fue muy util tu ayuda, me funciono perfecto
@@ARMAPRO Buenisimo! Saludos.
Disculpa como puedo hacer para que admita 4 categorías, solo admite 3 si no se desordena
Hola, debería funcionar con la cantidad de categorias que quieras, que raro que se desordene.
Bro una sujerencia aplicale al .menu-horizontal li:focus-within .menu-vertical {
display: block;
}
para que la lista se mantenga y se muestre solo al darle click 👍👍
Gracias por tu contenido exelente
Donde se pone?
Hola, buen video, te quería hacer una consulta, seguí el tutorial paso a paso, pero la lista-vertical me queda alineada hacia la derecha y poniendo en "menu-vertical li:hover { text align: left } (mas lo que pusiste en el tutorial), no me lo corrige, sabes por que puede llegar a suceder esto? Desde ya muchisimas gracias !
Hola, mandame el código por drive a martyn.1501.2013@gmail.com así puedo ayudarte mejor...
@ Ahora te lo mando, muchas gracias.
@@pilarmolnar888 Ok, avisame cuando lo hayas mandado.
@ Ahí lo envié.
@@pilarmolnar888 No me ha llegado nada todavía...
¿por que cuando cargo la url de una imgen en el css, no me aparece si la dirección esta puesta bien sin errores
Hola! Mandame, fijate si la imagen esta en la carpeta correspondiente y esta bien escrito el nombre de la imagen. Cualquier cosa mandame el código a martyn.1501.2013@gmail.com
Gracias ! podes pasarlo a responsive?
Hola, agendado!!
Hola, buenas noches
Como haces para cuando tocas una opcion que se despliega, te lleve a algun campo?
Tenes que colocar el enlace dentro de la etiqueta , donde dice href=" " dentro de las comillas va el enlace
@@musicayefemerides Okey perfecto, muchas gracias!!
Corto el video pero muy eficaz!!
Gracias por el comentario! Saludos!
Hola, me encantó el video, pero me surgió un problema, la primera ventana con submenu me aparece, pero la segunda no, a que se debe?
Hola, ,mandame por acá el codigo html y css
CSS
@import url('fonts.googleapis.com/css2?family=Nunito:wght@400;800&display=swap');
*{
box-sizing: border-box;
margin: 0%;
padding: 0%;
font-family: 'Nunito', sans-serif;
font-size: 25px;
text-decoration: none;
}
header{
width: 100%;
position: fixed;
top: 0;
left: 0;
background-image: url(../assets/img/background.jpg);
}
/*B A R R A - D E - N A V E G A C I O N*/
nav{
max-width: 900px;
margin: auto;
background-image: url(../assets/img/backgroundinterior.jpg);
font-size:20px;
margin-top:50px;
}
.menu_horizontal{
list-style: none;
display: flex;
justify-content: space-around;
}
.menu_horizontal > li > a{
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
.menu_horizontal > li:hover{
background-image: url(../assets/img/backgroundhover.jpg);
}
.menu_vertical{
position: absolute;
display: none;
list-style: none;
width: 200px;
background-color: rgba(0, 0, 0, .5);
}
.menu_horizontal li:hover .menu_vertical{
display:block;
}
.menu_vertical li:hover{
background-image: url(../assets/img/backgroundhover.jpg);
}
.menu_vertical li a{
display: block;
color: black;
padding: 15px 15px 15px 20px;
text-decoration: none;
}
@ Me refiero que cuando quiero ir al navegador, para el segundo "ul" no me aparece los desplegables
@@vvhoisp.v pasame el html tambien
@ ahi están ambas, html y css, en comentarios separados
Buen día, si por Ej tengo una caterogia producto y de ahí se despliega un sub menú, por Ej remera. Como puedo hacer para que al clickear me lleve a la lista de remeras? No se si me explico 😂
pone en la parte de las comillas "remes.html" osea creas otra pagina html y listo xd
Remeras
bro lo tieness en resposive?
Holaa, espero puedas ayudarme. Cómo podría hacerle para que al darle click a un tema y estar en esa página, ese recuadro mantenga el color? Por ejemplo, si estoy en la parte de Inicio que ese recuadro esté de color y si paso a cursos que ahora sea ese. Por favor:(
Hola Fernanda, una forma de lograr eso es asignar una clase al al elemento que queres que este destacado. En cada página agregas la clase al li correspondiente. Y mediante css le das el estilo que queres. Cual cosa avisame. Saludos.
@ gracias! pero no me sale:( estoy confundida en dónde debo poner el código de la clase, en el archivo de estilos y después en el archivo que lleva la información del tema? O sólo va en el archivo del tema? Es que ya logré cambiar el color del bloque del tema, pero me lo aplica parejo en todas las páginas aunque lo ponga en la página del tema específico, o no sé si lo estoy poniendo mal:(
@ Disculpa la molestia, es que es un proyecto integrador que vale para dos materias y estoy desesperada jajaj
Hola bro, trate de adaptar mi código a la explicación y creo que está bien pero no me funciona, no me despliega la lista🙃
Hola Joel mándame un drive a martyn.1501.2013@gmail.com para ver el código.
@ ya encontré mi error bro pero muchas gracias por contestar
@@joelmedina7244 buenísimo. Saludos.
Que hiciste para hacer el segundo paso? : donde ya el menu estaba hecho y aparecio en otro lugar
Hola Milka, decime en que minuto exacto del video así te explico bien!!
Gracias amigaso un 10/10
Hola Manuel, muchas gracias por comentar!! Saludos.
Por qué no pones los códigos en los comentarios o en la descripción del vídeo bro
Hola Luis, en la descripción esta el link para descargar el código. Saludos
sos un genio
Hola Tomás!! Gracias por comentar, pero no es para tanto jaja!! Saludos!!
Muy bueno me sirvio mucho
Buenisimo!! Saludos.
como lo hago para submenus por favor y muy bueno tu video bro
Hola, pudiste agregar los submenus?
que programa ocupas
Hola, Sublime Text! Saludos
buen video bro
Gracias por comentar! Saludos!!
sos un pedazo de capo
Bro tengo una duda
Muy bueno👍
Muchas gracias Sérgio por comentar. Saludos!!
Muy buen vídeo, he conseguido mi objetivo, pero ¿que habría que poner y donde para hacer que el menú vertical se despliegue con una transicion?
Hola Victor, en el caso que quieras usar algun efecto al aparecer, en vez de ocultarlo con display:block, tenes que darle opacidad 0, y al mostrarlo cambiar su opacidad a 1. Ademas debes poner transition: 1s en la clase que donde pusiste opacity:0. Espero te sirva. Saludos.
si me gusto
Buenísimo!! Saludos!!
Gracias crack
De nada! Saludos!!
I just love u dude
Nesecito ayuda
Gracias gg
gracias bro un like
Saludos!!
hubiera sido util un github en la descripcion
Ya esta en la descripción el link a github. Saludos!!
no me carga la imagen
Hola Benjamín pudiste solucionar el problema??
@ si muchas gracias
gracias ;:)
Saludos!!
No se me despliega el menu u.u
Hola, pudiste solucionar tu problema??
Gracias
Háblame si me puedes ayudar
Oye
En que te puedo ayudar?
@ el último código del minuto 4:36 no me funciona ¿puedes pasarme tu correo para mandarte una foto para que veas?
martyn.1501.2013@gmail.com