Crear Menú Desplegable Animado con Css3

enero 15, 2013 | Html5 & Css3, Recursos

En este breve tutorial, vamos a crear un menú desplegable de colores utilizando sólo CSS3 y fuentes de icono. Una fuente icono es como su nombre lo indica, un tipo de letra que se asigna a personajes iconos en lugar de letras. Esto significa que usted obtiene bonitos iconos vectoriales en cualquier navegador que soporte HTML5 fuentes personalizadas. Para añadir iconos a los elementos.

El HTML

index.html

<nav id="colorNav">
 <ul>
 <li class="green">
 <a href="#" class="icon-home"></a>
 <ul>
 <li><a href="#">Dropdown item 1</a></li>
 <li><a href="#">Dropdown item 2</a></li>
 <!-- More dropdown options -->
 </ul>
 </li>

<!-- More menu items -->

</ul>
</nav>

Cada elemento del menú principal es un hijo de la lista superior desordenada. En su interior hay un enlace con una clase de icono, y otra lista desordenada, que se mostrará como un menú desplegable en vuelo.

El CSS

Como se puede ver en el fragmento de código HTML anterior, hemos visto listas desordenadas anidados en el “ul” principal, así que tenemos que escribir nuestro CSS con precaución. No queremos que el estilo de la  “ul” superior en cascada en los descendientes. Por suerte, esto es precisamente lo que el hijo selector en el css necesitará ‘> ‘ mira el CSS siguiente:

assets/css/styles.css

#colorNav > ul{
 width: 450px;
 margin:0 auto;
}

Esto limita el ancho de los márgenes y las declaraciones sólo a la primera lista desordenada, que es un descendiente directo de nuestro #colorNavTeniendo esto en mente, vamos a ver qué los elementos del menú, siguiente aspecto:

#colorNav > ul > li{ /* will style only the top level li */
 list-style: none;
 box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
 display: inline-block;
 line-height: 1;
 margin: 1px;
 border-radius: 3px;
 position:relative;
}

Estamos estableciendo un inline-block de modo que los elementos de la lista se muestran en una sola línea, y estamos asignando una posición relativa para poder compensar el bloque correctamente.

#colorNav > ul > li > a{
 color:inherit;
 text-decoration:none !important;
 font-size:24px;
 padding: 25px;
}

Ahora podemos seguir adelante con las listas desplegables. Aquí vamos a definir una animación de transición CSS3. Vamos a establecer un máximo de altura de 0 píxeles, que se oculta en el menú desplegable. En vuelo estacionario, vamos a animar la altura máxima a un valor mayor, lo que hará que la lista que se revela gradualmente:

#colorNav li ul{
 position:absolute;
 list-style:none;
 text-align:center;
 width:180px;
 left:50%;
 margin-left:-90px;
 top:70px;
 font:bold 12px 'Open Sans Condensed', sans-serif;

/* This is important for the show/hide CSS animation */
 max-height:0px;
 overflow:hidden;

-webkit-transition:max-height 0.4s linear;
 -moz-transition:max-height 0.4s linear;
 transition:max-height 0.4s linear;
}

Y este es el dispara la animación:

#colorNav li:hover ul{
 max-height:200px;
}

El valor 200px es arbitraria y que tendrá que aumentar si su lista desplegable contiene una gran cantidad de valores que no encajan. Desafortunadamente, no hay manera con css para detectar la altura, así que tenemos que codificar la misma.
El siguiente paso es el estilo de los actuales desplegables artículos:

#colorNav li ul li{
 background-color:#313131;
}

#colorNav li ul li a{
 padding:12px;
 color:#fff !important;
 text-decoration:none !important;
 display:block;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
 background-color:#363636;
}

#colorNav li ul li:hover{
 background-color:#444;
}

#colorNav li ul li:first-child{
 border-radius:3px 3px 0 0;
 margin-top:25px;
 position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
 content:'';
 position:absolute;
 width:1px;
 height:1px;
 border:5px solid transparent;
 border-bottom-color:#313131;
 left:50%;
 top:-10px;
 margin-left:-5px;
}

#colorNav li ul li:last-child{
 border-bottom-left-radius:3px;
 border-bottom-right-radius:3px;
}

estamos yendo a ninguna parte sin algunos colores de fantasía! Aquí hay 5 versiones:

#colorNav li.green{
 /* This is the color of the menu item */
 background-color:#00c08b;

/* This is the color of the icon */
 color:#127a5d;
}

#colorNav li.red{ background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{ background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{ background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{ background-color:#df6dc2;color:#9f3c85;}

Un aspecto versátil de la utilización de fuentes de icono, es que se puede cambiar el color del icono, simplemente se declara una propiedad de color. Esto significa que todas las personalizaciones que puede querer hacer se puede hacer con CSS solo .
By: Martín Angelov.

Pueden ver la demo, y también la descarga de los archivos (contraseña: antocas.com)
También te puede interesar este menu desplegable básico

Relacionados