Crear un menú horizontal desplegable con efectos solo con CSS

[@EDteam]

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

[@danielsanchez-mp7sl]

Lo colocaste el GitHub

[@AlejandroNuevo]

jajajaja, llegué este año a a EDTeam y no había visto esta "imagen" de antes... gran evolución!!!!

[@armandopozos4749]

Te agradezco Álvaro que te hayas tomado el tiempo de hacer este video ya que estoy dando mis primeros pasos con CSS y me parece entendible los términos utilizados.

[@GmLantis]

llevo 14 minutos y que bien explicado y organizado ! y sobre todo, a cada singolo paso! me encanta ! por fin entiendo

[@EDteam]

genial

[@engelbertjoseaguirresquino8687]

eres un crack amigo , apenas me estoy metiendo a aprender programación web y te entiendo mucho mejor que a mis instructores :D

[@ampzac]

Felicidades por la capacidad docente, eres una rara avis y se aprecia mucho! Explicar por qué se está haciendo algo es sumamente útil. Muchos aplausos y gracias por ayudar a entender cosas que no entendía! (p.e. los relative-absolute).

[@EDteam]

¡Muchísimas gracias! Nos alegra que te hayan sido de ayuda los vídeos.

[@bbriambbriam]

No solo explicaste el tema sino que tambien fuiste dando buenas practicas, excelente

[@diegogabrielramirez3528]

Alvaro la verdad que sos un excelente profesor!!!! hiciste sencillo algo que mi profesor la hizo larga. segui asi! muchas gracias!

[@wandelileger1321]

La mejor explicación que he visto ¡¡¡¡EXCELENTE!!!!

[@santiagofranco6926]

Alvaro, gracias por compartir tus conocimientos, mis felicitaciones excelente tus vídeos. saludos.

[@carlosfernandoramirezsandi7030]

Hombre muchas gracias, habia visto un mundo de tutoriales y este es el mejor, el que me ha servido y muy bien explicado.

[@patriayvida4209]

Junio 19/ 2021 >>>> GRACIAS POR COMPARTIR TAN INTERESANTE INFORMATION. OJALÁ Y PUEDA MEMORIZARLO TODO Y PONERLO EN PRÁCTICA. ODIO "COPIAR Y PEGAR",... ES COMO SI NO APRENDIERA NADA... SOLO COPIAR.

[@r4nd0m-k2z]

Que crack que sos, me ayudaste un montón, fuiste claro y limpio en tu explicación. Excelente!

[@christianbazalar8595]

Eres un capo, que limpio tu código, pocas líneas y ordenado.

[@christianbazalar8595]

Tengo una consulta, en el 2do nivel nav > ul > li > lu {top:100%;} es necesario?, no lo puse (para probar qué pasaba) y me ocurrió que en el tercer nivel nav ul ul ul {left:100%; top:0} fue necesario, si no lo ponía, el tercer nivel aparecía al lado del subitem 4.

[@jimmycruz3321]

Es justo el video que estaba buscando, eres un buen profesor, te felicito

[@ArturoHerrera89]

Como siempre ***** muy buena explicación en este video, como se dice en México eres "la ley" en CSS

[@MikelMineMikel_248]

Muy buenas. Genial video. El único problemilla que tuve es que al habilitar "nav li:hover > ul >li" no se me abre el apartado de Sub subitems

[@therokmanx8]

Excelente trabajo aunque me tomo mas de una hora pude hacerlo ! Muchas Gracias por enseñar !

[@aquilesarcetorres2190]

excelente profesor quisiera inscribirme en los cursos que dicta este docente explica muy bien y capte a la primera

[@codex8646]

minuto 16:38 y he solucionado una gran cantidad de dudas. Excelente explicacion.

[@EDteam]

¡Gracias!

[@fabianmp34]

Gracias Alvaro! Tu video es el mejor que encontré. Esta muy bien explicado. Ya me subscribí. Mucho éxito para ti!!

[@cesarmuzio1154]

Eternamente agradecido por sus videos, muchas gracias!

[@deividpolska4336]

