CSS: Crear un menu vertical responsive con impresionantes efectos (2da parte)

[@EDteam]

Aprende a crear sitios web hermosos con CSS 🤩 *Nuestro curso es completamente gratis* , tómalo aquí 🎁 ed.team/cursos/css

[@shasminecianne7108]

explicas de la mejor forma, creo que vine a entender un menu y me fui con un monton de cosas que no sabia de todos los lenguajes que usaste. Mil gracias, te voy a seguir mirando para aprender bien a programar. Saludos

[@ZasbangVEVO]

Y quien pensaría que esto sería el comienzo de EDteam....

[@angelmtos]

Bendiciones desde Rep. Dominicana hermano, se nota que sabes mucho de esto. Gracias por el vídeo.

[@Agente47TaZ]

Muchas gracias por el conocimiento compartido ^.- tuve un problema que me llevó cerca de 2 horas en resolver y es que recién me voy iniciando en este mundo... Fue un estúpido error de compilación pero ya me estoy familiarizando con los lenguajes (fue un error en CSS) gracias a tus tutoriales y otros ^.-

[@josemanuelaguilarsanchez6082]

Estimado, muy buena explicación en tus videos, gracias por compartir.

[@luisalfredosullcahuaracca5323]

Me encanta tu forma de enseñar ... Motiva a uno a aprender cada vez mas

[@ArturoHerrera89]

Buen material como siempre ***** se agradece y ojala este 2015 si podamos tener mas videos tuyos por aca enseñando mucho codigo.

[@mariocarnival]

27:30 TOGGLE es la esencia del jQuery. Fácil de implementar, código comprensible y semántico, pocas líneas. Sin embargo, otra solución, sin usar jQuery, es la de usar la casilla de verificación (la misma de los formularios), con la pseudoclase: checked. La hizo otro pata.

[@jhonyjairvegadiaz5596]

Muy buen video, excelente estaba tratando de hacer un menú responsive ahora ya tengo claro los pasos y parámetros para realizarlo. Gracias.

[@polodibujanye]

Excelente Alvaro. Me va a servir para una página que estoy haciendo. Gracias mil. POLO

[@ElvisPinedaR]

Gracias por los tutoriales, me son de mucha ayuda y hermosa página, muy bien organizada.

[@MrPOLOCOTA]

me salió a la primera buena explicación excelente maestro

[@marysantuary]

Hola! Muy bueno tu tutorial. Me gustaría saber como puedo hacer para que el contenido de la pagina se mueva a la derecha cuando se abra el sidebar. Gracias

[@vaas28]

Es mi imaginación o ese sujeto mira CSS como si estuviera leyendo un libro de cuentos?? o.O en serio, que habilidad para trabajar con los estilos web!!

[@germanbaena6579]

Alvaro, excelente su tutorial; me gusta mucho su estilo de explicar. Realmente soy muy nuevo en este tema y practicamente no conozco nada de Java; pero según lo que he leído por el contrario "no es una buena práctica" incluir el Código de JS dentro del HTML al final del body y menos con el último estandar de HTML5; esto me confunde un poco, pues usted dice que es una "buena práctica"???

[@roycfc6301]

Excelente los videos y la forma de explicar, gracias me suscribo

[@JNTN__]

Muy buen video amigo y muy bn explicado!!! muchas gracias!!

[@diegoangelesU]

Excelente video, tus seguidores esperan más vídeos. Saludos.

[@impavenleizar]

grande!! bien explicado y todo! muchas gracias

[@JorgeVargasVega]

Hola. Quizás a estas alturas del tiempo ya transcurrido ya sepas que para ordenar el CSS alfabeticamente, solo seleccionas los estilos de un elemento y presionas F9. Saludos!!

[@edwin162]

13:06 puedes ordenarlo usando F9 :)

[@EDteam]

Buen dato. Gracias =)

[@IvanCazorla21]

Muy útil. Muchísimas gracias. ¡Me suscribo!

[@israelbriongos]

Muy bueno el vídeo, si colgaras los fuentes sería de gran ayuda para seguir el tutorial. Muchas gracias.

[@andresbaldion122]

que buen video gracias una pregunta como se puede hacer el efecto en donde se da click en el menu pero las tres lineas quedan en una x al abrirlo gracias

[@angelperaltamorales6939]

También funciona colocando la etiqueta input en html...checkbox...un label...un id...etc...

[@armandogarcia925]

Muy buen video, me ayudo en mucho

[@galo7486]

Se llamaba Escuela Digital!!😱😱

[@GATSSilveR]

estimado , muybuennos aportes, una sugerencia crees posible saques vídeos explicando cómo hacer cambios y desarrollar algo más completo con admmin LTE , gracias

[@julianallegretti7557]

