Cómo construir un menú de navegación de estilo de lámpara de lava

Hace un par de semanas, creé un screencast que demostró cómo construir un menú de navegación de tres niveles. En un correo electrónico de respuesta, uno de nuestros lectores solicitó un tutorial sobre cómo crear un menú de estilo de lámpara de lava. Afortunadamente, es una tarea bastante simple, especialmente cuando se utiliza una biblioteca de JavaScript. Vamos a construir uno desde cero hoy.

Prefiero un Screencast?

Paso 1 Crea el Marcado

Antes de poder crear esta funcionalidad nítida, necesitamos una base desde la cual trabajar. En su editor de código favorito, cree una lista desordenada para su navegación e importe jQuery y jQuery UI, a través de Google.

     SpasticNav Plugin      Casa
 Acerca de
 Blog
 Más sobre mi cartera
 Contacto

Note cómo le dimos una identificación de "seleccionado" a la página de inicio. Esto es bastante estándar en la mayoría de los sitios web; permite utilizarlo para apuntar a la página actual y diseñar ese elemento de la lista en consecuencia.

A continuación, debemos decidir cómo implementar mejor la funcionalidad de la lámpara de lava. Para permitir la reutilización, empaquetaremos este pequeño script en un complemento y lo llamaremos así:

 $ ('# nav'). spasticNav ();

Desde que decidimos crear un complemento, avancemos y creamos un nuevo archivo para ese script, y lo referenciamos en nuestro marcado. Lo llamaremos jquery.spasticNav.js.

Paso 2 Comenzando el Plugin

Para reducir el número de variables globales que debemos crear, así como eliminar cualquier posibilidad de que el símbolo $ choque con otras bibliotecas de JavaScript, envolvamos nuestro complemento en una función anónima autoejecutable.

 (función ($) ) (jQuery);

Ahora, jQuery se pasará a nuestro complemento y se representará mediante el símbolo $.

A continuación, generalmente es una buena práctica dar a los usuarios del complemento la mayor flexibilidad posible. Como tal, les daremos la opción de pasar un objeto literal cuando llamen al complemento para anular un puñado de configuraciones. Como yo lo veo, deberían ser capaces de:

Establezca la cantidad de superposición para nuestro pequeño blob. Esto se refiere a cuánto el blob excederá la altura del menú de navegación.
Establecer la velocidad
Establecer un restablecimiento, lo que hace que el blob regrese al elemento de la página actual (suponiendo que el usuario nunca haga clic en un enlace)
Establecer el color de la burbuja. Esto se puede lograr con CSS, pero es una buena conveniencia, sin embargo.
Establecer la opción de suavizado.

Ahora, nombraremos nuestro complemento y lo haremos igual a una función. $ .fn es simplemente un alias para jquery.prototype.

 $ .fn.spasticNav = function (options) ;

Sabiendo que vamos a permitir estas anulaciones, debemos asegurarnos de que aceptamos un parámetro de "opciones".

Paso 3 Opciones de configuración

Ahora que hemos nombrado nuestro complemento, el siguiente paso es crear las opciones de configuración.

 opciones = $. extensión (superposición: 20, velocidad: 500, restablecer: 1500, color: '# 0b2b61', alivio: 'easeOutExpo', opciones);

Arriba, tomamos la variable de opciones, establecemos algunas propiedades y valores predeterminados, y luego la extendemos con lo que sea (si es que pasa) el usuario pasa cuando llama al complemento. De esa manera, las opciones que pasen anularán nuestra configuración predeterminada. Por ejemplo, si, cuando llamo a este complemento, paso:

 $ ('# nav'). spasticNav (speed: 2000, easing: 'easeOutElastic');

Esas dos propiedades anularán la configuración predeterminada, mientras que el resto de las opciones permanecerán igual.

Paso 4 Implementando la Funcionalidad

Ahora, estamos listos para recorrer cada elemento que se pasó a este complemento e implementar la funcionalidad de la lámpara de lava. Recuerde, no podemos asumir que el usuario va a pasar un solo elemento a este complemento. Podrían, si quisieran, hacer referencia a una clase, que se refiere a múltiples elementos que deberían recibir esta funcionalidad. Como tal, llamaremos a este. Cada uno para iterar sobre cada elemento del conjunto envuelto.

 devuelve this.each (function () );

Dentro de esta función, crearemos algunas variables. No todos ellos tendrán valores de inmediato, pero como el motor de JavaScript llevará todos los nombres de las variables a la parte superior de la función de todos modos (detrás de la escena), generalmente es una buena práctica declararlos en la parte superior y luego inicializarlos más tarde..

 var nav = $ (this), currentPageItem = $ ('# selected', nav), blob, reset;

nav "Cachés" esta, envuelto en el objeto jQuery.
currentPageItem: Contiene el elemento de la lista con un id de seleccionado. Pasamos un segundo parámetro para establecer el contexto para buscar. De esa manera, no tenemos que atravesar todo el dom para encontrar este elemento.
blob A falta de una palabra mejor, esta variable hará referencia al resaltador, que seguirá a nuestro mouse cuando pasemos el cursor sobre el menú..
Reiniciar : Esto almacenará una referencia a la función setTimeout que se creará más adelante. Se necesita para llamar a clearTimeout. Más sobre esto pronto ...

Ahora que hemos declarado / inicializado nuestras variables, creemos el blob real, por así decirlo.

 PS') .css (width: currentPageItem.outerWidth (), height: currentPageItem.outerHeight () + options.overlap, izquierda: currentPageItem.position (). izquierda, arriba: currentPageItem.position (). top - options.overlap / 2, backgroundColor: options.color). AppendTo (this);