Te felicito por la calidad de este video, excelente para aprender, gracias por explicar hasta el más mínimo detalle

[@henrymartinez8320]

Buen video. Una pregunta.¿Puedo reutilizar este video sin reclamos de copyright? @EDteam

[@gerardourzua8062]

Muy bien explicado el video !! estoy aprendiendo mucho, pero quiero saber como centrar el margen de los "subitem" al del "item" para que no quede cargado a la derecha, gracias de antemano !!

[@pablito.1972]

Excelente tutorial. ¿Podrías decirme que código hay que poner para que el menú principal no se abra automáticamente al posar el cursor sobre él y además como poner un scroll que sea funcional en el submenú principal? Muchas gracias.

[@ernestoarias3404]

Hola EDTeam gracias por enseñar y compartir excelente vídeo todo muy claro, muy bien explicado y un codigo muy limpio, ya me suscribí a tu canal.

[@noel.c0de]

Excelentes vídeos, soy un principiante y de verdad es muy entendible todo, como comentaron abajo, también me gustaría que pudieses hacer el tutorial de Emmet. Gracia y saludos

[@luisenriquedg]

Hola, que tal!! disculpa, cuál es el link para la 2da y 3ra parte de tu video?

[@blackmesa4188]

porque poner background en el nav > ul { , si cuando lo pongo en el nav > ul > li{ me pone background tmbn ????? en que cambia, en que salgo con desventaja ?

[@juancbr3061]

2021 y me ayudo perfecto, que buen video.

[@ArielGanc]

Excelente geniall me vino barbarooo .. ya q copiar y no saber q ni como hace...una genialidad

[@fimendraprogramadescensode7538]

Alvaro, muchas gracias por compartir tu experiencia, soy nuevo en esto, pero lo explicas bastante ordenado y claro. Tuve un solo problema al escribir el código que no se como resolverlo... uno de los sub items tiene el texto un poco más largo que el resto, y me modifica el tamaño del bloque en ese item, entonces con el hover, cuando paso con el mouse por ese item, se nota mucho y queda feo. ¿qué resuelve el tamaño de los items en los submenu?

[@VeronicaMolderia]

Lo hice y me salio solo tuve que cambiar una ul por li pero para que quede así tal cual esta porque quise hacerle algunas modificaciones como por ejemplo centrarlo y la verdad no pude es obvio que por falta de experiencia aunque últimamente aprendí muchísimo con todos los vídeos y paginas de horas y horas viendo para crear mi propio estilo y no quedarme con un solo menú. Igual para seguir aprendiendo muy bueno!!!

[@lucbischoff]

excelente explicacion muy claro y didactico, felicitaciones!

[@spike_wav]

que opinas de usar en lugar de display: table , usar position : absolute???

[@enzo1058]

gracias por este tutorial estaba mal acostumbrado a hacer menus con spry pero ahora se hacerlo de cero con css

[@javierrivadeneira.d7109]

ya cuando empezó a darle class="menu" alli se me comenzò a malograr todo..me sale item2 encima del item1 y los subitem y sub subitems aparecen y no se ocultan...

[@johnsailor3590]

por que float left y no display inline??

[@nanod1854]

Sos un genio, excelemte explicacion gracias por compartir tus conocimientos

[@santanaserratoscarlosarman3600]

Excelente tutorial, podrías explicar como utilizarlo ya con links, ya que al ponerle en mi caso, desaparece el menú y me muestra la pagina que mando llamar en cada opción. Es decir que no desaparezca el menú.

[@edwinramirez]

Yo uso Prepros para trabajar talvez ya lo conoces, Este programa me hace cambios en vivo si modifico cualquier archivo de mi web como: css,scss,less,styl, html,etc., Y lo más chevre es que me permite ver al mismo tiempo la web que estoy trabajando en teléfonos, tabletas, etc. Si hago un cambio en el cualquier archivo que este trabajando se refresca en todos los dispositivos que tenga abierto el archivo. Pero hace muchas cosas mas. Amo este programa, y es gratis solo hay que aguantar los anuncios que salen cada cierto tiempo como los que salen en sublime Saludos :)

[@edwinramirez]

Si exactamente ese, si trabaja también remoto es muy fácil configurarlo

[@KnightJK777]

edwin ramirez Una consulta, pero para poder ver esos cambios hay que estar dandole guardar al archivo en sublime verdad? y automaticamente se refresca, o estoy haciendo algo mal? porque tengo q darle guardar para q recien se actualize solo y vea el cambio.

[@edwinramirez]

si debes primero darle a guardar o ctrl + s al archivo que estas trabajando para ver los cambios en el navegador

[@JohnAlex1010]

Hola saludos, y primero que nada felicitarlo por la buena explicación que hace en los vídeos, y segundo es con respecto a este vídeo, como sugerencia podrías hacer que este menú sea responsivo?. seria de gran utilidad. Gracias de ante mano.

[@EDteam]

Actualmente estoy trabajando en ED menú, una librería css/js para crear menús responsive que será un componente de ED GRID. pronto lo tendré listo. Si ni no conoces el framework ED GRID puedes buscarlo en el canal. Saludos.

[@JohnAlex1010]

Escuela Digital gracias. Estoy revisando el framework y me parece genial. Espero que el menú tenga la por posibilidad de submenus y sub submenus. Me seria de gran utilidad. De nuevo gracias y exitos

[@napolunatico]

No entiendo en min: 10:15 como es que nav > ul "no tiene atura" y al darle un overflow: hidden; "ahora si tiene altura y rodea a los elementos 'li'??? Es decir, cómo es que al darle overflow: hidden el elemento ahora si contiene a los elementos que antes por estar flotando se habian salido de él? Gracias de antemano y Saludos.

[@RaulHernandez-pq3bi]

Ni Álvaro sabe!! XD

[@EDteam]

overflow:hidden es un hack famoso de hace muchos años para limpiar floats. El otro es display:table.

[@EDteam]

Si no se supiera, no estaría en el video.

[@RaulHernandez-pq3bi]

Perdón, perdón, no lo decía en mal sentido XD Lo decía por que tú mismo lo mencionaste en el curso de css cuando te preguntaron que por qué overflow: hidden; arreglaba eso, y tú mismo dijiste que no lo sabías por que overflow es para otra cosa que nada que ver XD

[@EDteam]

SemibetaProject pa que te digo que no si si 😊. Pero es un hack que se ha usado toda la vida para limpiar los floats.

[@alfonsomoyacervantes2348]

Buen día disculpen cual es ese programa que utilizó?

[@abcuuxyz]

Buen video, una consulta para que los cambios se muestren en el navegador con livestyle(así mencionaste creo) es presionando control + S o mientras vas escribiendo??

[@fernandomentaimaz2406]

Me ha venido muy bien este tutorial, muchas gracias por hacerlo. Tengo una pequeña duda, al poner una imagen debajo del menú, paso el ratón por el menú desplegable y la imagen se me baja. ¿alguna idea? gracias!

[@ProceseroMexicali]

Gracias... esto es más fácil de usar que los menús desplegables desplegables múltiples en materializecss y funciona dentro de materialisecss, modificando la etiqueta nav por alguna otra

[@123DESRAE]

UN BUEN VIDEO ...SE MERECE MANITA ARRIBA

[@rtcwkillz]

Creo que el efecto hover con transition no se ve con animacion. Creo que se debe a los prefijos para los navegadores.

[@konigdreizehn7945]

Muy bueno... Gracias Maestro. Me ha servido de mucho

[@bibliotecasanalesdeinvesti5027]

Genial hermano, Que bueno, Que Dios te continue dando este gran dón de compartir. Saludos, Raciel

[@yuicg9214]

GRACIAAAS ME SIRVIÓ DEMASIADO PARA MI TAREA, SUPER FÁCIL.

[@betoayza6620]

Cuál es el atajo para completar las palabras automáticamente en Sublime Text? O las completa solo?

[@jhonytantavaldez]

gracias me ayudo mucho , quisiera saber, como hacer para que el menú se muestre sobre otros elementos

[@Nekoffeedrinker]

Cuando por fin te enteras por qué se llama 'ED' y de paso te encuentras con el viejo Alvaro xd Por favor dime como le hiciste para ahora verte tan bien para poder hacer lo mismo. Excelente video, de mucha ayuda

[@freddygomez9203]

muy buen tutorial, favor indica como hacerlo responsive gracias

[@jiraya3525]

Hola muy buen vídeo. pero cuando haces la ventana del navegador mas pequeña se modifica el menú , el menú de horizontal pasa a vertical, algún código para que el menú se quede fijo? espero que me puedas contestar gracias.

[@jhonatanjavier9977]

precisamente lo que estaba buscando muchas gracias muy bien explicado

[@JCBILBAOC]

Buen video, tengo uan duda, como hago para centrar el menu??, ya intente con text align etc, gracias

[@jaem020]

Hola soy nuevo en tu canal me ha llamado mucho la atención la manera y facil de enseñar... espero me puedas ayudar cuando pones esta pequeña instrucción ul>li*5>a[href="#"]{Item $} se necesita de un plugin en sublime text para que al momento de ejecutar se cree todas las instrucciones ?? de ante mano muchas gracias.

[@yvankoteski8924]

+Jairo Alejandro Espejo Mendoza Seguí paso por paso, abri tu sublime text, presiona CTRL+SHIFT+P, te aparece un cuadro de texto, coloca install package control y dale enter, cuando termine de instalar, cerra y volve a abrir el sublime, despues presiona de nuevo CTRL+SHIFT+P y escribis emmet, le das enter y reinicias el sublime. Listo :)