No se puede usar un display none en ves de las margenes negativas? buen videooo.

[@esaenz26]

Interesante ejemplo. Se agradece. Mi pregunta es si publicaras el codigo que modicaste en tu pagina web ? Saludos.

[@ohtm41]

Alvaro, este menu es multi-nivel?, como se puede hacer que cuando aparezca el menu, este desplace un poco hacia la derecha el contenido de la pagina y adicionar tenga un efecto de opacidad. Muchas gracias.

[@ajefersonstiv]

Quisiera saber como hacer para que al momento de dar scroll down no desaparesca o se pierda el menu. Gracias por sus tutoriales

[@alfredoro2664]

Muchas gracias nuevamente por tus explicaciones. Gracias a este video pude hacer mi trabajo. Tengo nada más una duda, veo que aquí usaste 'left' para que aparezca el menu. Hay alguna diferencia entre usar eso y transition X ?

[@TheGerarxD]

nose porque cuando pasa el mouse por el menú empieza a titilar a cada rato

[@luisenriquesanchezrodrigue7288]

Hola buena tarde... disculpa en el blog ya no esta disponible el menú.. aun es posible descargar los archivos? gracias muy buen video... gracias

[@L2CiberX]

me funciono muy buen video +1 sub y quisiera saber si sabes como hacer para q carge toda 1 web como lo hace mega y cuando termina de cargarla la manda al index para q no veas imagenes cortadas en loading saludos

[@Gerardinsky]

el que aparezca el menú si se puede hacer con css y htlm #menu-bar { display: none; } header label { float: right; font-size: 15px; margin: 15px 0; cursor: pointer; } .menu { position: absolute; top: 55px; left: 0; width: 100%; height: 100vh; background: rgba(51,51,51,0.9); transition: all 0.5s; transform: translatex(-100%); } .menu a { display: block; color: #fff; height: 50px; text-decoration: none; padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.5); } .menu a:hover { background: rgba(255,255,255,0.3); } #menu-bar:checked ~ .menu { transform: translateX(0%) }

[@saludyvidafuncional]

haa gracias, justo lo que esperaba!!!

[@rincondeautos4418]

otro video de estos broo para tus nuevos seguidores

[@ranzio_gfx3440]

necesito ayuda me titila todo cuando coloco lo de -18em y solamente cuando le paso el mause por arriba

[@ediacebo]

Saludos, y si hace uno igual pero con submenu??

[@RouAlbiazulRM4]

Hola una duda y como seria si le hicieras click fuera del nav y se oculte de nuevo el menu automaticamente

[@roycfc6301]

queria saber cuando le das click a cualquiera de las opciones el menu deberia cerrarse, pero en mi caso queda abierto pero me lleva a la opcion que solicite (pero el menu no deberia quedar abierto - para cerarlo tengo que darle al iconmenu para cerrarlo) como se puede solucionar ese tipo de problema gracias

[@mariopascal8184]

Muy buena explicación. Felicidades. Sólo un pero; javascript sin aditivos ya resuelve los eventos él solito. veo innecesario importar jquery, biblioteca que se debería evitar usar en lo posible. Me gusta mucho tu estilo pedagógico, eres de lo mejor en la red en cuestión de CSS. ánimo y enhorabuena por la reapertura de tu canal.

[@EDteam]

Ese canal es una copia asquerosa de este canal, de hecho comenzó haciendo seguidores copiando nuestros videos sin ningun reparo y tuvimos que amenzarlo para que deje de hacerlo, y entonces, oh casualidad, empezó a subir videos de PHP. Incluso luego que lanzamos el video de eventos click con CSS, el muchacho de ese canal empezó a decir que todo se podia hacer con css y los clicks con css y bla bla bla. Es decir, lo acababa de aprender y ya decia que se debia usar a pesar de que claramente dijimos que los clicks con css son más que todo una curiosidad, nada recomendable para proyectos reales. Si este canal les ha ayudado en algo, nunca nos comparen con un canal ladron. Y lleno de malas prácticas. No vas a comparar un canal con un experto de más de una década de experiencia con quien no tiene ni seis meses de experiencia y solo esperaba a que subieramos video para copiarselo. Ese tipo de gente debería desaparecer de nuestra industria.

[@EDteam]

mezclar las practicas de los dos? ese canal esta podrido de malas practicas, si quieres aprender de verdad css jamás sigas a ese canal.

[@EDteam]

Simplemente te digo que al otro canal tuvimos que amenazarlo para que deje de copiarnos. Pero si no lo entiendes es tu problema. Tenemos todas las pruebas. Si crees que robar contenido de otros (no conocimientos) sino contenido, hasta los ejemplos con puntos y comas le hace un beneficio a esta industria es que estas completamente mal. No digo que investigues nada, solo tener la coherencia de diferenciar lo correcto de lo incorrecto. Pero si no puedes, esto no es para ti. Hasta nunca.

