16
Oct 2013

Menú de navegación
con transiciones

Ahora que la mayoría de los navegadores comienza a tener un mejor soporte para las transiciones de CSS3, nos permite aplicar estas propiedades para jugar con el diseño e interacción de elementos en nuestros sitios, a pesar de que no todas las propiedades son soportadas de la misma manera con la ayuda de preprocesadores podemos crear nuestros estilos y lograr el mejor soporte posible. En esta ocasión utilizaremos las transiciones para animar el menú de navegación.
menu

Reducir el uso de scripts.

Sabemos que un objetivo primordial al desarrollar un sitio es que esté optimizado para que se despliegue lo más rápido posible en el navegador. Una mala costumbre que se ha desarrollado en los últimos años  es el abuso de javascript, o mejor dicho, de jQuery. Es fácil utilizar scripts para manipular las propiedades de los elementos que componen  la estructura HTML ( hide(), show(), fadeIn(), fadeOut(), css(),etc.), muy práctico, pero la realidad es que realizar estas acciones por medio de jQuery invierte tiempo de procesamiento de lo que toma hacerlo desde CSS.

Con reducir el uso de scripts, nos referimos a utilizarlos eficientemente para monitorear elementos e interacciones con los elementos, y de acuerdo a ello aplicar clases a los elementos. De esta forma agregamos valores a la estructura HTML (clases o identificadores de CSS) sin necesidad de calcular valores.

El menú de navegación

En el siguiente ejemplo el objetivo es crear un menú que se encuentre fuera del área visible del navegador u oculto, con el fin de aprovechar el espacio disponible para enfocarnos al contenido.

Para el ejemplo usaremos la siguiente estructura:

HTML

<button class="boton-menu"> Menú</button>
<div class="menu">
<ul class="lista">
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
</ul>
</div>

El elemento “.button” será el  encargado de activar y desactivar la visibilidad de nuestro menú, el contenedor del menú (clase .menu) nos permitirá posicionar nuestra lista de elementos en el lugar que deseemos. La clase “.lista” la usamos como referencia, aunque bien podríamos eliminarla y referirnos a la etiqueta “ul”.

Ahora aplicaremos los estilos:

CSS

button{
position: fixed;
width: 60px;
height: 60px;
border-radius: 50%;
bottom:20px;
left: 60px;
background-color: #fff;
}
.menu{
border-radius: 50%;
width: 400px;
height: 400px;
position: fixed;
bottom: -180px;
left: -110px;
}
.lista li a{
position: absolute;
display: block;
color:white;
background-color: #249531;
box-shadow: 0px 0 2px #000;
width: 35px;
height: 15px;
border-radius: 50%;
text-decoration: none;
font-size: 8px;
text-shadow: 1px 1px #000;
padding: 30px 20px;
}

Aquí hemos posicionado el botón en la esquina inferior izquierda del navegador,de la misma forma movemos el contenedor de la lista cerca del boton, a los elementos de la lista se les ha definido un tamaño especifico, además de aplicarles un color de fondo y las esquinas se han redondeado a un 50% para que tengan forma circular. Se ha aplicado padding a los enlaces para que el area para hacer clic ocupe todo el contenedor. Ahora procedemos a ocultar los elementos:

CSS

.lista li{
list-style: none;
position: relative;
width: 50px;
height: 50px;
text-align: center;
border-radius: 50%;
padding: 5px;
transform: scale(0.1);
}
.lista li:first-child{
top: 120px;
left: 30%;
transition:all 0.2s ease;
}
.lista li:nth-child(2){
top:55px;
left: 30%;
transition:all 0.4s ease;
}
.lista li:nth-child(3){
left: 30%;
transition:all 0.6s ease;
}
.lista li:nth-child(4){
left: 30%;
top: -55px;
transition:all 0.8s ease;
}

En lo anterior hemos aplicado una transformación de los elementos, se redujo su tamaño y se posicionaron detrás el botón para que estén ocultos. Lo siguiente es definir los estilos para los elementos visibles, la manera de que estos se apliquen es utilizar javascript (en este caso jQuery) para activar y desactivar la clase cada vez que se presione el botón.

CSS

.lista li.active{
transform: scale(1) rotateZ(0deg);
z-index: 50;
}
.lista li:first-child.active{
top:-10px;
left: 20%;
}
.lista li:nth-child(2).active{
top: -70px;
left: 45%;
}
.lista li:nth-child(3).active{
top: -80px;
left: 64%;
}
.lista li:nth-child(4).active{
top: -60px;
left: 75%;
}

Con estos estilos, cada que se presione el botón los elementos aparecerán en pantalla y se escalaran a tamaño normal; para fines demostrativos las posiciones de los elementos se han aplicado de manera forzada,  hay maneras más eficientes de realizarlo ( transform-origin, translate()). La propiedad “transition” tiene la finalidad de indicar el tiempo que tardara en reflejarse el cambio de una propiedad CSS, como hemos aplicado el parámetro “all”, todos los estilos que se modifiquen tendrán cierto tiempo de retraso. Aunque podríamos indicar específicamente a que propiedades afectar, si ponemos el nombre de la propiedad y valor en segundos del retraso separados por comas.

CSS

.ejemplo{
transition: height 1s, width 0.8s;
}

Al usar las transiciones el movimiento es más fluido, cada elemento  de la lista posee valores distintos en sus transiciones, modificando el tiempo de cada uno podemos lograr efectos visuales distintos.

Finalmente por medio de jQuery, simplemente aplicamos una función que se active al dar clic al botón:

Javascript (jQuery)

$('.boton-menu').click(function(){
$('.lista').toggleClass('activo');
$('.lista li').toggleClass('activo');
$('.overlay').toggleClass('activo');
if($('.lista').hasClass('activo')){
$(this).text('Cerrar');
}else{
$(this).text('Menú');
}
//NOTA: usamos jQuery para ilustrar de manera rápida
//cómo hacerlo, se puede crear la misma función sin usar
//jQuery, empleando simple javascript con document.querySelecter();
//y addEventListener()
});

La función “toggleClass” detecta automáticamente si el botón está activo  o inactivo y de esa forma agregamos  o quitamos la clase “activo” de los elementos que serán afectados por las transiciones. Las últimas líneas son una condicional, verificamos si la lista se encuentra activa o no y dependiendo de ello cambiamos el texto del botón.

Como pueden observar  en la página de ejemplo las transiciones nos permiten crear efectos llamativos de una manera sencilla sin requerir de librerías que incrementen el peso de nuestro sitio o el tiempo de procesamiento. Este ejemplo es sencillo, pero con el mismo método podemos crear interfaces más complejas que permitan mejorar la experiencia del usuario al interactuar con un sitio. ¿De que otra manera aplicarian esto, barras de progreso, páginas de carga? La creatividad es el límite.

Por: Arturo Tadeo / Diseño web

Deja un comentario

DOTTO