[@jesusal2588]

+Yvan Koteski ¿Puede decirme el nombre del plugin que utiliza el? (hablo del que permite ver la pagina sin estar recargando). Gracias!

[@teenlems8125]

porque se fueron hacia la derecha los items si les dijiste que debian de flotar a la izquierda

[@ArielGanc]

una consulta quiero todo el menu de nivel uno alineado a la izquierda y al final del menu quiero poner dos menu en livel 1 q se alinean a la derecha .Ejemplo Salir. como lo logro?? graciasss

[@dasak3520]

Hola podrías explicar como haces para los atajos en html, por ejemplo cuando abres una etiqueta, como por ejemplo inmediatamente te sale . cuando abres una etiqueta ya automáticamente te te sale la estructura con la etiqueta ya cerrada ¿como se hace eso? pues sabiéndolo se hace muy rápido una estructura html

[@Soohable]

+Miguel Salinas Cardenas usa Eclipse IDE or Visual Studio

[@hack_crack]

Hola me gusta como marcha todo, pero no encuentro la continuación de los 2 videos que siguen Gracias

[@mateomino3d197]

una duda bro, ami los submenús me salen uno al costado del otro y no me salen de arriba para abajo

[@gleidermedina2598]

hola disculpa como ago si quisiera que en uno de los menus tengo 10 submenus, pero no quiero que los 10 se dezplacen verticalmente. Quisiera poner 5 debajo del menu y los otros 5 al lado derecho, como hacer un estilo de cuadro y no un rectangulo.