[@fowmind5519]

Pero si todos sabemos que yo soy el mejor u.u :v

[@fernandolopez3476]

Muy bueno, tu video, podrías dejar el código fuente por algún sitio x favor...

[@juancamiloleonmora7939]

Hola , estoy configurando mi portafolio y tome de esquema tu tutorial de menu desplegable , pero tengo un problema con Js y no me funciona , pero todo lo demas en Html y Css funciona a la perfeccion , Utilizo Brackets para este desarollo; necesito tu ayuda para java script ! Muchas gracias !!

[@Terzaghi12]

no se si sabias pero con brackets tambien puedes hacer cambios en "vivo" mientras codificas, es un muy buen editor de codigo

[@EDteam]

Si lo sé, pero por defecto no tiene cosas que sublime sí y tenia que reaprenderlo, mientras que sublime lo tengo bien tuneado. Sin embargo, creo que es el editor ideal para que el que comienza en diseño web (HTML+CSS+JS)

[@sadaipinto3975]

hola amigo el sublime text no me acepta algunos codigos cuando estoy creando los estilos en css que me recomendarias...

[@luisenriquedg]

Pfff... que guapo eres (y muy inteligente :3 )

[@eduardofree9149]

Donde esta la la imagen de lo que hiciste?

[@proyectosbareloi]

hola podrias ayudarme a hacerlo multi nivel pues la idea era lo que buscaba pero no se como halo multi nivel por favor podrias ayudarme con algun tutorial o de alguna manera te agradeceria mucho

[@juanpablo_8]

Gracias :)

[@FernandoMXoficial]

Hola, como insertas rápidamente comentarios en sublime text?

[@danielalejandrocarrenobern9783]

se puede implementar dentro de un navbar?

[@MrCoonfeti]

Muy buenos videos (y )

[@AnaRodriguez2512.]

Saludos, no me aparece el icono de menu. Si alguien me puede ayudar por favor.

[@adrianjosegonzalezavila3717]

De casualidad donde puedo descargar los fuentes? al parecer ya no esta activa

[@GerardoRequiz]

buen dia amigo buen tuto quiero preguntar: YO TENGO UN MENU EL CUAL TIENE UNO DE LOS BOTONES UN SUBMENU PERO YO TENGO EL MENU SIN ESCONDERSE LO QUE QUIERO ES CUANDO TOQUE EL BOTON EL SUBMENU APAREZCA TAL CUAL LO HACE USTED PERO NO ME RESULTA TIENE QUE SER CON "NAV" OBLIGATORIAMENTE PORQUE LO HAGO CON UN "ID" QUE ES #SUBMENU Y EL OTRO SUBMENU.MOSTRAR PERO NO ME RESULTA ....ESPERO ME ALLA EXXXPLICADO :)

[@jonathangomez4692]

Muy buen vídeo, me podrías pasar el código por favor lo necesito urgente.

[@rcchannel9226]

