Comunidad de diseño web y desarrollo en internet online

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate