CREAR UN MENÚ DE NAVEGACIÓN LATERAL CON CSS
HTML-код
- Опубликовано: 7 апр 2020
- ✅ Suscríbete al canal bit.ly/RUclips-VidaMRR
🔔 Activa la campanita de notificaciones
Descarga los archivos del tutorial:
➡️ bit.ly/MRR-Github-NodeJS
➡️ bit.ly/Github-sitio-web-css3
➡️ bit.ly/MRR-Github-PHP-MYSQL
❤️ Sígueme en las redes sociales:
Blog: www.vidamrr.com
Facebook: / vidamrr
Twitter: / vidamrr
Instagram: / vidamrr
----------------------------------------------------------------------------------------------------
➡️ Más videos dentro del canal:
Café con Rivas - Vlogs bit.ly/mrr-vlogs
Curso de NodeJS bit.ly/mrr-curso-nodejs
Curso de PHP + MySQL bit.ly/mrr-curso-php
Basicos Dev: bit.ly/basicos-dev
Tips y trucos: bit.ly/tips-trucos
Mi primera app: bit.ly/primera-app
Tutoriales Kotlin y Android: bit.ly/tutos-android-kotlin
Problemas con código: bit.ly/problemas-codigo
Inspiración web bit.ly/mrr-inspiracion-web
Tutoriales Javascript: bit.ly/tutoriales-javascript
Reviews: bit.ly/mrr-reviews
Preguntas y respuestas: bit.ly/mrr-preguntas-respuestas
Curso básico de CSS: bit.ly/curso-css-basico
Diseño elementos con CSS bit.ly/componentes-css
Mi primer sitio web con CSS: bit.ly/primer-sitio-CSS
Curso avanzado de CSS3: bit.ly/curso-css3
Sitio web Completo en CSS3: bit.ly/mrr-sitio-web-css3
Curso de jQuery: bit.ly/mrr-curso-jquery
Portafolio web con jQuery: bit.ly/portafolio-jquery
Sitio web dinámico con jQuery bit.ly/sitio-dinamico-jquery
Tutoriales Photoshop bit.ly/mrr-tutoriales-ps 
Наука
Excelente video Marcos, muchas gracias! lo segui paso a paso y salio muy bien, ademas de que aprendi varias cosas que no sabía en CSS cómo realizar cálculos o usar variables. Pendiente del próximo video.
EXCELENTE ! Muchas gracias por compartir tu conocimiento, estoy apenas aprendiendo y me están sirviendo mucho tus tutoriales. Super bien explicados. Bendiciones.
Es el segundo vídeo que veo en tu canal justamente estoy por añadir un menú a mi proyecto de la uni, saludos me suscribo.
Excelente video y muy bien explicado, solo una consulta... ¿Como vuelvo a colapsar el sidebar cuando doy click a un elemento del menu?
Muy buen Tutorial Marcos, una consulta eston aprendiendo css, no quisiera hechar mano de tantos selectores css, me refiero a la especificidad, estoy tambien aprendiendo a manejar BEM, y bueno queria para no redundar en la especificidad y selectores. Como podria hacer lo mismo con Bem, para hacer mas mantenible el codigo.....saludos
Está tan bien explicado, que sin saber HTML, JavaScript y CSS lo he entendido jajajaja. Muchas gracias!! Saludos
oye mi duda es que si le das click a uno de los enlaces puedes demostar si te lleva otra pagina y el menu se conservapues eso y pues gracias muy bien explicado
se le podria agregar una transition para que al mostrar/ocultarse sea mas suavizado?
Muy buen video la verdad! una pregunta, se puede hacer Responsive el menu?
Excelente video, sencillo pero efectivo , te has ganado un suscriptor
Saludos, excelente tutorial, muchas gracias por compartir sus conocimientos, excelente explicación. bendiciones.
Hola donde podria descargar los archivos de este video, estoy aprendiendo y me gusto mucho el formato que le diste a este menu. gracias por tu apoyo.
Excelente video Marcos, tengo problemas cuando expando el menu se me descuadran todos las imagenes y textos, de seguro que he cometido algun error, gracias por tus comentarios
mi menu vertical tiene varios botones y cuando expando no se ven todos, sobre todo los que estan al final del menu, hay una manera de poner una barra de desplazamiento vertical cuando este expandido el menu?
Hola amigo, estoy comenzando con esto y la verdad no sé como cargar la imagen llamada photo.jpg. Escribí el código pero no la carga. Como se sube o hay que ponerla en algún lugar en especial?
hola cual es el tema de visual studio code que estas usando?
hola amigo que buen video . tienes pensado sacarlo Responsive , quedaria brutal y muy funcional
esa flechita morada que enlaza el evento, como la generas o la sacas, porque no la veo en mi teclado
Por que cuando se le da clic en otro lado el menu se quita ? y si das de nuevo clic en cualquier lado de la pantalla se muestra? gracias
Exelente tuto. Espectacular. Se puede hacer sin JavaScript?
cual es el tipo de fuente que utilizas para el editor ?
Excelente tutorial muy bien explicado nueva seguidora
Buen tuto. Sería conveniente que publiques el código. Gracias
14:33 el div que contiene la oracion "hola a todos" en tu ejemplo está pegado al menú pero en el mio se puso muy a la derecha y cuando se contrae se va más a la derecha alguna sugerencia de como solucionarlo?
edit: me di cuenta que no tiene que cambiarse la clase "menu-collapsed" a "menu-expanded" porque sino ese problema va a pasar :3
Hola! A mi no me salió, hice todos los pasos exactos dos veces y no lo conseguí. Tal vez porque estoy tratando de implementarlo en un proyecto Angular 15 y el script lo debo pasar a typescript
Tengo un problemas: 1-Lo modifiqué para que acepte en profile imagenes de diferentes tamaños y se les asigne un tamaño igual, pero cuando se contrae las imagenes no se hacen pequeñas, se quedan del mismo tamaño ¿Alguien sabra una solución? El problema esta en no asignar un porcentaje(60%) en la imagen de profile
bro, si pudieras compartir el proyecto en un link por favor!!, tengo un error pero no logro solucionarlo
que extensión te completa el etiquetado html?
excelente. pero quiero hacerlo como obtengo los iconos ?
Excelente video. Solo que no me queda igual, ya e revisado varias veces. donde puedo ver el codigo.?
Muy buen tutorial solo que mi texto del main-container sigue quedando abajo cuando expando el menu
Amigo muy buen tutorial, como podría hacer para que tenga submenu
el codigo de javascript para hacer colapsar y expandir el menu de navegación, no me funciona, que debeo hacer?
podrías ayudarnos con la parte del sub menú gracias ??????? o si ya alguien lo realizo indicarme el código gracias
Saludos y si hace uno igual u otro igual pero con submenu??
la linea 58 tiene una flecha para desplegar, como la represento en Atom
Muchas gracias por el tutorial
Como mantengo el menu contraido desde el inicio ?
me quede en la parte de expandir hice todo paso a paso pero no me expande el menu , alguien me ayuda
Me gusto, solo que yo le hubiera puesto un transition, para que no se viera de golpe el cambio, saludos
Excelente video y muchas gracias, una duda, como podria expander el menu al pasar el mouse y que se oculte al quitar
Cambia el evento click por el evento mouse over ;)
Hola, alguien sabe porque cuando oculto el menu no me aparecen los iconos?
como darle click en uno de esos items y que te lleve a un screen diferente
Una duda como puedo agregar Sub-menu
y esto se adapta bien a móvil?
Muy buen vídeo hermano, tengo una duda, ¿hay alguna manera de que el contenido que tiene mi página no se vea afectada por el movimiento del menú?, lo que pasa es que cuando lo abro, el contenido de mi página se desplaza hacia la derecha, muchas gracias!
eso me pasa alguna solucion que hayas encontrado se que ya pasó mucho tiempo pero sabes algo al respecto?
QUE EDITOR USAS?
como le pondrías la propiedad transition para que el cambio sea suave y no tan brusco?
creo que es una respuesta tarde , pero le puedes poner el tiempo de trancicion , Ej : transition : 0.3s ;
Hoy he aprendido algo nuevo jajaja, vine buscando cobre y encontre oro
amigo segui al pie de la letra tube un pequeño problemita el cual las lineas no se alinean a la derecha ruclips.net/video/sRaVhp96jxM/видео.html (min 14 06) #14:06 no se en que me podria haber equivocado
Hola me acabo de inscribir me peudes inidicar don de esta el project para descar y seguir elcurso , muchas gracias desde Ecuador
Excelente tutorial, lo puse en practica sin embargo, como tengo un display pequeño al tener muchos items se empiezan a perder y no se puede hacer un scroll para verlos estando expandido.
Por ejemplo; el que tienes como "Container Instances" me aparece cortado y a penas puedo ver el icono.
¿Cómo le podemos añadir un scroll para cuando lleguemos a tener muchos items?
Puedes añadir la propiedad de overflow: scroll o auto a la capa que contiene a los items para que cuando desborde aparezca el scroll
@@vidamrr Hola amigo, una pregunta por que cuando se hace clic en otro lado de la pantalla se cierra el menu ?
ya pude gracias bro
Tu pregunta es de hace mucho tiempo pero la solucion es colocar el overflow: scroll en la capa del menu-expanded
Excelente amigo
Puedes compartir el archivo index.html
hola, alguien puede mostrar el menu expandido desde el principio sin crear conflicto con el body?
Muy buenas tardes, Profesor, Por favor, me puede ayudar con el source de: CREAR UN MENÚ DE NAVEGACIÓN LATERAL CON CSS
Gracias su gentileza.
Quito.
Muchas gracias por este video, de verdad que me ha servido de mucho!, es posible que el menú pueda quedar encima de todas las cosas?, digamos, que no mueva el contenido sino que quede encima?... me pasa que al agregar una animación, esta queda por encima del menú y si bien respeta el espacio, no se ve la sombra del menú.... Muchas gracias otra vez, de verdad que este contenido vale oro, Saludos.
Si, hazlo flotante con posición absolute
@@vidamrr Disculpa la ignorancia, en que parte debo hacerlo, lo intente en varios lados pero no logro que funcione :/ ..... el contenido se puede centrar?, digamos que no este al tope de arriba?... muchas gracias Master!
Encontré la solución, finalmente quite el body-expanded y asi pude evitar que empujara al contenido, lo descubri volviendo a ver el video :) ahora solo me falta poder centrar los contenidos de la barra al centro :D
Mark ahí jajajaja mató. Gracias !
Exelente trabajo. Una pregunta. Que editor de texto es ese que utiliza en el vídeo ?
Utiliza Visual Studio Code mi estimado.
@@yushetbringas.4630 gracias amigo ya lo descargue está muy padre mejor que el átomo
Excelente gracias por compartirlo solo que Cuando le doy click a culquier link el sidemenu siempre se collapsa. como podemos solucionar ese detalle?
solo es poner . en lugar de - asi btn.addEventListener('click', e =>{
Hola Marcos, soy un suscriptor de tu canal y te sigo desde hace tiempo. Ya sé que este es un video antiguo de hace tiempo, pero no sé si tienes el código de este menú. Estoy haciendo un trabajo para la universidad y me interesaria hacer un menú así, no sé si tienes el código a mano. Más que nada porque he visto que hay dudas en el foro sobre algunas cuestiones y no me gustaría perder mucho tiempo haciendolo funcionar. Muchas gracias ! Saludos desde España !!
No tengo el código, lo siento pero puedo ayudarte a resolver las dudas.
@@vidamrr ok, perfecto, en estos dias lo copio del video y te digo si surge algún problema, gracias !!
@@dcorralf si logarste ahcerlo podrias pasrlo
Muy bueno man
Excelente como sus videos master, yo voy a ver si le robo la idea, y seria agregarle una animación para que nos ea vea tan brusco al mostrarse o esconderse.
Que bien.. Gracia.. Donde puedo descargar el codigo. Gracias.
donde podemos conseguir el codigo??
MUy bueno donde se puede bajar el código
Que editor de código es ese
increible video logre acabarlo.solo hay un proble cuando cierro el menuo las tambien apraecen als letars junto alas imagenes
Hola, muy buen video, hice tu menú y los dos únicos inconvenientes que he tenido es que btn-menu no se alinea a la derecha y cuando esta colapsado el menú siguen apareciendo los title, que podría estar pasando, gracias por tu apoyo
Trata de modificar el ancho del menú ora cuando se colapsa, para lo del menú puedes usar flex como display y luego justify-content:end pero aplicado a la capa padre del botón para que quede a la derecha
@@vidamrr como pusite la flecha morada que sale en el minuto 13:28
como pusite la flecha morada que sale en el minuto 13:28
@@darknessdpoiseslssmd2846 Ya sabés cómo???
@@brunoreyes7241 Es solo el simbolo = con el mayor que => funciona igual
Flash viendo esto: tengo un rival.
amigo buentutorial pero el JS no lo agarra, y la clase .title no la oculta cuando le colocas:
/*collapsed*/
.menu-collapsed{
width: var(--width-collapsed);
}
.menu-collapsed #header #title{
width: 0;
height: 0;
padding: 0;
margin: 0;
}
.menu-collapsed #profile #name {
display: none;
}
.menu-collapsed .item{
width: 100%;
}
newFunction();
function newFunction() {
const btn = document.querySelector('#menu-btn');
const menu = document.querySelector('#sidemenu');
btn.addEventListener('click', () => {
menu.classList.toggle('menu-expanded');
menu.classList.toggle('menu-collapsed');
document; querySelector('body').classList.toggle('body-expanded');
});
}
el JS me funciono asi
en el HTML
Nosotros
y en el CSS
.menu-collapsed #menu-items .item #name{
display: none;
}
Excelente, me sirvio Gracias - Hay un detalle de una flecha en la linea 58 del index...esa flecha en Visual code como se escribe?
de nuevo te agradezco !!!
averiguaste como se escribe?
@@jonyjames1 es =>
@@dainoobyru7498 marca error
Hola, vengo de programar lenguajes de escritorio, ahora estoy incursionando en sistemas web, buscaba como hacer un menú como el que presentas y me pareció genial, así que me tomé el atrevimiento de tomar el curso de principio a fin y funcionó la mayoría, me refiero a que no me ha funcionado la sección del scrip para abrir y cerra el menú a pesar de haberlo probado asi:
const btn = document.querySelector('#menu-btn');
const menu= document.querySelector('#sidemenu');
btn.addEventListener('click', e =>{
menu.classList.toogle("menu-expanded");
menu.classList.toogle("menu-collapsed");
document.querySelector('body').classList.toogle('body-expanded');
});
también asi:
const btn = document.querySelector('#menu-btn');
const menu= document.querySelector('#sidemenu');
btn.addEventListener('click', () =>{
menu.classList.toogle("menu-expanded");
menu.classList.toogle("menu-collapsed");
document.querySelector('body').classList.toogle('body-expanded');
});
Y así:
const btn = document.querySelector('#menu-btn');
const menu= document.querySelector('#sidemenu');
btn.addEventListener('click',activa_menu);
function activa_menu{
menu.classList.toogle("menu-expanded");
menu.classList.toogle("menu-collapsed");
document.querySelector('body').classList.toogle('body-expanded');
};
Incluso ya probé con los hashtag y sin ellos, por lo que pido amablemente y si tienes tiempo pudieras aclarar aquí para todos nosotros que es lo que podría estar haciendo mal.
Anticipadamente te doy las gracias.
Muy buenas, probá con una función anónima, la 'flecha' a mi siempre me da problemas
btn.addEventListener('click', function() {
Excelente
hola! por alguna razón los títulos como cloud services no se desaparecen cuando comprimo el menu
Lo pudo solucionar? Ami me esta pasando lo mismo :(
Como se pone la flechita del btn.addEventListener?
=>
bro en tu linea 58 en tu index hay una flecha xd eso que es o como lo pongo, estoy en sublimetext 3
con = y >
En SublimeText => pero en VisualCode ?
alguien me podria proporcionar con el proyecto en Github, por favor
Genial video gracias.
Cuando le doy click a culquier link el sidemenu siempre se collapsa :(
solo es poner . en lugar de - asi btn.addEventListener('click', e =>{
@@saulvazquez1230 si bro, gracias, ya lo había solucionado.
thanks f
Y el repositorio?
un div para poner una linea separadora?🤨🤨
Muy útil el video como siempre pero hay varias cosas que no me acaban de funcionar sería tan amable de compartir el codigo, gracias 👍
asi es esa ultima parte de expandir el enu no me sirve y la segui paso a paso
estoy Igual
Olá, é possivel me fornecer o codigo da aula CREAR UN MENÚ DE NAVEGACIÓN LATERAL CON CSS
Se ve bonito al descargar el archivo index esta vacio
Marcos : buenas ... muchas gracias por compartir tu conocimiento.. eso te hace mas grande de lo que ya eres .. te felicito..
yo soy completamente nuevo en estos temas de desarrollo web.. estoy estudiando angular...etc.. etc.. hice tu ejercicio y ahora deseo poner los metodos o como se llame para que al pinchar (hacer clic) sobre cada icono (elemento del menu) me lleve a nuevo componente o pantalla o vista como se pueda llamar... gracias muy seguramtente es sencillo pero como indique soy completamente nuevo en el tema...
A quien me pueda colaborar un milon de gracias...
como pusite la flecha morada que sale en el minuto 13:28
quien me puede compartir el archivo index.html
Hola, me gustó mucho tu vídeo, si lo pude lograr pero me gustaría que después de un login me mandará a una página con este menú, como podría hacer algo así, y que el user sea dependiendo a quien sea que inicie sesión, de antemano muchas gracias
hola me puedes copartir el index
Curso de react js con php mvc
las letras me quedaron moradas
LISTO, GRACIAS Y QUE PUEDO HACER CON LOS TITLES DE LOS ITEMS QUE CUANO COLAPSA AUN SE VEN, NO SE OCULTAN , INCLUSO LES PUSE UN "ID" Y LE CREE UNA NUEVA REGLA Y O FUNCIONA: .menu-collapsed #menu-items #title{
display: none;
}
como pusite la flecha morada que sale en el minuto 13:28
como hago la flechita
=>
amigo no me funciona le código dentro Script, no sé como se obtiene ese símbolo flecha. me podrías pasarme el codigo que hiciste para comprobar con lo que hice yo. Psdta: Dónde has declarado la clase (.body-expanded). Gracias...
Simplemente es "=>" (un igual y un mayor que)
¿que editor usa?
Visual studio code
13:29
pasame el link directo para descarga ese tutorial exacto
Salio exelente el menu.
Por favor enviar jolucova@hotmail.com
scroll necesto
hola alguien sabe como poner la flecha morada que sale en el minuto 13:28
Es un "=>" (igual | mayor que) si mal no me equivoco
Hola muy bien video, en el github del proyecto no hay ningun html