alguien me podría ayudar? mi consola del .js no no reconoce este símbolo $..... :(

[@gilbertochavez7210]

Hola q tal, alguien puede ayudarme para insertar el icono ya q no me aparece porfavor

[@MrOlivermarketing]

exelente tutorial gracias estaba siguiendo unos tutoriales en otros canales pero es frustrante al terminar los tutoriales siempre tienen algun error las personas que suven sus videos. podrias hacer un tutorial de algun otro menu que sea full responsive pero horizontal muchisimas gracias.. por sierto tengo un problema realize un menu horizontal adaptable pero tiene un error del toggle te puedo pegar el codigo aki?

[@EDteam]

+oliver guzman dale, pega el codigo, en el canal hay un video de un video responsive con flexbox. buscalo.

[@MrOlivermarketing]

+Escuela Digital menuandroind inicio servicios submenu 1 submenu 2 submenu 3 submenu 4 portafolio submenu 5 submenu 6 submenu 7 submenu 8 contacto fin html empieza css *{margin: 0px; padding: 0px; box-sizing: border-box; font-family: sans-serif; } header{height: 50px; background: #2196f3; color: #cddc39; display: flex; display: -webkit-flex; justify-content: flex-end; -webkit-justify-content: } #btn-menu{ display: none; } header label{ font-size: 30px; cursor: pointer; display: none; } .menu ul{ background: #2196f3; display: flex; display: -webkit-flex; list-style: none; } .menu ul ul{ display: none;} .menu a{ display: block; padding: 15px 20px; color: #fff; text-decoration: none; } .menu a:hover{background-color: rgba(0,0,0,0.8); } .menu a span { margin-left: 10px; } .menu ul li:hover ul{ display: block; position: absolute; } @media (max-width:768px){ header label{display: block} .menu{ position:absolute; top: 50px; left: 0px; width: 85%; transform: translateX(-100%); -webkit-transform: translateX(-100%); transition: all 0.3s; -webkit-transition: all 0.3s; } .menu ul{display: block; background: #00bfa5;} .menu ul li:hover ul{ display: none; position: static; } .menu a span{ position: absolute; right: 10px;} #btn-menu:checked ~ .menu{ transform: translateX(0%); -webkit-transform: translateX(0%) } .menu ul ul{ background: #66bb6a } } /*fin css*/ funcion del js $('.sub').on('click', function () { $(this).children('ul').slideToggle(); }) $('ul').click(function(p){ p.stopPropagation(); }) su juegas con el menu en modo normal (destock) te dars cuenta del error muchas gracias por tu tiempo

[@estebancordoba555]

otra pregunta! 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.

[@felix9368]

Esteban Cordoba eso se podría hacer con Javascript. es sencillo

[@jdouloza]

¿Cómo lo harías? ¿Nos puedes enseñar?

[@felix9368]

seleccionas el body ... y a este le escuchas el evento click(); colocas una funcion que seleccione el mundo y le quite la clase mostrar o .active

[@jdouloza]

Soy nuevo en JavaScript y la programación no es que se me dé muy bien, pero veré qué puedo hacer. ¡Muchas gracias!

[@felix9368]

Douglas Loza mira para seleccionar un elemento con Javascript es asi: $(elemento).on('click', function(){ //elemento es el elemento body al que vas a seleccionar en este caso, el body });

[@JLP487]

GENIO! !

[@brayanaldana9141]

Muchas gracias por el aporte, pero como hago para que el menú se oculte en determinado tiempo de acceder a una pagina(automáticamente)? me parece que si se aplica esto seria muy dinámico. ^^

[@rbjmalca2]

Brayan Aldana con js

[@jorgepinzon4582]

Tienes Facebook para estar en constante contacto

como puedo hacer para que sea multinivel??

[@manuelgonzalez-yz4pf]

👌👌👌

[@estebancordoba555]

Amigo, espero respondas esta pregunta. Lo que sucede es que yo estoy sacando el menu del lado derecho, y le coloco righ -300px, para que se esconda el menu. veo que cuando la pantalla esta en el top, me sale la barra de scroll para la derecha y se ve que el menu solo se ha corrido, no se oculto. Como puedo solucionarlo?

[@EDteam]

Overflow hidden al body

[@estebancordoba555]

Si le coloco esa propiedad, no me deja hacer escrol para abajo. ya lo solucione igual, gracias.

[@AlexisSniffer]

+Esteban Cordoba como lo solucionaste?

[@estebancordoba555]

+Alexis Sniffer man, a mi me funciono cambiando el position absolute por fixed.

[@yojugando9030]

que editor de texto usa ? si se pudiera saber amigo :)

[@gstevenb1372]

sublime text xD

[@asturnebur]

podeis resubir el código?

[@reportajestv2117]

Profe, Es rentable la vida de un diseñador web?

[@jenniferpinzon8812]

no me sale para descargar el archivo :(

[@kenpachi5891]

comentas que no es posible realizarlo con css pero si que lo es utilizando labels y escondiendo menu

[@mikicho7]

y si quisiera hacer el menu del lado derecho.... no me sale jaja

[@YAcosta]

que paja estuvo esto. Gracias por compartir

[@MaskKrest]

i'm so sad :(

[@801yaoichan]

El cambio de clases no me responde ;; AUXILIO

[@adriangoa1]

mejorando.la

[@adriangoa1]

***** perdon,pense que era parte de los maestros de mejorando.la, es que estaba viendo sus videos y me salio este como relacionado y quise hacer un tag pero me falto la "+", mil disculpas

[@Caliunaciudadcircense1536]

Pésimo...!!

[@EDteam]

Cali una ciudad circense ¿por?

[@Caliunaciudadcircense1536]

No sós preciso en las explicaciones... !

[@EDteam]

Cali una ciudad circense es tu opinion. Creo que todos los demas piensan diferente.

[@sebacc92]

Escuela Digital Algunos piensan igual otros diferente. A mi me gusta tu forma de explicar porque no escribís el código de forma perfecta, sino que te van apareciendo esos pequeños problemas que vas resolviendo en el momento. Y a veces son esos pequeños errores que nos bloquean.

[@ichigoodk1031]

@@EDteam como hago para los comentarios css sin escribirlos y como ordeno el css de abajo para arriba como haces?

[@ichigoodk1031]

como hace eso para comentar y salgan los signos luego