Crear un menú horizontal desplegable con efectos solo con CSS
Vložit
- čas přidán 14. 01. 2015
- CSS es el lenguaje que hace a la web hermosa. Sin CSS los sitios web y aplicaciones móviles se verían feos y aburridos.
Toma nuestro curso de CSS desde cero (gratis) 💻 ed.team/cursos/css y crea sitios webs hermosos.
Inscribete al curso: escuela.digital/
Visítanos en nuestra página web escuela.digital
Síguenos en Facebook: escuela.digital/facebook
Síguenos en Twitter: escuela.digital/twitter
Únete a la comunidad Escuela Digital en Facebook:
escuela.digital/comunidad
Aprende a crear sitios web hermosos con CSS 🤩
*Nuestro curso es completamente gratis* , tómalo aquí 🎁 ed.team/cursos/css
Lo colocaste el GitHub
jajajaja, llegué este año a a EDTeam y no había visto esta "imagen" de antes... gran evolución!!!!
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.
Alvaro la verdad que sos un excelente profesor!!!! hiciste sencillo algo que mi profesor la hizo larga. segui asi! muchas gracias!
Alvaro, gracias por compartir tus conocimientos, mis felicitaciones excelente tus vídeos.
saludos.
No solo explicaste el tema sino que tambien fuiste dando buenas practicas, excelente
Hombre muchas gracias, habia visto un mundo de tutoriales y este es el mejor, el que me ha servido y muy bien explicado.
llevo 14 minutos y que bien explicado y organizado ! y sobre todo, a cada singolo paso! me encanta ! por fin entiendo
genial
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
Te felicito por la calidad de este video, excelente para aprender, gracias por explicar hasta el más mínimo detalle
eres un crack amigo , apenas me estoy metiendo a aprender programación web y te entiendo mucho mejor que a mis instructores :D
Gracias Alvaro! Tu video es el mejor que encontré. Esta muy bien explicado. Ya me subscribí. Mucho éxito para ti!!
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).
¡Muchísimas gracias! Nos alegra que te hayan sido de ayuda los vídeos.
precisamente lo que estaba buscando muchas gracias muy bien explicado
La mejor explicación que he visto ¡¡¡¡EXCELENTE!!!!
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.
Que crack que sos, me ayudaste un montón, fuiste claro y limpio en tu explicación. Excelente!
Genial hermano, Que bueno, Que Dios te continue dando este gran dón de compartir. Saludos, Raciel
buena clase excelente tu forma de explicar .
Eres un capo, que limpio tu código, pocas líneas y ordenado.
gracias por este tutorial estaba mal acostumbrado a hacer menus con spry pero ahora se hacerlo de cero con css
Sos un genio, excelemte explicacion gracias por compartir tus conocimientos
Eternamente agradecido por sus videos, muchas gracias!
Excelente video, gracias por digerirlo y darnoslo masticado. Saludos y bendiciones
Excelente geniall me vino barbarooo .. ya q copiar y no saber q ni como hace...una genialidad
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.
me encanto el video muy bien explicado y pude hacer lo que queria y muy entendible muchas gracias
Es justo el video que estaba buscando, eres un buen profesor, te felicito
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...
excelente explicacion muy claro y didactico, felicitaciones!
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
2021 y me ayudo perfecto, que buen video.
Muy bien amigo eres bueno explicando, ya me subscribi! espero mas vídeos.
gracias por lo de display: table, me solucionastes la vida amigo jajajaj
Excelente, muy bien explicado y todo, muy muy muy bueno, gracias, muchas gracias.
Excelente trabajo aunque me tomo mas de una hora pude hacerlo ! Muchas Gracias por enseñar !
genial, espero los otros 2 tutos y porfa también haz un tuto sobre los atajos o trucos interesantes de emmet
minuto 16:38 y he solucionado una gran cantidad de dudas. Excelente explicacion.
¡Gracias!
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
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!!!
excelente profesor quisiera inscribirme en los cursos que dicta este docente explica muy bien y capte a la primera
Como siempre ***** muy buena explicación en este video, como se dice en México eres "la ley" en CSS
exelente video aprendi bastante muy buena explicacion
que buen tutorial!! buen docente!! Gracias!!
Gracias, asi si se entiende, muy bien explicado.
simplemente excelente... eso son BPP bien aplicadas... me encanto
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?
ahora lo entendí Alvaro... Gracias ...
Muchas gracias amigo, lo haces ver fácil. !!!
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 ?
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??
Muy bueno...
Gracias Maestro. Me ha servido de mucho
Hola, que tal!! disculpa, cuál es el link para la 2da y 3ra parte de tu video?
excelentemente explicado, ha sido de mucha ayuda
Muchas gracias por el videotutorial!
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
Excelente hermano....
Saludos y exitos...
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 !!
muy bueno
me ayudo mucho gracias
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
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.
Buen video, la segunda parte de este video aun no ha salido ???
GRACIAAAS ME SIRVIÓ DEMASIADO PARA MI TAREA, SUPER FÁCIL.
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
Creo que el efecto hover con transition no se ve con animacion. Creo que se debe a los prefijos para los navegadores.
¡Buenísimo! Muchas gracias.
Buen video, tengo uan duda, como hago para centrar el menu??, ya intente con text align etc, gracias
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.
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.
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ú.
Sos un genio brother mil felicitaciones
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 ??
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.
Buen video. Una pregunta.¿Puedo reutilizar este video sin reclamos de copyright? @EDteam
excelente, sin tanto cóodigo, muchas gracias
por que float left y no display inline??
pregunta como accedo al contenido de los item de ese menu
socio como hago eso en dreamweaver pero un menu donde el no baje mientras me despliego hacia bajo
donde esta la segunda parte del video? para hacerlo responsive?
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.
que opinas de usar en lugar de display: table , usar position : absolute???
muy buen tutorial, favor indica como hacerlo responsive gracias
Buen día disculpen cual es ese programa que utilizó?
excelente saludos desde argentina !!!
poderia fazer esse menu responsivo?
hola una pregunta.
por que cuando hago todo de la etiqueta del menu no me sale en horizontal
Bien explicado, Gracias
una duda bro, ami los submenús me salen uno al costado del otro y no me salen de arriba para abajo
gracias me ayudo mucho , quisiera saber, como hacer para que el menú se muestre sobre otros elementos
Como Haces Para Que cuando Guardas El Formato En El editor De Codigo Autómaticamente Se Carge En El Archivo De representación.
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!
como hacer lo de la multiplicación dela ul lo estaba haciendo pero no sale cuando le doy enter
Muy bueno el tutorial, pero al hacer el menu y coocarlo dentro de un de bpptastrap se desconfigura todo.. como soluciono eso. gracias
gracias me ayudaste un monton..
hola estoy aprendiendo a programar y el ejemplo de menu horizontal me interesa mucho, tendrias un video igual pero narrado paso a paso,gracias
Me gustó mucho. Gracias.
una pregunta quisiera saber si esto peude funciona en wix
Que tal si haces un video con este mismo proyecto y lo haces responsive, menú horizontal responsive, please
Una pregunta bro, Por que cuando intento hacer un slider debajo de nav Se daña el Algo en el nav?
Cuál es el atajo para completar las palabras automáticamente en Sublime Text? O las completa solo?