[@elchochaso]

pregunta como accedo al contenido de los item de ese menu

[@kris2920]

Como Haces Para Que cuando Guardas El Formato En El editor De Codigo Autómaticamente Se Carge En El Archivo De representación.

[@poln.s6220]

hola, ami me salio todo bien sin embargo en la barra opcion ÍTEM 2 me sale normal y cuando paso el puntero por el SUBITEM 3 OTROS sub subitems salen DEBAJO DE EL ya vi el codigo y nose no me resulta ayuda...

[@intoxicado32]

4:12 como se hace para escribir de esa forma??? yo utilizo visual studio code..

[@GhostlyTutoriales]

Mantienes presionado Ctrl y das clic en todas las lineas donde quieras situar el cursor de texto, yo uso Brackets y me funciona de esa manera. Ahora en el video se ve como que lo arrastra o bueno así lo veo yo, la verdad no se como lo hizo yo simplemente doy clic a todas las lineas manualmente.

[@canherMAD]

y la versión en responsive? eso mismo pero responsive?

[@manumelgar8534]

en que editor de texto lo realizo?

[@carlosvalderrama5495]

Buenas amigo una pregunta si las opciones de mi menu están en orto documento php. com hago para que el menu este siempre fijo y pasen cada una de mis opciones que están elaboradas en otro documento php href no sirve por que el menu desaparece y pasa al la pagina que invoco desde el href gracias por tu respuesta

