Crear menú desplegable con css3

En este tutorial vamos a crear un elegante menú desplegable con css3, crearemos un efecto muy agradable utilizando transition para darle movimiento a nuestro menú, además utilizaremos otras propiedades como border-radius y los pseudo clases after y before para aplicar algunos efectos. Es algo sencillo será una lista desordenada con items anidados los cuales acomodaremos con css y lo dejaremos a nuestro gusto, empecemos.

El menú se visualizara correcta mente en todos los navegadores, solo que los navegadores antiguos que no soporten animaciones de css3 y algunas otras propiedades que utilizaremos no tendrán ese elegante menú que crearemos, pero de todos modos les funcionara.

Menu desplegable con css3

1. Estructura HTML

Para empezar crearemos un archivo HTML con la estructura básica, lo nombramos domo.html o como quieras.

Dentro de las etiqueta <body> pega el siguiente código de la lista desordenada para la estructura del menú.

Como puede notar es un menú desplegable de solo un nivel, la lista hija les agregamos un class=children para referirnos directamente a ella, no es obligatorio pero lo hago así para evitar conflicto, solo agrego el código necesario para el menú, cada uno que lo adapte a su necesidad

2. Estilos para el menú principal

Ahora aplicaremos los estilos necesarios para la lista

3. Sombra inferior del menú

Crearemos una sombra a la ul de primer nivel utilizando las pseudo-clases (:after – :before) para crear las sombras de cada lado del menú, pero antes de crear las sombras ocultaremos momentáneamente la lista secundaria para que no estorbe agregando display:none a la ul.children

Ahora crearemos la sombra utilizando los pseudo-clases antes mencionadas, agregando el siguiente código css

Hasta este punto tenemos terminado el primer nivel del menú, en los siguientes pasos trabajaremos con el segundo nivel y aplicaremos algún efecto con transition de css3.

Estilos para el menú segundo nivel

Lo normal en un menú desplegable con css es aplicarle al sub-menú un display:none y en su estado :hover le aplicamos display:block para mostrarlo, de esta forma aparece sin ningún tipo de efecto, con css3 podemos animar varias propiedades para que al apareces tenga algún efecto agradable a la vista, en nuestro caso no utilizaremos la propiedad display:block, si no que animaremos el alto(height) y su opacidad, miremos el código necesario para esto.

Hasta este punto el menu de segundo nivel se encuentra oculto ya que aplicamos una altura de 0 (height:0px) y una opacidad:0.

Mostrar con efecto el segundo nivel

Para mostrar la lista de segundo nivel aplicaremos una altura y una opacidad distinta cuando se pase el ratón por encima de una de las listas de primer nivel del menú, el código css necesario para esto es el siguiente.

La altura es el único inconveniente a este sistema que he utilizado para animar esas propiedades, lo mas normal seria aplicar una altura en auto para que se adapte al contenido, pero la altura en auto no se anima con transition, con este mismo método se pueden animar las propiedades css y conseguir efectos muy interesantes

Conclusión

Como pueden notar es el mismo sistema que utilizamos desde antes que aparecieran las nuevas propiedades css3, solo que ahora podemos agregar una pequeña animación y efecto de transparencia que hacen que el menú tome un plus a la hora de ser mostrado.
espero que el tutorial le sirva de algo, es un tutorial bastante sencillo pero seguro que a alguno le servirá.

Un Saludo

¿Que te ha parecido este artículo? Dejanos tu valoración...

