1. Objetivo
Vamos a crear un menú de navegación "con cajones". Los "cajones" son cajas <div> que aparecerán progresivamente cuando se pase el cursor sobre un elemento del menú.
Este ejemplo ha sido creado a partir del sitio web CSS3CREATE (en francés): http://www.css3create.com/Menu-avec-slider-effet-transition
2. La estructura del menú de navegación
El menú de navegación se encuentra dentro de un elemento section con un ID, en una lista ul. Cada etiqueta del menú se encuentra insertada en un elemento li de la lista, en un vínculo a.
<section id="menu">
<ul>
<li>
<a href="#" class="enlace">Manzanas</a>
</li>
<li>
<a href="#" class="enlace">Peras</a>
</li>
<li>
<a href="#" class="enlace">Plátanos</a>
</li>
<li>
<a href="#" class="enlace">Fresas</a>
</li>
</ul>
</section>
Las cajas <div> de los cajones se encuentran dentro de los elementos li. En el ejemplo, estas cajas <div> presentan un elemento de encabezado h3 y un párrafo p.
<section id="menu">
<ul>
<li>
<a href="#" class="enlace">Manzanas</a>
<div>
<h3>Las manzanas</h3>
<p>Nullam id dolor id nibh ultricies vehicula ut id
elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor.</p>
</div>
</li>
<li>
<a href="#" class="enlace">Peras</a>
<div>
<h3>Las peras</h3>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas faucibus mollis interdum. Maecenas
sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</li>
<li>
<a href="#" class="enlace">Plátanos</a>
<div>
<h3>Los plátanos</h3>
<p>Sed posuere consectetur est at lobortis. Donec
ullamcorper nulla non metus auctor fringilla.</p>
</div>
</li>
<li>
<a href="#" class="enlace">Fresas</a>
<div>
<h3>Las fresas</h3>
<p>Donec id elit non mi porta gravida at eget
metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</li>
</ul>
</section>
3. El diseño del menú
El diseño del menú se ha obtenido con los estilos CSS habituales. ¡Si usted prefiere, puede "adornarlo" un poco más!
body {
font: .8em Verdana, Arial, Helvetica, sans-serif;
}
#menu {
width: 100px;
padding: 20px;
border: 1px solid #333;
background-color: #ccc;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
width: 70px;
height: 20px;
margin: 0 0 30px 0;
}
#menu ul li:last-child {
margin: 0;
}
#menu ul li a.enlace {
position: absolute;
z-index: 100;
display: block;
text-decoration: none;
color: black;
}
4. El diseño de los cajones
Las cajas <div> de los cajones han sido posicionadas (position: absolute) y se sitúan en 0 (left: 0 y top: 0). Los cajones no son visibles (overflow: hidden) y tienen una opacidad de 0 (opacity: 0). Por último, los cajones tendrán un ancho inicial igual al ancho de la lista ul (width: 100px), para evitar que estén activos cuando accedamos a la página y que "se salgan" por el lado derecho del menú.
#menu ul li div {
position: absolute;
z-index: 50;
left: 0;
top: 0;
width: 100px;
height: 120px;
border: 1px solid #fff;
opacity: 0;
background-color: black;
padding: 15px;
overflow: hidden;
color: white;
text-align: right;
}
Para evitar un efecto molesto de acordeón en los párrafos p de los cajones, vamos a imponerles desde el principio un ancho fijo.
#menu ul li div p {
width: 300px;
}
5. La visualización inicial
Así se visualizará inicialmente el menú de navegación:
6. Las transiciones
Queremos que cuando se pase el cursor sobre un vínculo, el cajón aparezca progresivamente, que pase de transparente a opaco y que se desplace hacia la derecha.
En el estilo de la caja <div>, debemos añadir la propiedad transition para todas las propiedades CSS posibles (all), con una duración de 1 segundo (1s) y un movimiento de aceleración (ease-in).
#menu ul li div {
position: absolute;
z-index: 50;
left: 0;
top: 0;
width: 300px;
height: 120px;
border: 1px solid #fff;
opacity: 0;
background-color: black;
padding: 15px;
overflow: hidden;
color: white;
text-align: right;
/* Las transiciones */
-moz-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
Esas transiciones tendrán efecto cuando se pase el cursor (:hover) sobre los elemento li del menú de navegación y se aplicarán a las cajas <div>. La cajas se desplazarán de 90 píxeles hacia la derecha y la opacidad pasará a 1.
#menu ul li:hover div{
left: 90px;
opacity: 1;
}
7. La visualización
Inicialmente, si el cursor no se encuentra sobre ninguno de los vínculos, podremos ver el menú de navegación sin más:
Cuando se pase el cursor con el ratón sobre un vínculo, el cajón aparecerá progresivamente y se desplazará hacia la derecha con el ancho especificado:
Al final del período de tiempo especificado, el cajón será totalmente visible:
Cuando se quite el cursor del vínculo, el cajón recuperará sus parámetros iniciales y dejará de ser visible.
8. Los menús de navegación "flashy"
Estas son dos URL en las que encontrará ejemplos de menús muy "flashys", que usted podrá adaptar en función de lo que necesite:
- http://tympanus.net/Tutorials/BlurMenu/index.html
- http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index6.html
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario