Ir directamente al contenido de esta página

Replicando el comportamiento de la barra de navegación de Apple.com

Hace unos días mi socio Jorge Fernández me preguntó si podría replicar el comportamiento de la barra de la página de Apple empleando la menor cantidad posible de JavaScript. Imagino que se esperaba alguno de mis scripts en menos de 2Kb, pero el resultado no ha ido por ahí…

En la barra de navegación de Apple, cuando un usuario hace clic sobre el buscador, la caja del mismo se expande para ofrecer un poco más de espacio al texto de búsqueda, lo cual es un detalle de usabilidad muy de agradecer. Al ampliar el tamaño del buscador, los vínculos de la navegación, en consecuencia, disminuyen su anchura. Visto así, el script debería:

  1. Asignar dos eventos en el input, uno en el estado focus y otro en el estado blur, para activar la animación que amplie o reduzca el campo.
  2. Lanzar una función encargada de la animación, la cual debe tener en cuenta el tamaño inicial y final de cada vínculo y del formulario de búsqueda, y aumentar o reducir los mismos de manera progresiva.

En principio no es demasiado complejo, pero como dije en una entrada anterior, para este tipo de efectos son mucho más eficientes las animaciones de CSS3. Así que el resultado se basa en ellas, lo que ha reducido considerablemente la cantidad de JavaScript necesario.

La parte de CSS

Para crear la barra de navegación, en lugar de flotar los ítems de la lista, hemos aplicado los valores de tablas de la propiedad display, porque tienen la ventaja de que podemos asignarles inicialmente un ancho, pero posteriormente el navegador tiene la capacidad de adaptar los tamaños de las celdas en función de sus contenidos, como hace con las tablas de HTML.

La idea era que a medida que el input del formulario se fuera extendiendo, la falsa celda crecería con él… pero no. El comportamiento real cuando sólo aplicábamos las reglas…


input{
  […]
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  -ms-transition:.5s;
  transition:.5s;
}

input:focus{
  width:250px;
  […]
}

…no era el deseado: los navegadores esperaban a que la transición hubiese finalizado para redibujar el elemento padre. Es decir, la caja del formulario se expandía superponiéndose progresivamente al vinculo de su izquierda, para que después sin transición el resto de elementos de la barra se cuadraran ajustándose al nuevo tamaño.

Después de unas cuantas pruebas comprobé que lo que necesitaba era el formulario que contenía el input tuviese la misma transición asociada, para que se expandiera de manera sincronizada. Y en este punto es cuando necesité añadir JavaScript, porque el elemento form no acepta el evento focus.

La parte de JavaScript

El script, visto lo anterior, sólo tenía que asignar al formulario el ancho final cuando el usuario activa el input. Además, sólo debía activar las propiedades de transición de CSS para el campo del formulario en caso de tener JavaScript activado, por evitar el efecto indicado anteriormente; es decir, esto:


var n = {
  $: function(x){
    return document.getElementById(x);
  },
  soporte: function(){
    var pre = ['css','Moz','webkit','o','ms'];
    for(var i in pre){
      if(eval('n.$('b').style.'+pre[i]+'Transition')!==undefined){
        var s = true;
      }
    }
    return s;
  },
  ini: function(){
    if(n.soporte){
      n.$('b').className='trans';
      n.$('b').onfocus = function(){
        n.$('f').className='activo';
      }
      n.$('b').onblur = function(){
        n.$('f').className='';
      }
    }
  }
}
window.onload = n.ini;

Como se ve, el script sólo comprueba las condiciones para sincronizar el comportamiento del formulario y su input: la animación queda a cargo de CSS.

Como nota final, indicar que hay una limitación: como siempre que se quiere que el navegador aplique una transición de una propiedad de longitud, hay que indicar la medida en unidades absolutas, por lo que sería difícil emplearlo con una composición fluida.

Esta entrada se publicó el 25 de noviembre de 2011, se archivó en CSS, JavaScript, y fue etiquetada como , . Autor: Saúl González Fernández. Aún no hay comentarios ›.

Comentarios

Aún no hay comentarios

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2012