La razón por la que estamos llamando al método CSS, en lugar de simplemente agregar una clase, es porque estos valores variarán dependiendo del elemento de la lista de la página actual. Como tal, debemos usar JavaScript para recuperar sus valores..

anchura: Obtenga el ancho de currentPageItem, incluidos los bordes y el relleno.
altura: Obtenga la altura de currentPageItem, incluidos los bordes y el relleno. Además, agregue la cantidad de superposición, para hacer que el blob se extienda fuera del menú.
izquierda: Establece la propiedad izquierda del blob igual a la posición izquierda del currentPageItem. (Debemos establecer un contexto de posicionamiento en nuestro CSS para que este valor tenga efecto).
parte superior: También establece el valor superior y centra verticalmente el blob.
color de fondo: Establece el color de fondo..

Finalmente, agregamos este nuevo elemento de lista a esta, o #nav.

A continuación, necesitamos almacenar una referencia a #blob. De esa manera, no tenemos que buscar el DOM cada vez que deseamos acceder a él. Declaramos el gota Variable en la parte superior de la función. Ahora, vamos a inicializarlo.

 blob = $ ('# blob', nav);

Paso 5 El evento Hover

Ahora debemos "escuchar" cuando el usuario se desplaza sobre uno de los elementos de la lista (excluyendo el blob, por supuesto) en nuestro menú de navegación. Cuando lo hagan, estableceremos el ancho y las propiedades de la izquierda del blob iguales a las del elemento de la lista que se encuentra en ese momento..

 $ ('li: not (#blob)', nav) .hover (function () // pase el mouse sobre clearTimeout (reset); blob.animate (left: $ (this) .position (). left, width: $ (this) .width (), duration: options.speed, easing: options.easing, queue: false);, function () // mouse out reset = setTimeout (function () blob.animate (width: currentPageItem.outerWidth (), left: currentPageItem.position (). left, options.speed), options.reset););

Para resumir el guión de arriba ...

Obtenga todos los elementos de la lista, no el #blob, dentro del menú de navegación, y cuando estén sobre ellos, ejecute una función.
Anime el blob y establezca sus valores de izquierda y ancho iguales a los del elemento de la lista desplegable.
Pase un objeto literal como el segundo parámetro de animar, y establezca la duración y la aceleración igual a lo que configuramos en nuestras opciones de configuración. Establecer cola en falso para evitar la acumulación de animación.
Cuando salgan con el mouse, llame a setTimeOut, que empujará el blob de nuevo al elemento de la página actual. Si no hiciéramos esto y el usuario no hiciera clic en un enlace de navegación, el menú mostraría que estaban en
Una página completamente diferente. Esto, después de un segundo o menos, animará el blob a currentPageItem.

Y eso es todo lo que hay que hacer! Este es un plugin super simple. El siguiente paso es diseñar nuestro menú de navegación..

Paso 6 Estilizando el menú

Sin ningún estilo, nuestro menú debe parecerse a esto:

Primero el estilo de "nav" ul. Abra su archivo style.css, y agregue:

 #nav posición: relativo; fondo: # 292929; flotador izquierdo;

A continuación, le daremos estilo a cada elemento de la lista..

 #nav li float: left; estilo de lista: ninguno; borde derecho: 1px sólido # 4a4a4a; borde izquierdo: 1px negro sólido;

Esto simplemente hace flotar cada elemento de la lista a la izquierda y agrega un borde a cada lado..

Avanzando, a continuación debemos diseñar las etiquetas de anclaje dentro de nuestro menú de navegación.

 #nav li a color: # e3e3e3; posición: relativa; índice z: 2; flotador izquierdo; tamaño de letra: 30px; Familia tipográfica: helvética, arial, sans-serif; texto-decoración: ninguno; relleno: 30px 45px;

Estamos configurando un color, flotándolos hacia la izquierda, configurando algunos valores de fuente y una cantidad saludable de relleno. Tome nota de la propiedad del índice z Esto es una necesidad, y se explicará en breve. Sin embargo, recuerde que, para ajustar el índice z, debemos establecer un contexto de posicionamiento, lo que hemos hecho..

Debido a que no estamos implementando una hoja de estilo de reinicio completo, asegurémonos de que eliminamos los márgenes y el relleno predeterminados de nuestra ul y li, solo para evitar posibles dolores de cabeza.

 ul, li margen: 0; relleno: 0;

El último paso es diseñar el blob en sí.!

 #blob border-right: 1px solid # 0059ec; borde izquierdo: 1px sólido # 0059ec; posición: absoluta; arriba: 0; índice z: 1; fondo: # 0b2b61; fondo: -moz-lineal-gradiente (arriba, # 0b2b61, # 1153c0); fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, de (# 0b2b61), a (# 1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 10px # 011331; -webkit-box-shadow: 2px 3px 10px # 011331;

Una vez más, establecemos algunos colores bonitos para nuestros bordes, y agregamos algunos colores de fondo (incluidos los gradientes / bordes / sombras de CSS3 para Firefox y Safari / Chrome). Una vez más, vemos esa propiedad z-index. Sin esto, el blob se mostrará sobre todo el texto en el menú de navegación. Para contrarrestar esto, debemos asegurarnos de que su propiedad de índice z sea MÁS BAJA que la de los elementos de la lista. También debemos establecer la posición en absoluta para ajustar sus valores superior e izquierdo con nuestro complemento.

Conclusión

¡Eso es todo al respecto! Con un mínimo esfuerzo, hemos creado desde cero un menú de navegación realmente atractivo. ¡Hazme saber si tienes alguna pregunta! Gracias por leer y mirar.

Código