excelente video bro, yo justo estaba creando una web para mis herramientas de trabajo y le di en la tecla literalmente con el contenido que estaba buscando para hacer la web justa responsive asi que te super agradezco, además estoy profundizando temas aprendidos de css y html y esto es muy importante, asi que nuevamente muchas gracias por este video
Gracias a vos por tu comentario. Si bien a veces hay frameworks como bootstrap que solo necesitas copiar y pegar, aprender a hacerlo a mano es importante también ya que te puede servir para crear tu propia biblioteca de componentes algún día.
Amigo deja puesto el css, uno para verificar desp tiene que estar moviendo el video para poder entenderlo, así se complica más. La vista final de la versión escritorio no me quedó como a ti y no sé donde está el error por que no veo la hoja final de css. Ayudaría bastante eso.
drive.google.com/drive/folders/110E3xwE66Fo_vNTsxhPI5of-LveKaCtO?usp=sharing Aquí lo subí al código, lo dejo en la descripción también al link. Saludos! :)
gracias por el video, muy bueno. Yo chequeo el responsive porque es algo que siempre se tiene en cuenta, he encontrado que si achicas la pantalla despliegas el menu, y luego vuelvas a agrandar la pantalla, y quieres nuevamente achicarla, se mantiene desplegado el menu. Si a alguien le sirve corregir eso con un minimo JS , aqui les paso el codigo. saludos. genial el video. document.addEventListener('DOMContentLoaded', () => { const menuCheckbox = document.getElementById('menu_hamburguesa'); window.addEventListener('resize', () => { if (window.innerWidth >= 768) { menuCheckbox.checked = false; } }); });
.menu_hamburguesa:checked + .ul_links { width: 100%; } .ul_links { width: 0; background-color: var(--color_primario_suave); position: absolute; top: var(--altura_header); right: 0; overflow: hidden; height: calc(100vh - var(--altura_header)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3rem; transition: all .3s; } De esta manera también podes hacerlo, le ponés right 0 o left en 0 dependiendo desde donde queres que se despliegue, ancho de 0 inicial y la altura total como se vé ahí en el código que te pasé. Luego en .menu_hamburguesa:checked + .ul_links simplemente le devolves el ancho del 100%. Es una solución que podés probar. Saludos.
Cierto, es un problema porque para hacerlo solo con CSS debería ser así el maquetado. Otra posible solución es poner el todo en un contenedor, de modo que no se agregue un contenedor extra y el flexbox pueda funcionar normalmente.
Ahí te respondí. En cuanto a estilos está bien, pero ví que agregaste varias etiquetas nav cuando no hacía falta, si te fijas en el video todo esta englobado en un solo nav, y dentro del nav fíjate el orden de los elementos que es muy importante para que te funcione el selector de hermano adyacente con el signo +, que al dar click a ese elemento el hermano adyacente siguiente va a cambiar sus estilos.
@@JohanPerez-wl2ut jajaja si suele pasar, una sola letra y el selector se desmadra xD Me alegra que lo hayas podido solucionar. Aquí por el canal hay varios tutoriales también donde maquetamos componentes, te puede venir de 10 si querés practicar flexbox o grid.
Muy bueno el video amigo , estoy aprendiendo css y tengo que hacer una web para un amigo y me sirvio un monton gracias , saludos desde Argentina
Que bueno Bro!
Me alegra muchísimo que te haya servido 😊
Muy buen video, estuve todo el dia rompiendome la cabeza para ver como hacer este tipo de menus, 10/10 bro !
Subí un video recientemente sobre como hacerlo con JavaScript también. Te servirá para practicar un poquito de DOM JavaScript.
Me gusto mucho la explicación, logré realizar todo y salió excelente, muchas gracias por la ayuda.
Felicidades por lograrlo. 🤗🙌🏼💪🏼
A partir de ahora ya sabes un poquito más para crear componentes con html y css por tu cuenta. 🤗
excelente video bro, yo justo estaba creando una web para mis herramientas de trabajo y le di en la tecla literalmente con el contenido que estaba buscando para hacer la web justa responsive asi que te super agradezco, además estoy profundizando temas aprendidos de css y html y esto es muy importante, asi que nuevamente muchas gracias por este video
Gracias a vos por tu comentario. Si bien a veces hay frameworks como bootstrap que solo necesitas copiar y pegar, aprender a hacerlo a mano es importante también ya que te puede servir para crear tu propia biblioteca de componentes algún día.
la explicacion muy clara y consistente , muchas gracias
Que bueno que te sirvió Rodrigo, hay más videos así en el canal por si te interesa practicar más HTML y CSS
Saludos, gracias por el apoyo ✋🏼💻😊
GraCias Roco muy bueno simple y bien explicado!!!
Muchas gracias Lu! Éxitos 💪🏼😎
Excelente me ayudó mucho ando practicando
Muy buena, seguí con la práctica. 🙌🏼🤙🏼💪🏼
Muchas gracias por el video bro, buena explicacion 👍
De nada Alex, me alegra que te haya sido de utilidad para practicar un poquito 🤗💻💪🏼
muy bueno compa
Gracias hermano. Dentro de dos horas se publica un video nuevo donde te enseño a hacerlo con JavaScript y con buenas prácticas. 😁🙌🏼
un aplauso para este gran hombre
Muchas gracias! 😊👏🏼💻
Muchas gracias! me sirvió mucho!
Gracias a vos!
Me alegra mucho que te haya servido 🙌🏼💻💪🏼
Amigo deja puesto el css, uno para verificar desp tiene que estar moviendo el video para poder entenderlo, así se complica más. La vista final de la versión escritorio no me quedó como a ti y no sé donde está el error por que no veo la hoja final de css. Ayudaría bastante eso.
drive.google.com/drive/folders/110E3xwE66Fo_vNTsxhPI5of-LveKaCtO?usp=sharing
Aquí lo subí al código, lo dejo en la descripción también al link. Saludos! :)
gracias por el video, muy bueno. Yo chequeo el responsive porque es algo que siempre se tiene en cuenta, he encontrado que si achicas la pantalla despliegas el menu, y luego vuelvas a agrandar la pantalla, y quieres nuevamente achicarla, se mantiene desplegado el menu. Si a alguien le sirve corregir eso con un minimo JS , aqui les paso el codigo. saludos. genial el video.
document.addEventListener('DOMContentLoaded', () => {
const menuCheckbox = document.getElementById('menu_hamburguesa');
window.addEventListener('resize', () => {
if (window.innerWidth >= 768) {
menuCheckbox.checked = false;
}
});
});
Muy bueno!
Gracias 🙌🏼👋🏼
infinita gratitud
Gracias a vos 💪🏼👋🏼
Muy bueno, gracias!!
Gracias a vos. Subiré seguido prácticas así. 🤗
Muchas gracias me sirvio batante n.n
De nada, saludos! 🙌🏼👋🏼
Excelente! una pregunta: como sería la modificación para que un item tenga varios subitem y solo se vean al hacer click?
ua-cam.com/video/JmmkG2ccAa8/v-deo.html
En ese video hacemos ese elemento con HTML y CSS. Te va a servir. 😁🙌🏼
buenas! como puedo hacer para que la transición del menú sea desde alguno de los lados en vez de arriba hacia abajo?
.menu_hamburguesa:checked + .ul_links {
width: 100%;
}
.ul_links {
width: 0;
background-color: var(--color_primario_suave);
position: absolute;
top: var(--altura_header);
right: 0;
overflow: hidden;
height: calc(100vh - var(--altura_header));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3rem;
transition: all .3s;
}
De esta manera también podes hacerlo, le ponés right 0 o left en 0 dependiendo desde donde queres que se despliegue, ancho de 0 inicial y la altura total como se vé ahí en el código que te pasé. Luego en .menu_hamburguesa:checked + .ul_links simplemente le devolves el ancho del 100%.
Es una solución que podés probar. Saludos.
@@rocodev23 genial muchas gracias!! 🫂
Puede ser que ya no funcione el que pusiste en github?? Lo digo porque si lo copias tal cual aparece sin estilo
Fijate si estás en la rama main, cambia a la otra rama, en la otra rama está el código.
@@rocodev23 voy a probar. Graciass ;)
@@thenexxcover2649 De nada rey 🙌
Es porque en el estilos no los tiene puestos están las variables de los estilos pero no están puestos están vacios
El problema sigue siendo el mismo, al incorporar un logo como foto, cambia y ya no funciona igual.
Cierto, es un problema porque para hacerlo solo con CSS debería ser así el maquetado. Otra posible solución es poner el todo en un contenedor, de modo que no se agregue un contenedor extra y el flexbox pueda funcionar normalmente.
pero esos menu para páginas reales puede generar problemas
Porque
También quisiera saber porqué. jeje
No genera problema , nada que ver , todo lo contrario es mejor son lindos y se adaptan a cualquier tamaño de pantalla
hola nos compartis el codigo?
Hola, si. Ahí lo acabo de agregar en la descripción María, se me había pasado lo de poner el link a Github.
Muchas gracias 😊
@@rocodev23 Hola amigo, fijate que el github de css esta mal pusheado
@@lucrecarradore1330 Fijate que no estés en la rama main, cambia a la rama "código del video" creo que se llama y ahí está el código del video.
Hola bro necesito ayuda ya te envié al discord el proyecto
Ahí te respondí.
En cuanto a estilos está bien, pero ví que agregaste varias etiquetas nav cuando no hacía falta, si te fijas en el video todo esta englobado en un solo nav, y dentro del nav fíjate el orden de los elementos que es muy importante para que te funcione el selector de hermano adyacente con el signo +, que al dar click a ese elemento el hermano adyacente siguiente va a cambiar sus estilos.
hola bro me guasto el tutorial , como te puedo contactar necesito ayuda Gracias no me sale bien el menú :(
Que problema te dio? Tenés subido el código a Github así lo puedo revisar?
@@rocodev23 ya lo arregle Gracias ví el vídeo como 100 veces,me equivocado en un letra
@@JohanPerez-wl2ut jajaja si suele pasar, una sola letra y el selector se desmadra xD
Me alegra que lo hayas podido solucionar. Aquí por el canal hay varios tutoriales también donde maquetamos componentes, te puede venir de 10 si querés practicar flexbox o grid.
@@rocodev23 bor no puedo entrar al la comunidad de Discord dice que no existe el grupo
@@JohanPerez-wl2ut discord.com/invite/Q2UjD7Ey
Podes acceder con ese enlace?
tu codigo no funciona.