Menú desplegable con HTML5 y CSS3

Esto es sólo el inicio. Conviertete en un Profesional del Frontend y domina HTML5, CSS3 y Javascript.

En este tutorial haremos un menu desplegable con HTML5 y CSS3. Una de las buenas cosas de olvidarnos de IE6, es que podemos crear simples menús desplegables, sin necesidad de usar Javascript, ya que el selector ":hover" funciona en todos los elementos.

Estructura del "index.html":

Código :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Menú Desplegable Vertical y CSS3</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
   <nav>
      <li class="parent"><a href="#">Cristalab</a>
         <ul>
            <li><a href="#">Blogs</a></li>
            <li><a href="#">Foros</a></li>
            <li><a href="#">Tutoriales</a></li>
            <li ><a href="#">Cursos</a></li>
         </ul>
      </li>
      <li><a href="#">Mejorando.la</a></li>
      <li><a href="#">L4C</a></li>
      <li class="parent"><a href="#">Mas de Cristalab</a>
         <ul>
            <li><a href="#">Publica un tutorial</a></li>
            <li><a href="#">¿Qué es Cristalab?</a></li>
            <li><a href="#">Anime</a></li>
         </ul>
      </li>
   </nav>
</body>
</html>

Hasta aquí, todo esta muy claro, pero si tienes alguna duda puedes visitar la Introducción a HTML5.

Ahora el CSS2, no necesitas nada del 3 por ahora. Todo es igual a construir un menú común y corriente, pero pon atención al final.

"style.css"

Código :

