Como Hacer un Menù Lateral con Html y Css

[@SLeeDw]

Suscrìbete para mas vídeos nuevos!! que estoy subiendo 2 a 3 vídeos semanalmente😍💌 Gracias por tu apoyo y no olvides en dejarme tu hermoso like 👍🏻 que eso me motiva para hacer màs tutoriales de Proyectos Web.😊👋🏻 :::::::::::::::::::::::::::::::::::::::::::::::::::::::: ♦♦♦ SIGUEME EN FACEBOOK♦♦♦ web.facebook.com/SLee-Dw-102638024655607/ :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Si tienes alguna duda sobre este proyecto web 🤔 No olvides en decírmelo aquí 👇🏻💌 en los comentarios y yo te ayudare en lo que desees mi estimado programador😊👍

[@cindyadriana93]

Le agradezco que ponga link para descargar el código, muchas gracias. ☺

[@pablomorad-p9y]

Brother no tenes idea de lo que te quiero ,explicaste todo sin vueltas y perfecto , te adoro

[@SLeeDw]

Muchas gracias. Bendiciones 🤝

[@tomyg3655]

Muchas gracias genio! algo tan esencial no está por ningún lado, vos fuiste el único que encontré en español

[@SLeeDw]

Muchas gracias por tu comentario, Saludos y bendiciones 🙌💻

[@fidonoso]

encontré un nuevo ídolo....muchas gracias.

[@thedavid.1229]

hey pana, te mereces un buen like ahora realizare uno y se lo venderé amigos de mi escuela que están en técnica de programación y están re-atrasados

[@leonardohernandez2020]

Bro muchas gracias, alfin pude hacerlo sin necesidad de JS!!

[@mikesalinas5222]

Buena idea dejar el código, se agradece el aporte... Justo para mi site...

[@mariadelosangelesramosroda2959]

Me solucionaste la vida, gracias 😂❤

[@nimzayquerales1908]

Muy bien video, te hago una consulta, que propiedad tendría que colocar para que el menú quede fijo, y ademas quede resaltado la opción que seleccione. Desde ya gracias

[@yancarlopuerta9573]

Tengo una duda, cuando generó un slide de imágenes en el body, al desplegar el menú lateral se ven las imágenes súper puestas en el texto y no permite dar click para ir al enlace

[@hugoarroyo9054]

Pon mas z-index al texto que a las imágenes del slide y listo

[@yancarlopuerta9573]

@@hugoarroyo9054 gracias, estuve investigando y encontré ese dato, muchas gracias

[@julianalexisriverafernande1133]

Me ayudo mucho tu video, muchas gracias de corazón❤

[@SLeeDw]

Gracias por tu comentario, me alegra mucho saber que mi video te haya sido de ayuda. Saludos 🙌

[@IvanLopez-lw1tj]

Muy buen vídeo, buena explicación y código muy limpio.

[@ignaciogirod6930]

Excelente video, muchas gracias por compartir tus conocimientos!

[@thedeymon17]

eres genial bro esta de poca 11/10 muy buen video sigue asi 😀

[@SLeeDw]

Muchas gracias. Saludos 🙌 y bendiciones 🤝

[@andresrosales4792]

muchas gracias por tu buena explicacion , lo voy a implementar en mi proyecto.

[@SLeeDw]

Hola, muchas gracias por tu comentario. Saludos y bendiciones.

[@DanielLopez-lk3cf]

como puedo cambiar el fondo, no me deja

[@Cacciator_D]

Que extension usa para cuando le des a lo codigo te aparexca en la pagina web lo que estas tocando

[@rodrigocastellano9830]

quiero agregarle submenu pero no veo diferencia en la presentacion comol lo haria?

[@lexmiguel1]

Que navegador usas? veo que demarca las lineas de los contenedores

[@gonzalocollares8693]

Me fue de gran ayuda tu aporte, muchas gracias! Bendiciones!

[@Campu1120]

¿Qué plugin usás para que te muestre en el preview lo que selañás?

[@SLeeDw]

