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 😃
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
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; }
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
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.
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
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 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
3 месяца назад
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
@ 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
¿por que cuando cargo la url de una imgen en el css, no me aparece si la dirección esta puesta bien sin errores
2 года назад
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
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.
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...
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.
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!!
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!!
Nuevo sus!! a practicar estos videos cortitos son lo mas!!!! graciass
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
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!!
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!!
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
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
gracias no sabia hacer un menu desplegable muy buen video
De nada!
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!!
Papi coloquese un 10 y vaya tómese un gaseosa a nombre mío.
Jaja Gracias Andres por comentar!
Saludos.
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.
MUCHAS GRACIAS ME EAYUDASTE CON UN PROYECTO
Genial!! Que bueno que te sirvió. Saludos!!
Corto el video pero muy eficaz!!
Gracias por el comentario! Saludos!
Gracias!!!!! Muy sencillo y útil:)
Hola, qué bueno que te sirvió el video! Saudos!!
muchas gracias bro por este video me ayudo mucho
Hola Daniel, que bueno que te sirvió! Gracias por comentar. Saludos!!
si me gusto
Buenísimo!! Saludos!!
Gracias amigaso un 10/10
Hola Manuel, muchas gracias por comentar!! Saludos.
Muy bueno me sirvio mucho
Buenisimo!! Saludos.
Una pregunta por q no me da styles solo me da una parte no me da todo
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
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
Muy bueno👍
Muchas gracias Sérgio por comentar. Saludos!!
Gracias crack
De nada! Saludos!!
sos un genio
Hola Tomás!! Gracias por comentar, pero no es para tanto jaja!! 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.
gracias bro un like
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
Hola Daniel, simplmente pone en el hrfef la a la página donde quieres ir. No se si esta era tu duda. 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.
Gracias
I just love u dude
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
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
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
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ú??
¿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
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.
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, 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...
gracias ;:)
Saludos!!
Gracias ! podes pasarlo a responsive?
Hola, agendado!!
buen video bro
Gracias por comentar! Saludos!!
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.
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
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 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
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
Bro tengo una duda
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!!
sos un pedazo de capo
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!!
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.
hubiera sido util un github en la descripcion
Ya esta en la descripción el link a github. Saludos!!
Nesecito ayuda
no me carga la imagen
Hola Benjamín pudiste solucionar el problema??
@ si muchas gracias
No se me despliega el menu u.u
Hola, pudiste solucionar tu problema??
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