body{
   font-size: 25px;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
nav{
   width:300px;
   margin: 5% auto;
   background: #EEE;
}
nav li{
   list-style: none;
   position:relative; /* importante, para que el submenu tome la posición correcta*/
}
nav li a{
   color:#666;
   text-decoration:none;
   padding: 5px;
   display:block;
}
nav li a:hover{
   color:#08D;
}
nav li.parent:hover{
   border:1px #ccc solid;
   margin:-1px;
   background:#F8F8F8;
}
nav li li a{
   width:250px;/*el ancho de los links del submenu, debe ser fijo, esto servirá para crear la animación mas adelante */
   display:block;
}
/* aquí esta lo importante!! */
nav li ul {
   width: 250px;
   margin:0;
   display:none;
   background:#F8F8F8;
   border:1px #ccc solid;
   position: absolute;
   left: 100%;
   top:-1px;
}
nav li:hover ul {
   display: block;
}

El truco es muy fácil, basta con crear un submenu en la forma hover, para luego desaparecerlo con display:none; . Y con ayuda del selector :hover volverlo a aparecer. Muy fácil!!!

Y por último agregamos una animación con CSS3, esta parte es la confusa.

Código :

nav li ul {
      width: 0; /*Cambiamos la linea */
   margin:0;
      /*display:none; Lo Eliminamos */
   background:#F8F8F8;
   border:1px #ccc solid;
   position: absolute;
   left: 100%;
   top:-1px;
   
   overflow:hidden; /* Para evitar Que se salgan los links */
   z-index:-1;/*El Submenu tiene que ir atras, para evitar que los 0 pixeles causen problema al :hover*/ 
   
   opacity: 0; 
   filter: alpha(opacity=0); /* Internet Explorer*/
   -webkit-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s;/* Chrome, Safari*/
   transition: opacity 0.2s ease-in  0.3s, width 0.4s ease-in 0.3s;/* Navegadores CSS3 */
   -moz-transition: opacity 0.2s ease-in  0.3s, width 0.4s ease-in 0.3s; /* Firefox 4 */
   -o-transition: opacity 0.2s ease-in 0.3s, width 0.4s ease-in 0.3s; /*Opera */
}
nav li:hover ul {
      /*display:block; Lo Eliminamos */
      
   width: 250px; /*La animación de 0 a 250px*/
      
   opacity: 1;
   filter: alpha(opacity=100);/* Internet Explorer*/
   -webkit-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Chrome, Safari*/
   transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s;/* Navegadores CSS3 */
   -moz-transition: opacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Firefox 4 */
   -o-transition: oopacity 0.1s linear 0s, width 0.3s ease-out 0s; /* Opera */
}

Explico la propiedad transition

opacity la propiedad a la que le deseo realizar la transición.
0.2s el tiempo que tarda la animación.
ease-in especifica la curva de la velocidad del efecto.
0.3s el número de segundos de espera antes de que el efecto se inicie.

Demo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Por carlosssasd el 29 de Diciembre de 2011

Nunca lo he podido hacer sin Javascript, muy buen tutorial.
Por Manuel el 29 de Diciembre de 2011

Buen ejemplo pero tiene un problema, cuan pasas el mouse encima del elemento principal muestra el elemento secundario hasta aca todo bien pero cuando mueves el mouse hacia este, desaparece, probado en Chrome 16 stable y FF 9.0.1 , en FF he de aclarar que ciertos elementos secundarios si mantienen menu abierto al ubicarse sobre ellos pero otros no , en Chrome del todo ningun sub menu funciona
Por Manuel el 29 de Diciembre de 2011

Perdon, olvide mencionar que el problema se encuentra a la hora de aplicar la animacion en CSS3 al sub menu , sin el funciona perfecto
Por The Fricky! el 29 de Diciembre de 2011

Muy bien, sólo un detalle: la etiqueta nav no es un reemplazo de las listas, así que aún te falta un "ul" que envuelva los items de la lista principal.
Por Alivan el 29 de Diciembre de 2011

Quita el z-index:-1; de nav li ul para que se mantenga el submenú.
Por Alivan el 29 de Diciembre de 2011

Oh, cierto, no se puede. Pero si puedes añadir z-index:1; en nav li:hover ul
Por alexandra el 30 de Diciembre de 2011

es muy bueno el menú pero pierde el foco intentando entrar entrar en alguno de los submenus, probado en FF.9.0.1
Por gcm el 30 de Diciembre de 2011
Hay que regresar el submenu, para el frente, si no no quedan funcionando los links jejejeje
Código :
```
nav li:hover ul {
        z-index:1000;
}
```
Gracias The Fricky!, por la observación, espero la tomen en cuenta todos...
Osea que la etiqueta nav solo es para reemplazar el div que colocaríamos, hmmm es que yo acostumbraba hacerlo con un <ul id="menu">
Por The Fricky! el 30 de Diciembre de 2011

Exacto, la etiqueta nav establece dónde estará la sección de navegación. Es el equivalente a <div id="nav">
Entiendo tu confusión porque yo suelo hacer lo mismo, pero de esta manera, <nav> no se limita a que tenga que ser una lista de enlaces y sigue siendo semántica.
Por manuel el 31 de Diciembre de 2011

Excelente
Por samuraiweb el 05 de Enero de 2012

Con razón me funcionaba el demo, pero no el código a la hora de copiarlo, excelente aporte gracias
Por kiko_fredy el 10 de Enero de 2012

¿Yo puedo hacer una pregunta totalmente basado en mi ignorancia? jejejeje

Es que apenas empiezo a involucrarme en este mundo del html y me pierdo facilito

y si quiero el menú horizontal y que el deplegable se abra hacia abajo y no hacia el lado ¿como hago?

Espero que la pregunta no sea demasiado tonta. ¡Gracias!
Por kiko_fredy el 10 de Febrero de 2012

Creo que quien hizo este tuto ya no anda por acá.... sin embargo insisto en mi pregunta, si alguien puede ayudarme a resolver esa duda, se lo agradecería.
Por gcm el 15 de Febrero de 2012

kiko_fredy :
Creo que quien hizo este tuto ya no anda por acá.... sin embargo insisto en mi pregunta, si alguien puede ayudarme a resolver esa duda, se lo agradecería.

Hola Kiko_fredy.

Hacerlo horizontal, es un tema aparte, te recomiendo que te leas un poco mas de CSS.
Un día de estos saco tiempo y hago la segunda parte del tuto.
Por Isaac el 13 de Julio de 2012

¡¡¡¡Muy bueno!!!!
¿Como es para que los submenus queden alineados a la izquierda en vez de en medio y darles padding como el menu? Gracias!!!
Por el 24 de Julio de 2012

eso menu desplegable en html5 y animacion css3 es muy bueno, ahora si quiero que los submeno tambien sean vertical y no horizontal como lo hago¿
Por chespiro el 11 de Septiembre de 2012

yo hice todo, casi casi copié el codigo de esta página, pero no tengo la misma animacion que sale en el ejemplo. Mi menú es estático y aparece cuando paso el cursor, pero no de esa forma (deslizandoce), tampoco desaparece así. en que estoy mal, o sera que lo estoy probando en chrome??
Por Pablo10 el 25 de Septiembre de 2012

Como se le podrá agregar un nivel mas, cosa que aparescan otro submenu.??
Por criticon el 04 de Octubre de 2012

Le hubieras dado mas estilo al menu
Por cesc1989 el 23 de Noviembre de 2012

Excelente tutorial. Gracias!
Por Jesueto el 16 de Mayo de 2013

La transición no lo hace como en un demo. Cómo ahí qué?
Por juanfran el 23 de Mayo de 2013

va bien por ahora en todos los navegadores, excepto como casi siempre en el explorer que no realiza la transición
Por JS el 04 de Junio de 2013

ven como entre todos se optimizo el codigo!!
Por bdtique el 05 de Septiembre de 2013

Tengo un problema con la union de codigo de html5 y css... yo pongo la etiqueta <link rel="stylesheet" type="text/css" href="style.css" /> sin embargo no me funciona.. generalmente apenas estoy aprendiendo este tema de la programación web.. me gusta mucho y quisiera q me dieran una ayudita o un consejo para arreglar ese problema ..
Por Linton el 15 de Noviembre de 2013

Me pasa igual que a chespiro: no hay ninguna animación, copiando todo el código del tutorial. Simplemente el submenú aparece y desaparece.
Por lauura el 04 de Marzo de 2014

su demo no se veee
Por walter el 31 de Marzo de 2014

funciona perfecto. lo adapté al diseño que necesitaba y va de 10. pero no funca en IE
Por alberto el 27 de Abril de 2014

hola tengo un menu desplegable y quiero colocarle un buscador de manera que cuando despliegue me muestre el buscador y pueda escribir y hacer la busqueda. como lo hago. gracias
Por supersuper el 08 de Febrero de 2015

Hola, quisiera alinear el menu a la derecha.. algunos que dicen que use float, pero se que en html5 no se debería.. que debo hacer.. gracias
Por Gema el 28 de Marzo de 2015

Gracias por el tutorial, he incluído el menú en mi página y va de cine.
palaciodeverano.tk (en la pestaña Menú). También os hago un enlace desde la pestaña "Diseño", espero que no os importe, si es así, lo suprimiría o lo modificaría conforme me indiquéis.
Gracias otra vez!
Por pepe el 16 de Abril de 2015

Deberias de solucionar la demo, no tiene acceso a la url del recurso.
Gracias.
Por veronica el 03 de Junio de 2015

hola hice mi menu pero al momento de usar los links del submenu no me salen unicamente cuando les doy click derecho pensé que era el ordenador pero la abrí en varios y pasa lo mismo me puedes decir que puede estar pasando y como lo podría solucionar?
Por Carlos el 12 de Agosto de 2016

el demo no funciona, esta caido el link
Por Nick Endo el 14 de Octubre de 2018

¿Cristalab no tiene un administrador que modere los comentarios? Entre el SPAM y el enlace de la demo, que no lleva a ningún lado, mal, muy mal.
Por solisarg el 15 de Octubre de 2018

EL post original es de Mie Dic 28, 2011 9:26 pm, es decir tiene 7 años, probablemente el autor ya ni se dedique a lo mismo y haya dado de baja el sitio donde tiene su tutorial, nadie esta obligado a mantener sus enalaces para siempre. El Spam lamentablemente es consecuencia de dejar los comentarios siempre abiertos, pero estamos trabajando en ello. Por lo pronto, cerramos este hilo.

Saludos !

Menú desplegable con HTML5 y CSS3

Publica tu comentario

o puedes...