@@Campu1120 Buenas, gracias por tu comentario. Respecto a tu pregunta el editor que estado utilizando en ese video ya no existe. Ahora te recomiendo editor cursor o visual

[@elrandiux]

Muy genial es menú, pero una duda, para poder escribir el contenido de la página ¿en que sección se pone? lo intento poner y se ve encimado o se ve detrás el menú

[@dianalopez3284]

Lo mismo me sucede...

[@Estoicoargentino]

Igual.alguien sabe como solucionarlo?

[@agustincostantini2520]

Me podrias ayudar en realizar menu a la base, me gustaria hacer algo diferente pero no me sale

[@TommyMdq]

amigo sos un capo la hiciste muy bien!

[@yisusengineer5386]

Nuevo sub, me encantó el menú :)

[@alejoaguilar4235]

buenas. una duda. como podria hacer para que esa barra aparesca en la derecha?

[@Herny78]

Buenas, yo nuevamente, soy principiante y estoy en mis primeras clases, por eso el nivel de la pregunta que te voy a realizar. descargue tu codigo (el html y el css) y anda perfecto, uno de los temas es 1.- No entiendo el linkeado a fontello, sin eso me levanto todo perfecto, es necesario? para cuales Iconos? 2.- Si miro la pag. en mi laptop veo las tres rayitas y "Logotipo" bien contra la izquierda, del otro lado "Inicio, Nosotros, Blog y contacto" bien contra la derecha. Pero si paso la pag. a un monitor que tengo no se acomoda y me quedan muy separados de los costados. Entiendo que eso deberia estar en la siguiente linea: .container{ width: 90%; max-width: 1200px; margin: auto; } pero por ejemplo en max-width puse 1800px en lugar de esos 1200px y no se va contra los costados, cual podria ser el problema? se entiende lo que te quiero preguntar? desde ya muchisimas gracias!!! Saludos!

[@kik4985]

y si la pagina k estas utilizando deja de funcionar?

[@fernanda4975]

Gracias! Buen video.

[@conlafederacionnacional7261]

hola que tal, excelente tutorial, solo temgo una pregunta, quiero que al seleccionar alguna opción del menú, se cierre el menú automaticamente y no quede abierto.

[@eduardos133]

Muy Guapo tu menu! una pregunta si quisiera agregar submenus en el menu horizontal como seria? ya que estoy acosumbrado a crear las etiquetas ul>li>a

[@zentenogonzalezfranciscoal3881]

que IDE utilizas?

[@anthonyeduardonunezcanchar4569]

estuvo buenizimo MUCHAS GRACIAS

[@gominam3857]

Me gusta tu video podrías hacer otro video como hacer un menu lateral tabs en html y css

[@alandacikdsk3366]

oye y como agregas letras o algun texto de inicio y todo eso ?

[@MrCruz3014]

alguien sabe como puedo cambiar de posición el botón? Lo quiero que esté pegado a la parte izquierda y abajo del encabezado

[@SLeeDw]

Hola, muchas gracias por tu comentario. Para cambiar de posición el botón. Utiliza la propiedad de css "left:15px;" y la propiedad "top:20px;".. El left = izquierda y top es = superior. Saludos y Bendiciones 💻🙌

[@cancionesdelparaguay3244]

Muy sencillo e interesante, gracias por el aporte

[@SLeeDw]

Hola, MUCHAS GRACIAS por tu comentario. Saludos y Bendiciones🙌💻

[@informaticasinpaja]

Pasame el código

[@josemerino8038]

muy buen video, pregunta como hago para que al darle click en una de las opciones del menu me cargue la pagina correspondiente al lado en el main container

[@sebastiandiazsilva9721]

Buen video pero tengo una duda como agrego texto a la pagina no encuentro como ayuda porfa :3

[@Herny78]

Buenas, dejaste el código en algún lado?

[@SLeeDw]

Hola, si lo he dejado en la descripción del video. Saludos

[@Herny78]

@@SLeeDw muchísimas gracias, no lo había visto

[@mayahd502]

alguien me diga que tipo de editor está utilizando 🙏

