Diseñando un Sidebar Menu con HTML, CSS y JQuery
HTML-код
- Опубликовано: 23 июн 2015
- En este nuevo workshop aprendemos haremos un Sidebar menu con HTML, CSS y Jquery.
Síguenos en facebook:
/ jygproyectosweb
Únete a nuestro grupo:
/ 1639298496227219
Nuestro sitio oficial:
I don't know any Spanish or whatever language you're speaking but this tutorial is very helpful! thank you!
yourwelcome
@@angelsaucedo215 ..
Muy bueno este tutorial, me incentiva a seguir viendo tus videos! Gracias por compartirlo! 👏👏👏
Muchas gracias por tu video! Me acabas de solucionar algo que me estaba dando muchos problemas en el trabajo, claro, conciso y sin ruido el tutorial, directo al grano!
Excelente toda la explicación. Muchísimas gracias por éste contenido en español!!!
vi a este tipo inmediatamente me dio risa, tiene mucha gracia al hablar, Bendiciones Hombre
Hola! Gracias por el tiempo y por compartir tus conocimientos, me sirvió de mucho para mis proyectos de la universidad, felicidades y sigue adelante. Saludos!!
Super explicación como siempre....Magnifico
excelente, estoy practicando todos los videos que has hecho. por ahora he comenzado con los tres primeros.. seguiré intentándolo.. saludos.
Sé que ya tiene tiempo este video pero es excelente ! muy buen trabajo me ha servido de mucho !!
Normalmente uno revisa videos, usa la información y no agradece nada. Personalmente te quiero dar las gracias ya que gran parte de mi pagina web la rediseñe y modifique gracias a tus tutoriales. Muy bien explicados, y muy bien ejemplificados. Un cordial saludo desde Chile.
Muy bien, se entiende y va muy claro en su contenido, nada de rodeos , asi es que se explica.
Gracias por la contribución. Me sirvió mucho en un proyecto empresarial
Muchas gracias por tu trabajo y esfuerzo, con que facilidad explicas las cosas,
Un saludo
Excelente! Justo lo que estaba buscando y lo explicaste super sencillo y super conciso.
Funciona Excelente! MIL GRACIAS!!!
Excelente tutorial amigo, muchas gracias, en mi caso no me funcionaba el archivo javascript porque me equivoque en una palabra, ponia "toogle" en vez de "toggle", se lo corregi y me funciono perfecto :)
¡Simplemente, un genio!
Excelente video, muy bien explicado, saludos desde Venezuela, gracias por compartir
Julio Vergara muchas gracias a ti por verlo :)
Mil bendiciones hermano! un millón de gracias y soles para usted, xD
Excelente video, aprendí mucho, gracias por publicar este video.
Buenisimo hermano, increible video, espero que subas mas con Jquery y javascript
Excelente video amigo. Saludos.
Exelente video. La explicación es fantástica
Grandisimo trabajo, nuevo sub y me inspira a continuar brot, gracias
muy bien explicado man, sigue asi. ahora soy un suscriptor
Gracias buen tutorial
me sirvo para un proyecto de la escuela
te haz ganado un nuevo subscriptor
Eres muy bueno, muchas gracias siempre por tus videos
Muchas gracias por este tutorial, de lo mejor que he visto!! Saludos.
Hola que tal, actualmente Jquery cambió la forma de agregar el CDN, ¿me podrías decir como lo hiciste?
que grande eres!!!! muchas gracias por tus videos maquina!!
Eres el Genio Amigo!
Muy buen video, muchas gracias por este tutorial
Muchas Gracias !
Capoo!!!!
muy bueno!! estaria bueno que hagas una pagina responsivo!!! felicidades explicas muy bien!!
La verdad me sirvió mucho, muy buen video
Excelente vídeo amigo muy claro y muy útil :)
victor Gutierrez rivas muchas gracias!
Eres exelente amigo!
Muy bien explicado...gracias
Me gusto el video. Excelente
Muy buena la explicacion, muchas gracias por el video .
Muy bueno, me ayudo bastante.
Que maquina, buen video.
ya ves si es un maquina
Excelente tutorial!!
que buen tutorial saludos
Muchísimas gracias! Me dio una clara idea de los que quiero hacer :)
grandísimo tutorial. muchas gracias
+Sergio Tortosa gracias
Muchísimas gracias por tus tutoriales amigo son de gran ayuda, me encanta tu trabajo y te mando un saludo enorme. Tengo una duda ¿En este proyecto se le puede agregar submenus como en el tutorial de "Menú desplegable responsive (HTML, CSS y Jquery)" pero con el estilo de este video?
Muy bien explicado amigo :) me ayudan mucho tus videos gracias :) :) y sigue adelante
diego villarro muchas gracias
Amazing even though I don't know Spanish 👍👍 Really brother Fully detailed code
Increible Video :D
jajaja,,, que gran explicacion , muy facil de entender.. +sub
el mejor mil gracias.
Me sirvio muchisimo, gracias amigo, haces que sea facil
Tomás Díaz Toro que bueno que te haya servido, gracias!
Podrías hacer un tutorial de slider testimonial con control manual. Gracias, eres un crack!!
Muchas gracias, Excelente vídeo, como se puede logra que al dar clic por fuera (en el contenido) se oculte el menu
Genial , muchas gracias ,!!
GENIO Explicas Excelente....
SUGERENCIA EFECTO PARALLAX
J
Excelente
muchas gracias !!
muito bom excelente video!
Hola amigo muy interesante tus vídeo y muchas gracias por el tiempo que le dedicas a enseñar, te quería preguntar una cosa con respecto a Backets y es que como haces para que te salga el mapa de tu código, el que sale a la derecha, espero me comprendas.
Buen vídeo, podrías explicar como hacerle los submenus? seria de gran ayuda.
Excelente Tutorial !!Que habría que hacer si uno quisiera que al cliquear inicio, productos o algunos de los contenidos del listado tambien desaparezca el menú??
Hola amigo, esta muy buena tu explicación, crees que puedas explicar un menu con sub menu vertical como tipo acordion
Muchas gracias!
Gracias, muy buen video.
Emanuel Martínez Pinzón gracias a ti por verlo :)
Oiga! Si no tiene la capacidad de entender algo tan simple no se vaya en contra de nadie. Respete al tipo que él se tomó el tiempo de explicar. Y yo le entendí. Así que seguro el del problema eres tú.
Emanuel Martínez Pinzón ya no está el comentario, aún lo puedes ver tu? no te molestes en responderle, es gente que se dedica a hacer comentarios así, gracias Emanuel, que bueno que te sirvió :)
Si. Yo aún lo puedo ver. Pues bien, estoy al pendiente de nuevos vídeos. 👍
Buen video gracias
gracias muy útil
eres muy bueno brother, diseña un panel de control :'c
Buenos tutoriales!
Excelente tutorial, nada mas para tenerlo en cuenta, ¿Que pasaria si nuestro contenido es mayor al de la pantalla? como se quedo con un overflow hidden no va a escrollear, entonces mi recomendación es que en el body, poner overflow-x: hidden; para que se puede scrollear verticalmente y el slidebar poner position: fixed;left: -250px; y jugar con jquery para que cuando se abra el menú este se pueda manipular facilmente, saludos
Gerardo May es cierto ya depende del alto del contenido, si hay mas contenido hacia abajo ahi si habria que especificar el overflow x, y hacer algunos cambios para que el contenido siempre se estire(por ejm height:auto). Pero en este ejemplo es para poco contenido, como puedes apreciar. Igual gracias por la sugerencia.
EL MEJOR
Mano arriba Bro. :) tambien puedes usar left:250px; en lugar de translate
+Aprendiendo así es. o con margin-left.
+J&G Proyectos Web Hi I have seen ur tutorial I liked it but I didn't understood ur language just by looking I was able to do..thank you
+J&G Proyectos Web I have a question when I refresh the page the menu is not hidden when we click on contendio at that only it gets hidden..I want when page is refreshed and when we click on contendio at that time only menu should be seen...will u help me plzzz
excelente tu tuto, una duda si quiero q el menu sea pero del lado derecho??
heroe!!
Pasado de bueno man :P La explicación exclente... sobre todo la parte del JQuery, no entendía el sentido verdadero de su uso :P mientras iba mirando el video pensé que ibas a usar addClass y un if y todo ese rollo :P. Gracias por compartir tus conocimientos. Saludos desde Argentina.
Jesus Ricardo Leal Muchas gracias, así es lo del addclass es todo un lio porque de ahi habria que agregar otro evento para quitar la clase y etc, aquí en este video hacemos algo similar pero con puro css: ruclips.net/video/FL_odxf4zq4/видео.html
Oh genial amigo, lo miraré y comentaré al respecto. Que bueno que engancho un canal que inicia hace poco, siempre veo videos que fueron hecho en 2012, 2013 já.. y con el avance vertiginoso cuando descargo las herramientas estan totalmente cambiadas. Bueno gracias nuevamente por compartir tus conocimientos.
a ti! gracias!
Hola, muy ilustrativo tu video. Gracias.
Pero una pregunta, como hago para que las paginas vinculadas a los href de las opciones del menu se abran dentro del div con clase .contenido (div principal). Cómo sería, o habría otra alternativa...............
Saludos y espero me respondas.
oiee que buen video hermano te felicito muy bien explicado cada paso yo sin entender mucho, de programacion web pues eh comprendido muy bien ,te recomiendo porque creo que ayudarias a muchas personas con tutoriales desde un inicio gracias espero puedas hacer ese tutorial de html y css completo
Alex Zelada hola muchas gracias, por el momento estamos haciendo workshops, pero si estamos pensando en hacer un curso de html y css, estamos esperando tener más suscriptores para empezarlo. gracias por tu apoyo!
Gracias
Man! excelente video! quisiera saber si hay forma de que el menu se cierre con tan solo hacer click fuera del mismo, como si se tratara de un modal, que no necesariamente se tenga que dar nuevamente click al boton para poder cerrarlo.
hola he aprendido mucho contigo, podrias explicar como hacer un menu vertical con submenu que se oculte, con iconos y responsive por favor gracias
hola...buenisimo el tutorial, pero si el menu lo utilizamos para una template flat, necesito que el menu se cierre automaticamente cuando se va al sitio que se designa...algo que añadir al js,,,gracias opr tu respuesta
tremendo
sos grande
muy buen video .. segui los pasos y me salio todo bien ... menos que la barra menu se despliegue como en el video .... el couser mio no cambia
gracias
Emmet! Yeah.
Buenas.
Que software puedo utilizar para crear esto
Que tal brow una consulta como puedo dejar la parte de donde esta el menu estable y lo demas que se desplace me podrias ayudar gracias por tu colaboracion y por tu ayuda gracias
nice........
crack
me funciono aunque yo tarde un buen like
Hola buen día,Me gusta mucho sus explicaciones,me gustaría pedir un favor,de cómo puedo realizar un dashboard y llenarla con diferente información y con sus respectivos botones, quedó atento bendiciones
perdon por mi ignorancia al hacer el resto de la página se debe realizar de manera habitual?
hola soy un fiel seguidor y queria sbaer ahora que se actulizo jquery se complica mucho encontrar el cdn sera posible dejarlo en la descripcion del diveo o ponerlo como respuesta ?
e estado tratando de hacer lo mismo y el video me ayudo mucho pero con la diferencia que yo estoy ocupando sublime text y no se si por eso es que no me esta funcionando el abrir.js y el menu no sale
J&G Proyectos Web tengo la duda de como cargaria los elementos en el contenido(formularios, informacion, tablas etc que tenga mi sistema o sitio) segun la opcion del sidebar que elija , ya que el a mi parecer el sidebar debe de servir para facilitar el movimiento del usuario en la pagina sin tener qu redirjir a otras pantallas, ojala que me pudieras ayudar es urjente.
Gracias
Hola me sirvió mucho tu video, lo que necesito saber es cómo hacer que el menú se cierre cuando hago click en cualquier enlace del mismo y obviamente me lleve hacia ese link.
Espero que me puedas ayudar...
Gracias Saludos
Saludo me gustaría saber cómo poner una imagen en el background y no entre en conflicto con el movimiento del sidebar.No si sería mejor hacer por html o por css.
muy buen tutotial Bro.. Pero tengo un problema, coloque el box-sizing:border-box y el hidden pero el parrafo sigue saliendose del contenedor.. ayuda u.u
Is there a way to have the navigation bar disappear when you click on a nav item like home,about,contact etc.?