[@mauriciobaez1971]

Muy bueno el tutorial, pero al hacer el menu y coocarlo dentro de un de bpptastrap se desconfigura todo.. como soluciono eso. gracias

[@carlosortuzar8243]

Hola Alvaro, espero que este bien . Estuve viendo el menú y me entro una duda, cuando haces la transición, ¿por que dices que solo funciona con max-height en lugar de height?. Yo hice algunas pruebas y funciona mas fluido con height que con max-height, además si le das tiempos mayores a un segundo, ocurre que los subitems se despliegan muy rápido y se contraen lento, al contrario que con height, donde la transicion es constante. Saludos, espero que me respondas.

[@juanantoniotrilloromero8024]

¡Buenísimo! Muchas gracias.

[@fernandoaquinogonzalez2512]

Hice todos los pasos, sin embargo al mostrar el segundo nivel no me los muestra en forma horizontal, en el sub item 1 del item 2 hace un salto de linea, a continuacion pone los items y luego otro salto de linea para poner finalmente los items "padres"... qué estoy haciendo mal?

[@bichofeo666]

Impecable! Muchas gracias.

[@francoespinozaromero4857]

quería decir que el comando de display:block, no me obedece, que debo hacer...?

[@ncanepa]

Hola! Como puedo centrar este menu?

[@CamunareRojoalberto1980]

como hacer lo de la multiplicación dela ul lo estaba haciendo pero no sale cuando le doy enter

[@jhonmejias3937]

excelentemente explicado, ha sido de mucha ayuda

[@cyberprotips]

Alvaro, editor utilizas?

[@brymontumonterotuesta7875]

hola una pregunta. por que cuando hago todo de la etiqueta del menu no me sale en horizontal

[@danielgonzalesllanos7349]

Hola Alvaro, muy buen video, tengo una pregunta usaste float: left y tu menu se ubico a la izquierda, ahora si lo quisiera poner el menu a la derecha con float como haria? puse el float:right. pero se me desordena el menu comienza de atras pa adelante

[@hardcoreware164]

simplemente excelente... eso son BPP bien aplicadas... me encanto

[@sadaipinto3975]

amigo a mi no me agarro el efecto ese que colocaste, hay varias cositas que he intentado pongo los codigos correctamente y no me funciona no se si sera por el sublime text o que... como haria para centrar el menu y colocarlo al nivel del logotipo ??

[@AntonioBalam]

Excelente video, gracias por digerirlo y darnoslo masticado. Saludos y bendiciones

[@yemsy1698]

Una pregunta bro, Por que cuando intento hacer un slider debajo de nav Se daña el Algo en el nav?

[@ministerioriosdeagua]

y los archivos fuentes...para jugar un poco con ellos

[@milagroscaceres3332]

Tremendoo!!! muy bueno!

[@gabogabans]

donde esta la segunda parte del video? para hacerlo responsive?

[@diegogabrielramirez3528]

Hola, se que este video es de hace mucho pero como recién lo empecé a ver me quedo una duda, porque en el segundo nivel puso LI LI y no LI UL LI?? osea porque salteo el UL?? porfavor contéstenme gracias!!!

[@todolinux9821]

gracias por lo de display: table, me solucionastes la vida amigo jajajaj

[@josedavidpenaortega4516]

socio como hago eso en dreamweaver pero un menu donde el no baje mientras me despliego hacia bajo

[@pauljoelticlavilcagutierre3572]

Sos un genio brother mil felicitaciones

[@marketingmr6050]

excelente, sin tanto cóodigo, muchas gracias

[@angelarbelaez3371]

Buen video, la segunda parte de este video aun no ha salido ???