[@SLeeDw]

Hola, muchas gracias por tu comentario, respecto a tu pregunta, estoy utilizando el editor brackets. En la actualidad ese editor ya no está en Google para su descarga y bueno le recomiendo el editor Visual Studio Code o algún otro editor de su preferencia. Saludos y Bendiciones 💻🙌

[@mayahd502]

@@SLeeDw gracias.. pondré en práctica tus tutoriales

[@NayirPC]

wow gracias , esta vez me lucire en la clase B)

[@alalallaalalla2566]

excelente video fuiste de mucha ayuda, pero tengo una pregunta, si yo quiero que al apretar SERVICIOS salgan mas opciones abajo, como tendria que hacer???

[@brandowilches9838]

por que no puedo cambiar la imagen ??????

[@mariareginareitano4713]

no me deja descargar el codigo.. no puedo entrar al link que pusiste. ya no se puede descargar?

[@SLeeDw]

Hola, gracias por tu comentario, te compartiré el link directo para que descargues este proyecto web -> sleedweb.ga/menulateral , Saludos y Dios te bendiga..

[@mariareginareitano4713]

@@SLeeDw muchas gracias, toda bendución es grata, e igualmente.

[@hugocangi6214]

HOLA GRACIAS MUY BUEN VIDEO TE AGRADEZCO

[@SLeeDw]

muchas gracias. Saludos

[@RobertPetrucci10]

Hola. Una duda. Este menú también puede ser multi-nivel?

[@SLeeDw]

Hola, muchas gracias por tu comentario. Respecto a tu pregunta. El menú puede ser editado a su gusto. Puede ser multi-nivel sin ningún problema. Saludos y Bendiciones 💻🙌

[@RobertPetrucci10]

@@SLeeDw Muchas gracias, se ve muy bien explicado el video. Voy a intentar un menú similar tomando de base este menú. Muchas Gracias por el aporte. Saludos.

[@RobertPetrucci10]

@@SLeeDw No me funcionó el multi-nivel xD. Me pone todo al mismo nivel. En lo que he buscado la mayoría de estos tutoriales solo hablan de efectos visuales, pero no manejan el multinivel. Si tuvieras oportunidad de complementar este ejemplo con el Multi-nivel en el menú, te lo agradecería mucho, y quedaría muy completo este ejemplo. Saludos Cordiales.

[@Thesmoker485]

y esto se adapta bien a móvil?

[@cristiandominguez4642]

Hola si alguien me puede ayudar como hago para ingresar contenidos en cada sección por ejemplo que le dé click en la sección portafolio y aparezca otra página

[@alexm1101]

Me puedes ayudar con una duda sobre tu codigo?'

[@alan-vr1lf]

GRACIAS, TE KIERO

[@moviedev874]

hola, quiero hacer otro menu lateral, pero esta vez para un carrito de compra, pero al poner en el for="btn-cart" y poner en el input="btn-cart" no se activa, porque?, si pudieras ayudarme.

[@luisramirez7361]

En el input debe tener un atributo id="btn-card" ~suerte!

[@jonathanovelar8534]

Que aplicación usa?

[@franciscoguillermovaldezme152]

mi niño, desde que hizo su aparicion flex, los floats quedaron obsoletos. Por lo que te recomiendo que ya no los uses.

[@danielrico3352]

Gran video! Yo solo tuve un problema con cargar los íconos. Cuando descargo los íconos del menú lateral y de cierre de ventana, solo me aparece el del menú, no sé por qué la x de cierre de ventana no me carga.

[@joansoto4690]

Me puedes decir como se llama la cancion de tu intro?

[@luisguillermomadriz6396]

Hola, lo he hecho, y ha salido bien pero he intentado hacerlo del lado derecho y no se como trasladarlo a la derecha, ya que partiendo del lado izquierdo puede tomar varios posiciones en el eje x depende de la pantalla y si la tienes la página maximizada o no. estoy practicando y todavia no tengo idea de pasarlo al lado derecho, muchas propiedades que desconozco.

[@kevinnunezfranco7618]

