Como Hacer un Menù Lateral con Html y Css
HTML-код
- Опубликовано: 19 янв 2020
- En este tutorial aprenderás a crear un hermoso menú lateral para que lo implementes en tu sitio web o lo tomes como un proyecto de practica como desarrollador web , este proyecto lo estaremos creando con pocas lineas de código de Html y Css.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
♦ Link de este Proyecto web (Descárgalo aquí) 👇🏻:
bit.ly/sleedw-menulateral
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
♦ Únete a nuestro grupo de WhatsApp 👇🏻:
bit.ly/sleedw-grupo-whatsapp
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
♦ Síguenos en Facebook! 👇🏻:
bit.ly/sleedw-facebook
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Página Web para que descargues tus iconos 👇🏻:
fontello.com/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Suscribete para mas vídeos nuevos!! que estoy subiendo diariamente... Gracias por tu apoyo y no olvides de dejarme tu hermoso like 👍🏻, que eso me motiva mas a hacer contenidos sobre estos proyectos..
![DDG & Blueface - Top ft. Swae Lee [Music Video]](http://i.ytimg.com/vi/p2wIDXar9ns/mqdefault.jpg)
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😊👍
Le agradezco que ponga link para descargar el código, muchas gracias. ☺
Brother no tenes idea de lo que te quiero ,explicaste todo sin vueltas y perfecto , te adoro
Muchas gracias. Bendiciones 🤝
Muchas gracias genio! algo tan esencial no está por ningún lado, vos fuiste el único que encontré en español
Muchas gracias por tu comentario, Saludos y bendiciones 🙌💻
Me solucionaste la vida, gracias 😂❤
Excelente video, muchas gracias por compartir tus conocimientos!
Muy buen vídeo, buena explicación y código muy limpio.
encontré un nuevo ídolo....muchas gracias.
Me fue de gran ayuda tu aporte, muchas gracias! Bendiciones!
Bro muchas gracias, alfin pude hacerlo sin necesidad de JS!!
Buena idea dejar el código, se agradece el aporte... Justo para mi site...
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
amigo sos un capo la hiciste muy bien!
Nuevo sub, me encantó el menú :)
Gracias! Buen video.
muchas gracias por tu buena explicacion , lo voy a implementar en mi proyecto.
Hola, muchas gracias por tu comentario. Saludos y bendiciones.
wow gracias , esta vez me lucire en la clase B)
Me ayudo mucho tu video, muchas gracias de corazón❤
Gracias por tu comentario, me alegra mucho saber que mi video te haya sido de ayuda. Saludos 🙌
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
Muy sencillo e interesante, gracias por el aporte
Hola, MUCHAS GRACIAS por tu comentario. Saludos y Bendiciones🙌💻
Pasame el código
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
eres genial bro esta de poca 11/10 muy buen video sigue asi
😀
Muchas gracias. Saludos 🙌 y bendiciones 🤝
GRACIAS, TE KIERO
Que navegador usas? veo que demarca las lineas de los contenedores
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???
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
Que extension usa para cuando le des a lo codigo te aparexca en la pagina web lo que estas tocando
Gracias muy buen video
estuvo buenizimo MUCHAS GRACIAS
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.
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.
buenas. una duda. como podria hacer para que esa barra aparesca en la derecha?
quiero agregarle submenu pero no veo diferencia en la presentacion comol lo haria?
TE AMOOOOOOO !!!
oye y como agregas letras o algun texto de inicio y todo eso ?
sos un genio!!
Me gusta tu video podrías hacer otro video como hacer un menu lateral tabs en html y css
AMIGO MUCHISIMAS GRACIAS
Me podrias ayudar en realizar menu a la base, me gustaria hacer algo diferente pero no me sale
y como cierro el menu dando click fuera del menu ? en el body por ejemplo
como puedo cambiar el fondo, no me deja
Que editor de texto ocupas?
y si la pagina k estas utilizando deja de funcionar?
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
y esto se adapta bien a móvil?
Buen video pero tengo una duda como agrego texto a la pagina no encuentro como ayuda porfa :3
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!
Excelente contenido
muchas gracias. Saludos
que IDE utilizas?
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.
prueba usando con un display flex, "flex-direction: row-reverse" y un "justify-content: space-between"
Super super útil! De verdad muchísimas gracias! Intenté unirme al grupo de whatsapp pero está lleno :(
Me puedes ayudar con una duda sobre tu codigo?'
Podrias explicarme o darme un ejemplo de como hacer un enlace para verlo en la misma página. Muy lindo el menu. Gracias. Saludos desde Buenos Aires, Argentina
Hola, claro que si amigo. En la descripción del video esta un enlace de invitación al grupo de wsp, en ese medio solucionamos problemas con código y enseñamos al que lo necesite, Saludos y Dios te bendiga.
Yo tengo la misma duda. Estoy tratando de solucionar eso, pero no hay manera. Podrían ayudarme?
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ú
Lo mismo me sucede...
Igual.alguien sabe como solucionarlo?
una pregunta en el archivo ban los iconos y todo?
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.☺👉ruclips.net/video/b2CY4NhwdP0/видео.html
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💻🙌
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
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
hola! excelente tuto, disculpa, como hago que la barra lateral este del ladoderecho y no del izquierdo?
.cont-menu {
right: 0;
}
En vez de left: 0;
Nuevo suscriptor
Muchas Gracias amigo 💻🙌
Te puede interesar este video también: ruclips.net/video/l3qX9LqyxJY/видео.html
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
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..
Te puede interesar este video también: ruclips.net/video/l3qX9LqyxJY/видео.html
eso es porque la pagina esta como GOLIVE una extension, no abierta desde los archivos
Me puedes decir como se llama la cancion de tu intro?
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.
En el input debe tener un atributo id="btn-card" ~suerte!
alguien sabe como puedo cambiar de posición el botón?
Lo quiero que esté pegado a la parte izquierda y abajo del encabezado
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 💻🙌
por que no puedo cambiar la imagen ??????
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
Pon mas z-index al texto que a las imágenes del slide y listo
@@hugoarroyo9054 gracias, estuve investigando y encontré ese dato, muchas gracias
no me deja descargar el codigo.. no puedo entrar al link que pusiste. ya no se puede descargar?
Hola, gracias por tu comentario, te compartiré el link directo para que descargues este proyecto web -> sleedweb.ga/menulateral , Saludos y Dios te bendiga..
@@SLeeDw muchas gracias, toda bendución es grata, e igualmente.
Buenas bro buen video, donde consigo el codigo que tenias ya hecho?
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..💻🙌
Como hago para aumentar el tamaño del icono del menu
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;
Oye amigo podrías hacer este mismo pero con sub menús por favor te lo agradecería mucho
Te puede interesar este video también: ruclips.net/video/l3qX9LqyxJY/видео.html
aun tienes el grupo en wpp?? buen video
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..
me pueden pasar el link directo del archivo ezke me meto y no me da:(
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..💻🙌
@@SLeeDw te pide mediafire premium
@@crisprime010 Hola, muchas gracias por comentar, el proyecto lo puedes descargar aquí -» sleedweb.ga/menulateral , Saludos y Éxitos 💻💻🙌🙌
oye bro este puedo usarlo con frameset?
y si sirve como podria anclarlo
como puedo escibir en cada apartado ayudame plis
Te puede interesar este video también: ruclips.net/video/l3qX9LqyxJY/видео.html
Buenas, dejaste el código en algún lado?
Hola, si lo he dejado en la descripción del video. Saludos
@@SLeeDw muchísimas gracias, no lo había visto
Hola amigo este es compatible con dispositivos moviles?
Te puede interesar este video también: ruclips.net/video/l3qX9LqyxJY/видео.html
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
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😂
alguien me diga que tipo de editor está utilizando 🙏
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 💻🙌
@@SLeeDw gracias.. pondré en práctica tus tutoriales
no subiste fontello.css
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 💻🙌
6:20
Como carajos hago que la información vaya dentro de cada botón nadie lo enseñaaaaaa
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
mi niño, desde que hizo su aparicion flex, los floats quedaron obsoletos. Por lo que te recomiendo que ya no los uses.
En resumen APRENDE CSS y ya xd
Te puede interesar este video también: ruclips.net/video/l3qX9LqyxJY/видео.html
y si quiero ponerlo en el lado derecho? :3
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.
@@SLeeDw Hola amigo, ya lo hice no funciono :(
¿Dónde programas? xd
Lo hice y no me funciono. Probe tu codigo y tampoco funciono
Estaría bueno explicaciones en vez de pasos a seguir como si de una receta de cocina se tratara
no deja descargar los links no funcionan no tienes otro?
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🙌💻
Te puede interesar este video también: ruclips.net/video/l3qX9LqyxJY/видео.html
El link esta lleno de publicidad
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 💻🙌
@@SLeeDw gracias ese si funciona
Te puede interesar este video también: ruclips.net/video/l3qX9LqyxJY/видео.html
es responsive
no me salió, jajajaja
Hola. Una duda. Este menú también puede ser multi-nivel?
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 💻🙌
@@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.
@@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.