HorribleMaloBuenoMuy BuenoExcelente (3 votes, average: 3,33 out of 5)
Loading...Loading...

  • José Carlos

    Excelente amigo, esta muy bonito el efecto que hace al desplegarse el menú, Gracias.

  • http://miguelms.16mb.com/ Miguel

    Enhorabuena por el tutorial, muy bueno.

  • http://gravatar.com/remanencia remanencia

    Esta genial , pero al seguir los pasos no me sali el efecto mencionado. Descargue el Archivos Base y pude notar que en el ejemplo no hiciste mencion al Contenedor DIV cuyo ID era CONTENEDOR y dentro de los archivos BASE haces mencion a un LI de #buscador , la verdad aque hace referencia dicho ID.

    Gracias por el aporte ;
    me guiare con el archivo Base para tomar la muestra.

  • http://gravatar.com/remanencia remanencia

    Habia otro detalle que me olvidaba, era que dentro de la lista ARTICULOS => el elemento VIDEOS contiene otra LISTA la cual tiene por elemento a Diseño Web que no se visualiza

  • http://jordanopolanco.com jordano_p

    @remanencia, el DIV contenedor no lo mencione por que cada uno debe colocar el menú dentro del contenedor que quiera, utilice este div solo para colocarlo en posición para este tutorial.

  • http://twitter.com/Gaminganet Gaminga (@Gaminganet)

    hola amigo quisiera hacer algo como esto http://www.newdivx.net/index.php el boton de catalogo que al dar click se baja pero se mueve todo el contenido pues cone stos el menu se pone ensima

    • http://jordanopolanco.com jordano_p

      Tienes dos opciones, o crearlo con CSS3 animando la propiedad display:block; de el div que se oculta o utilizando una de las tantas formas que tiene para mostrar y ocultar objetos con jQuery.

  • Raul

    que tal amigo oye tengo una duda lo que pasa es que lo exporte a dreamweaver y cuando inserto una tabla o algun otra cosa el menu ya no me funciona es decir cuando paso el puntero al los submenu desaparece y no puedo seleccionarlo espero me resuelvas mi duda pronto gracias

    • http://jordanopolanco.com jordano_p

      Me imagino que lo que quieres es agregar contenido debajo del menú, entonces te recomiendo te olvides de las tablas, se que es más fácil hacerlo con tablas.

      debajo del ul del menú agregas un div, a ese div le aplicas estilos para que quede debajo del menú y dentro de este div ya puedes trabajar sin problemas.

  • http://tiendasmaxishop.com ozzysosa

    Excelente tu tutorial, ahora quisiera saber como hacer eso mismo pero colocarle algún icono a cada palabra, como para darle más vida… Saludos

    • http://jordanopolanco.com jordano_p

      Puedes agregar iconos a las lista utilizando css, por ejemplo con este código.

      Esto es solo una idea, luego tienes que adaptarlo a tu proyecto, he puesto estos valores pero quizás a ti te vienen mejor otros.

  • http://www.english-time.es Antonio

    Muchas gracias por este fantástico tutorial

  • http://www.english-time.es Antonio

    Tengo un problemilla, y es que con IE8 no me habre los desplegables, con el resto de navegadores funciona bien.
    Muchas gracias.

    • http://jordanopolanco.com jordano_p

      En IE8 no soporta las animaciones de css3, lo que debes hacer es para ese navegador utilizar la función animate() de jQuery y de esa forma ya tienes soporte.

  • http://www.english-time.es Antonio

    Como se aplica esa función?. Soy novato y no se nada de jQuery.

  • http://www.adharaweb.com.ar Adhara Web

    me gusto mucho muy bueno

  • massiel

    hola me gusto muxo pero kisiera saber como crear sub menus con este mismo ejemploo :( …!!!

  • http://www.facebook.com/josecruzchavez10 Jose Cruz Chavez

    my bueno tu tutorial. me agrado el efecto de sombra que le agregaste al menu. con respecto a la animacion, el alto general del segundo nivel el un problema, pero no se le podría agregar un alto a cada li de segundo nivel, asi, se lograrian ocultar los sub menu que queramos, aun no he probado esto, pero veré si es posible.

  • http://jordanopolanco.com jordano_p

    Ahora que mencionas esto he buscado una solución más profesional, y no se como no se me ocurrió antes.

    Como esta el menú actual mente tenemos el problema de que el alto fijo del sub menu puede causarnos más de un dolor de cabeza, para resolverlo he agregado en el apartado que animamos la propiedad height del sub menu.

    Código actual:

    Código mejorado:

    Con esto ya no tienes que preocuparte por el alto de las etiquetas li ni el sub menú.

    • Hanna

      No me ha funcionado solo con el min-height. Al final he tenido que poner:
      min-height:100px;
      height: auto !important;
      height: 250px;
      Muchas gracias por este gran tutorial. Aún me falta conseguir que en IExplorer 9 no se “escape” el cursor cuando quiero pasar por encima de algún submenú, pero estamos en ello…. :-)

  • luciano

    hola, soy nuevo con el tema del css, tengo un pequeño problema para hacer que el sub menu quede por ensima de un div que esa debajo.
    por ejemplo:
    aca esta el menu
    aca esta el div que tiene que estar por debajo del sub menu

    desde ya gracias!.

    • http://jordanopolanco.com jordano_p

      Todo depende amigo, por lo general esto lo puedes solucionar agregando a los div implicados una posición relativa y poner un z-index mayor al div que necesites que este encima.

      • luciano

        muchas gracias amigo, me sirvio lo que me dijiste.

  • Hanna

    Otra pregunta:
    mis submenús, tienen un texto muy ancho y se me cortan…por ejemplo:
    “Informe acumulado de ventas anual”
    Qué propiedad tengo que cambiar para que se ajuste en automático al ancho? O si no es posible en automático…donde le puedo poner un ancho fijo??

    Muchas gracias de nuevo.

    • Hanna

      Me auto-respondo, por si le sirve a alguien más:

      #contenedor ul li ul {/*Estilos de la lista secundaria*/
      width: 350px;

      #contenedor ul li ul.children li a{
      width: 330px;

      Genial.

      • http://jordanopolanco.com jordano_p

        Gracias por responderte, efectivamente con colocar un ancho fijo al sub-menú ya se cortan las listas a este ancho.

  • http://josethiago88 jose vicente

    hola…como estas bueno la verdad no me sirver nada de los efectos y la lista secundaria porke nisikiera se desplega la segunda lista..pero la primera funciona bien su hover el color el tamaño pero mi problema como lo dije anteriormente es que no se me muestra la segunda lista ni tampoco sus efecto….estoy utilizando el dreamweaver cs6. por favor si alguien puede ayudarme..a resolver este problema..gracias de antemanoss

    • http://jordanopolanco.com jordano_p

      La lista secundaria se despliega con esta linea de código:

      Si no te funciona busca esta línea y verifica que la ruta utilizada es la correspondiente a tu HTML.

  • giovanni

    Excelente, he leido algunos tutoriales (como pasar de psd hasta Wp y los encuentro excelentes!! solo tengo una duda con esto, se puede aplicar este tipo de menu desplegable para WordPress? en el ejemplo de la plantilla usado en el otro tutorial, saludos y muchas gracias!!!

    • http://jordanopolanco.com jordano_p

      Sin ningún problema puedes crear tu menú en wordpress y aplicar estos estilos, solo debes ver los ID y las clases correspondientes generadas con wordpress y adaptar el código css a ello.

  • http://gravatar.com/panafff panafff

    Muy bonito el menú y bien hecho el tutorial, felicidades! Para Info sobre el tag en https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

  • Ricardo Izquierdo

    Excelente tutorial ahora y tengo un problema con un tercer menú por ejemplo productos tiene tres submenús categoría. productos y pedidos y categoría tiene 4 submenús nuevo, listado, modificar, eliminar asi como el menú productos he estado intentando modificar el css para que me permita mostrarlos pero me ha dado mas de un dolor de cabeza espero me puedas ayudar

    • http://jordanopolanco.com jordano_p

      Puedes añadir cuantos niveles quieras, solo debes aplicar css especifico para posicionar cada nivel.

  • http://www.pedia-tips.jimdo.com ruben vargas

    tengo una pagina de tips de pediatria les puse un menu de tres niveles pero no he podido hacer q el cuarto nivel se repliegue, si me puedes ayudar te lo agradeceria. envio mi correo, por hay mandaria el codigo q uso a ver si me ayudan funciona solo hasta 3 niveles. viajafull@gmail

    • http://jordanopolanco.com jordano_p

      Debería de ver como lo estás implementando para poderte ayudar.

  • http://SmartSonic Erick Reyes

    Que tal, verás la pagina web de mi empresa tiene una “plantilla” online para modificarla, desde ahí estoy intentando implementar los css, pero por una razón u otra no me los está aplicando(suponiendo que lo estoy haciendo correctamente dentro de esa plantilla), me podrías algún consejo(estoy dispuesto a comunicarme via correo electronico el tema)

    Gracias!

    • http://jordanopolanco.com Jordano Polanco

      Hola Erick,

      Para poder ayudarte tendría que ver el código que estás utilizando y como lo estás implementando en tu web.

      • http://SmartSonic Erick Reyes

        Gracias por tu respuesta. Ya lo he podido hacer y me quedo como excelente.
        Ahora bien, tengo el detalle que cuando inserto el contenido o creo otro elemento, el menú tiene problemas para desplegarse, o de plano, no me deja seleccionar ningún elemento del submenu, algo como mencionó.>Luciano< y me gustarias me explicases mejor tu respuesta hacia él. Gracias. Saludos!

  • alberto

    hola q tal tengo um menu desplagable y quiero colocarle un buscador que cuando despliege me muestre el buscador y pueda escribir el dato a buscar. como lo hago?

    • http://jordanopolanco.com Jordano Polanco

      Hola @Alberto,

      Esto lo puedes hacer fácil mente, solo agregas otro elemento

    • en el menú y dentro de este li agregas el buscador.
      Te recomiendo que hagas pruebas de usabilidad con el buscador, porque no sé si cuando el usuario este escribiendo o quite el foco del ratón del elemento li que despliega el sub-menu este puede que se oculte, con lo cual esto es un problema.

      Te dejo un enlace para que veas un ejemplo: http://codepen.io/Polanco08/details/bmeoc/

  • http://gravatar.com/felixlaura911683964 felixlaura911683964

    Buen tutorial sobre menu desplegable css. En esta pagina tambien hay un articulo sobre menu desplegable con cuadro de busqueda. Tiene demo y descarga del codigo gratis.
    http://www.cattutorial.com/css/menu-desplegable-con-cuadro-de-busqueda-en-html-y-css3/

  • AntonioG

    Hola, muchas gracias por tu tutorial, porque es genial. A partir de él estoy intentando hacer el mío pero necesito que haya un tercer nivel desplegable y no lo consigo. Te pongo el código por si le puedes echar un vistazo.
    HTML:

    ESORIB

     
     
     

    INICIO

    QUIENES SOMOS

    ¿Qué es BBBBB?
    Equipo directivo
    Equipo Docente
    Administración
    Sedes

    POSTGRADOS

    Masters

    FIRST LIST 1
    FIRST LIST 2
    FIRST LIST 3

    Especialización
    Programas
    Diploma Universitario

    INSCRIPCIÓN
    PUBLICACIONES

    Artículos y Publicaciones
    Resúmenes
    Publicación de libros

    LABOR DENTAL

    Artículos
    Evaluación

    NOTICIAS
    CONTACTO
    Nota Legal

    CSS:
    /* CSS Document */
    body {
    margin:0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    color: #000000;
    background: #b11e15 url(img/bg_patterns.png) repeat;
    }
    #header {
    clear: both;
    background-color: #2571C4;
    margin-top: 12px;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 2px;
    }

    #contenedor {
    margin: 0px 40px;
    background: #666666;
    text-align: center;
    clear: both;
    }

    #contenedor ul {
    text-align: left;
    width: 100%;
    background: #999;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    list-style: none;
    position: relative;
    float:left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    background-color: #999;
    }
    #contenedor ul li {
    display: block;
    float:left;
    position: relative;
    }
    #contenedor ul li#buscador {
    float: right;
    position: relative;
    }
    #contenedor ul li a {/*Listas primer nivel*/
    font: 13px Arial, Helvetica, sans-serif;
    color: #fefefe;
    text-decoration: none;
    display: block;
    float:left;
    padding: 11px;
    }
    #contenedor ul li a:hover, #contenedor ul li a.active {/*Estado Hover/Activo de los enlaces*/
    background: #8d8d8d;
    color: #1A4EA1;

    }
    #contenedor ul li ul {/*Estilos de la lista secundaria*/
    margin: 0px;
    padding: 0px;
    width: 150px;
    height: 0;
    float: left;
    position: absolute;
    left: 0px;
    top: 38px;
    border: 0;
    opacity: 0;
    filter: alpha(opacity=0); /* Internet Explorer*/
    overflow: hidden;
    background: #8d8d8d;
    z-index: -2;
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    }
    #contenedor ul li ul.children li a{
    color: #fefefe !important;
    padding: 13px 0 13px 20px;
    width: 130px;
    border-bottom: 1px solid #a0a0a0;
    background: url(img/arrow-normal.png) no-repeat 7px center !important;
    font-size: 12px;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    #contenedor ul li ul li:last-child a{border-bottom:none !important;}
    #contenedor ul li ul li a:hover{
    color: #1A4EA1 !important;
    padding-left:28px;
    background: url(img/arrow.png) no-repeat 15px center !important;
    }

    #contenedor ul li:hover ul.children{height:230px;opacity:1;}

    #contenedor ul#menu:before{
    /* Posiciona la sombra por detras del color de la caja*/
    z-index: -1;
    position: absolute;
    /* no aplico ningún contenidos HTML */
    content: “”;
    /* posiciona la sombra con respecto al izquierdo y superior */
    left: 10px;
    top: 45%;
    /* configura el ancho */
    width: 97%;
    height: 18px;
    /* color de fondo */
    background: #999;
    /* definicion de la sombra estandar para box-shadow */
    box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);

    }
    #contenedor ul li ul#menu:before,#contenedor ul li ul#menu:after{visibility:hidden;}

    #contenedor ul li ul li ul {/*Estilos de la lista tercera*/
    margin: 0px;
    padding: 0px;
    width: 150px;
    height: 0px;
    float: left;
    position: absolute;
    left: 150px;
    top: 0;
    border: 0;
    opacity: 0;
    filter: alpha(opacity=0); /* Internet Explorer*/
    overflow: hidden;
    background: #8d8d8d;
    z-index: 1;
    border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    }
    #contenedor ul li ul li:hover ul.children2{height:230px;opacity:1;}

    #contenedor ul li ul li ul.children2 li a{
    color: #fefefe !important;
    padding: 13px 0 13px 20px;
    width: 130px;
    border-bottom: 1px solid #a0a0a0;
    background: url(img/arrow-normal.png) no-repeat 7px center !important;
    font-size: 12px;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }

    Muchas gracias otra vez

  • golimar

    Hola, muy bueno! gracias! me podrias decir como hago para que al seleccionar algún texto del submenú (o en algunos casos, el menu, ya que no tiene submenu) quede seleccionado ese tab donde estoy parado? gracias.