prueba usando con un display flex, "flex-direction: row-reverse" y un "justify-content: space-between"

[@DavidAguaEnElHoyo]

una pregunta en el archivo ban los iconos y todo?

[@SLeeDw]

Hola, gracias por comentar☺, respecto a tu pregunta, me gustaría que conocieras un poco de fuentes de iconos online, te invito a que veas un video anteriormente que hice, hablando sobre como podemos agregar iconos para personalizar en tu sitio web.☺👉kzbin.info/www/bejne/mGOmimeEndyXhpI En tu Carpeta de este Proyecto (carpeta raíz) debe estar la carpeta descargada del sitio web "fontello.com", que es llamado "carpeta font" y también aparte debe a ver un carpeta llamada "css", que estará dentro el archivo "fontello.css", ese archivo debe estar vinculado con el archivo de html de la siguiente manera👇👇 Y luego para agregar un icono o lo puedas visualizar en tu página web, se hace de la siguiente forma👇👇 Recuerda debes de escoger el icono facebook y también puedes personalizar el nombre si gustas, en la página web "fontello.com". Saludos y Éxitos💻🙌

[@cordovacaamanoalexisdejesu4560]

Que editor de texto ocupas?

[@Santiago-tb5dw]

y si quiero ponerlo en el lado derecho? :3

[@SLeeDw]

Hola, gracias por tu comentario. Respecto a tu pregunta, el menu tiene una propiedad llamada left:0px; (hacia la izquierda) - Debera de cambiarlo por right:0px; (hacia la derecha). Saludos y Bendiciones.

[@Santiago-tb5dw]

@@SLeeDw Hola amigo, ya lo hice no funciono :(

[@yanethhernandez6969]

Gracias muy buen video

[@DavidAguaEnElHoyo]

me pueden pasar el link directo del archivo ezke me meto y no me da:(

[@SLeeDw]

Claro que si!🙌 te dejo el enlace directo, para que descargues este proyecto "Menú Lateral con puro Css" 👉 www.mediafire.com/folder/ji2ma6k1gtcg5/Menù%20Lateral Saludos y Éxitos..💻🙌

[@crisprime010]

@@SLeeDw te pide mediafire premium

[@SLeeDw]

@@crisprime010 Hola, muchas gracias por comentar, el proyecto lo puedes descargar aquí -» sleedweb.ga/menulateral , Saludos y Éxitos 💻💻🙌🙌

[@ulises2404]

hola! excelente tuto, disculpa, como hago que la barra lateral este del ladoderecho y no del izquierdo?

[@techmanwalker8496]

.cont-menu { right: 0; } En vez de left: 0;

[@ramonescalante2744]

Hola, excelente.. me podrías decir que aplicación es la que usas para escribir el Código? ya que veo que a medida que vas escribiendo ta ve mostrando en vivo lo que vas modificando! es de mucha ayuda! yo uso sublime text

[@SLeeDw]

Hola, muchas gracias por tu comentario, el editor de código que uso siempre en mis videos es Brackets, lo puedes descargar en el siguiente enlace amigo brackets.io/ , Saludos y Éxitos..

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@santosnovisky2603]

eso es porque la pagina esta como GOLIVE una extension, no abierta desde los archivos

[@jorgeortega97]

oye bro este puedo usarlo con frameset?

[@jorgeortega97]

y si sirve como podria anclarlo

[@saulcarrenonolasco5573]

aun tienes el grupo en wpp?? buen video

[@SLeeDw]

Hola, muchas gracias por tu comentario, y si aún tenemos el grupo de wsp, te puedes unir sin ningún compromiso, el link está en la descripción💻🙌, Saludos y Dios te bendiga..

[@alexanderpasquale8693]

Buenas bro buen video, donde consigo el codigo que tenias ya hecho?

[@SLeeDw]

Claro que si!🙌 te dejo el enlace directo, para que descargues este proyecto "Menú Lateral con puro Css" 👉 www.mediafire.com/folder/ji2ma6k1gtcg5/Menù%20Lateral Saludos y Éxitos..💻🙌

[@secretboy8175]

como puedo escibir en cada apartado ayudame plis

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@Alexplosiv0]

TE AMOOOOOOO !!!

[@juanestebanfrancotorres9435]

Excelente contenido

[@SLeeDw]

muchas gracias. Saludos

[@santiagoduarte7077]

Oye amigo podrías hacer este mismo pero con sub menús por favor te lo agradecería mucho

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@marshmello794]

Buen video me ha servido mucha gracias y buen contenido Como hiciste para poner un fondo sin descargar la imagen? lo he intentado y no he pidido

[@kevincorredor6332]

sencillo, colocas una etiqueta img o una similar que puedas darle la propiedad de source = " " o href= " " la diferencia es que el primero es mas usado para archivos ya guardados en tu proyecto como staticos css javascript y el segundo es un link de una imagem o cualquier otro archivo estativo como uan imagen pdf, jpg, img etc

[@ericksegura478]

He intentado aplicar el efecto que tienen los botones inicio_nosotros_Blog_contacto a los link del router en una navBar de react y he fracasado hasta ahora 😢 pero como dijo luis fonsi yo no me doy por vencido😂

[@LikeDePollo]

nmms wey con solo un poco de código hiciste maravillas, y yo aqui con mas de 100 lineas y el resultado un menu pobre :v

[@kruschev_4670]

AMIGO MUCHISIMAS GRACIAS

[@TecnologiasTI]

no subiste fontello.css

[@SLeeDw]

Hola, muchas gracias por comentar, respecto a tu pregunta. Bueno en el proyecto de descarga, ya no es necesario subir fontello, ya que no requiere de muchos iconos.. Saludos y Dios te bendiga 💻🙌

[@crisprime010]

Nuevo suscriptor

[@SLeeDw]

Muchas Gracias amigo 💻🙌

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@smithrodriguez6668]

Super super útil! De verdad muchísimas gracias! Intenté unirme al grupo de whatsapp pero está lleno :(

[@kevincorrales4198]

Como carajos hago que la información vaya dentro de cada botón nadie lo enseñaaaaaa

[@joseordonez7738]

Hola amigo este es compatible con dispositivos moviles?

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@santilopez5552]

gracias maquina

[@cintia1411]

Lo hice y no me funciono. Probe tu codigo y tampoco funciono

[@andreshernandez2813]

Estuvo bueno el video y te felicito, pero como opinión personal deberías de quitarle el sonido de los click que haces, es molesto escucharlos a cada rato del video, pero del resto estuvo bueno todo

[@crisprime010]

El link esta lleno de publicidad

[@SLeeDw]

Entendemos la molestia, los links estarán por un tiempo, por lo pronto puedes utilizar el link directo -» sleedweb.ga/menulateral , Saludos y Dios te bendiga 💻🙌

[@crisprime010]

@@SLeeDw gracias ese si funciona

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@alexnetworkingvk]

¿Dónde programas? xd

[@danielgarcia.8007]

En resumen APRENDE CSS y ya xd

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@martinlargentina937]

Estaría bueno explicaciones en vez de pasos a seguir como si de una receta de cocina se tratara

[@arielzero0143]

no deja descargar los links no funcionan no tienes otro?

[@SLeeDw]

Hola, muchas gracias por comentar, respecto a tu pregunta, te compartiré el link de descarga directo a nuestro sitio web -» sleedweb.ga/menulateral , Saludos y Éxitos🙌💻

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/omTUiWyCpt6rgLs

[@artsprojm]

6:20

[@johanandres8758]

es responsive

[@batatacuántica]

no me salió, jajajaja

[@tedytok18]

y como cierro el menu dando click fuera del menu ? en el body por ejemplo

[@camilamontoya1599]

Como hago para aumentar el tamaño del icono del menu

[@SLeeDw]

Hola, machas gracias por tu comentario. Respecto a tu pregunta. Para aumentar el tamaño del icono. Debes de ir a los estilos en Css. Y ver la clase del icono, y luego agregar dentro de las llaves la propiedad font-size:30px;