Navegación Fuera de la Caja con jQuery

Casi todos los sitios web utilizan los conceptos de navegación habituales a los que estamos acostumbrados. Después de un tiempo, esto puede ser bastante aburrido, especialmente para los diseñadores que prosperan en la creatividad. Mientras imitando el OS X dock y las pilas no son nuevas, ciertamente no son comunes.

Hace unos días, Jeffrey publicó sobre un potencial concurso "fuera de la caja" en ThemeForest para alentar a los autores a poner su creatividad y diseñar plantillas utilizables con diseños creativos "fuera de la caja".. En este tutorial, cubriré algunas formas de hacerlo con los muelles y las pilas de estilo OS X.

Fuentes y Créditos

Antes de comenzar, quiero felicitar a un par de tipos que acudieron al rescate cuando escucharon mi llamada de ayuda en Twitter. Steve actualizó el script de pilas de Harley al usar jQuery 1.2.6 para usar la versión 1.3.2 actual y Rey Bango del equipo de jQuery me ayudó a corregir un error. Ambos saltaron a la tarea a los pocos minutos de mi pedido de ayuda a través de Twitter. Muchas gracias chicos! *Ronda de aplausos* :-RE

Fuentes originales

• "Agregando a nuestro Leopard Desktop con jQuery" por Harley a través de Net.tutsplus.com
• Interfaz: Menú de ojo de pez
• jqDock v1.2
• Plantilla de ejemplo (Enciclopedia de Internet) por Luka Cvrk

Notas rápidas

Estos scripts se basan en jQuery 1.3.2. Los ejemplos que se muestran son compatibles con todos los navegadores principales, incluido IE6, y son fáciles de garantizar una degradación elegante si JavaScript está desactivado o deshabilitado.

jQuery OS X Dock # 1 (Horizontal)

El primer muelle que construiremos utiliza el complemento de menú jQuery Fisheye mencionado anteriormente. Es bastante liviano (~ 7kb con dependencias) pero la razón principal por la que quise usar este fue porque es increíblemente suave, sin tartamudear. Ver demostración.

Como puede ver en la demostración, es increíblemente suave y sensible. La desventaja es que no se puede usar un posicionamiento fijo si la página necesita desplazarse, ya que se romperá. Si no lo necesita reparado dentro de la ventana del navegador, entonces funciona muy bien..

Este es un gran ejemplo de conceptos "externos" en los sitios web y proporciona una interfaz interactiva y divertida.

Archivos necesarios (he combinado el complemento Fisheye y iutil.js en los archivos de demostración).

• jQuery 1.3.2
• Interfaz: Complemento de menú de ojo de pez
• Interfaz: iutil.js (dependencia)

El HTML

Envolveremos nuestras imágenes y títulos en enlaces y los colocaremos dentro de un div que contiene. Luego lo envolveremos todo en otro div que contenga para que funcione correctamente.

 
 
 Ejemplo 1 Ejemplo 2 Ejemplo 3 Todos los ejemplos Vídeo Historia Calendario Campo de golf RSS RSS2 
 

Tenga en cuenta que he colocado los títulos en etiquetas de separación para que podamos diseñarlos y permitir que el complemento los oculte / muestre según sea necesario.

El CSS

Con CSS colocaremos el dock donde lo queremos en la página. No podemos usar posicionamiento fijo con este complemento o no funcionará correctamente.

 .muelle-contenedor posición: relativo; arriba: -8px; altura: 50px; relleno-izquierda: 20px;  a.dock-item display: block; ancho: 50px; posición: absoluta; abajo: 0; text-align: center; texto-decoración: ninguno; color: # 333;  .dock-item span display: none; relleno-izquierda: 20px;  .dock-item img border: 0; margen: 5px 10px 0px; ancho: 100%; 

También he colocado un poco de CSS adicional en el encabezado de la página debajo del CSS incluido anteriormente. Lo envolví en etiquetas noscript en caso de que un visitante no tenga JavaScript habilitado o no esté disponible, seguirá siendo una navegación útil. Debo señalar que esto no se validará porque la etiqueta noscript no es válida en la sección de encabezado, a pesar de que funciona en todos los navegadores actuales. ;-)

 #dock top: -32px;  a.dock-item position: relative; flotador izquierdo; margen derecho: 10px;  .dock-item span display: block; 

El JavaScript

Traeremos nuestros archivos JavaScript ahora comenzando con jQuery 1.3.2. El archivo fisheye-iutil.min.js es la combinación del complemento Fisheye y su archivo iutil.js dependiente. Crearemos el último archivo y pondremos nuestro JavaScript necesario para inicializar el dock en él..

Ahora inicializaremos el dock una vez que se cargue la página. Puede usar varias opciones de complementos para personalizar el dock según sea necesario para el posicionamiento y la funcionalidad. Puede ver la documentación visitando el sitio que se encuentra en las fuentes del complemento Fisheye..

 $ (function () // Dock initialize $ ('# dock'). Fisheye (maxWidth: 30, elementos: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 50, proximidad: 60, alineación: 'izquierda', valign: 'parte inferior', halign: 'centro'););

¡Eso es todo al respecto! :-RE

jQuery OS X Dock # 2 (Vertical)

El dock horizontal fue fácil y definitivamente una buena idea para usar en sitios web. Probablemente sean el tipo más común que se usa en la web actualmente, así que probemos algo diferente. Podríamos obtener un poco más "fuera de la caja" si hiciéramos una navegación de muelle vertical.

Esta base se basa en el complemento jqDock jQuery. Tiene un tamaño aproximado de 10kb, por lo que es un poco más grande que la versión anterior, pero eso no es mucho. La desventaja de este complemento es que no es tan suave como el dock de Fisheye, aunque aún es muy fluido y ciertamente utilizable. Este plugin tampoco tiene problemas con el posicionamiento fijo. Ver demostración.

El HTML

Pondremos nuestras imágenes en una lista desordenada y las envolveremos en enlaces. Al igual que con el último complemento, envolveremos todo dentro de un div que contiene. Cuando inicialicemos el plugin usaremos la "ul" aquí.

Notará que en este dock no tenemos títulos envueltos en etiquetas span. En su lugar, este complemento mirará el conjunto de etiquetas de "título" para cada imagen y creará los títulos de esa manera (si está habilitado en las opciones del complemento). Esto hace que el marcado sea un poco más simple, pero también hace que los títulos sean un poco menos personalizables..

El CSS

Posicionamos el muelle en el lado izquierdo (puede ser cualquier lado) usando posicionamiento fijo. Le daremos un poco de espacio entre sí y la parte superior de la ventana del navegador por motivos estéticos para que los iconos no desaparezcan cuando se amplían..

 #dockContainer position: fixed; superior: 60px; izquierda: 6px;  #jqDock position: relative; abajo: 48px;  .jqDockLabel background: # 333; color: #fff; relleno: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; 

Para diseñar los títulos podemos usar la clase ".jqDockLabel". Tampoco necesitaremos incluir ningún estilo adicional para que pueda seguir utilizándose con JavaScript deshabilitado. Puede que no sea muy bonita pero es funcional..

El JavaScript

Traeremos la biblioteca jQuery al igual que el dock anterior, así como el complemento.

Inicializamos el dock y configuramos algunas opciones para personalizarlo. Puede leer la documentación sobre estas configuraciones visitando el sitio que se encuentra en las fuentes al comienzo del tutorial para jqDock. Lo que quiero señalar aquí es la opción de duración. Este es el momento para la animación de ampliación en milisegundos. Es bueno poder cambiar la velocidad de duración, pero parece tener un poco de tartamudeo, que es algo que odio.

 $ (function () var jqDockOpts = align: 'left', duración: 200, etiquetas: 'tc', tamaño: 48, distance: 85; $ ('# # jqDock'). jqDock (jqDockOpts);) ;

Puede cambiar fácilmente la posición de la base y las etiquetas, así como el tamaño inicial de los iconos y algunas otras opciones. Lo que no me gustó de este complemento es que se amplía al tamaño completo del icono. El complemento anterior te da la posibilidad de cambiar el tamaño al que se amplía. Eso es todo al respecto!

jQuery OS X Stack y Drop Stack

Este es probablemente mi estilo de navegación favorito de los tres que se muestran en este tutorial.. Es súper liviano (~ 1kb) y es un método de navegación "fuera de la caja" realmente creativo. para un sitio web. Puede ser un poco incómodo tener la navegación en la parte inferior derecha o izquierda de la ventana del navegador, pero sin duda sería creativo y ahorraría mucho espacio. Ver demostración.

Mientras escribía esto, me di cuenta de que probablemente hay muchas personas que no les gustará su navegación al final de la página, así que tomé un par de minutos adicionales y agregué una pila desplegable a los archivos de ejemplo.. De esta forma, la navegación se desplaza de arriba a abajo, de modo que ahora se puede utilizar en la parte superior de las páginas..
Ver demostración.

El HTML

El HTML es tan simple como los dos ejemplos de base. Colocaremos todo en un div contenido y colocaremos todas nuestras imágenes y títulos, que están envueltos en enlaces, dentro de una lista desordenada..

 
  
 
Abertura
 
Todos los ejemplos
 
Ejemplo 3
 
Ejemplo 2
 
Ejemplo 1
 
 

 .stack posición: fijo; abajo: 28px; derecha: 40px;  .stack> img posición: relativo; cursor: puntero; acolchado superior: 35px; índice z: 2;  .stack ul estilo de lista: ninguno; posición: absoluta; superior: 5px; cursor: puntero; índice z: 1;  .stack ul li posición: absoluta;  .stack ul li img border: 0;  .stack ul li span display: none;  .stack .openStack li span font-family: "Lucida Grande", Lucida, Verdana, sans-serif; bloqueo de pantalla; altura: 14px; posición: absoluta; superior: 17px; derecha: 60px; línea de altura: 14px; borde: 0; color de fondo: # 000; relleno: 3px 10px; radio del borde: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #fcfcfc; text-align: center; text-shadow: # 000 1px 1px 1px; opacidad: .85; filtro: alfa (opacidad = 85);  / * Correcciones de IE * / .stack _position: absolute;  .stack ul _z-index: -1; _top: -15px;  .stack ul li * derecha: 5px; 

 $ (function () // Stack initialize var openspeed = 300; var closespeed = 300; $ ('. stack> img'). toggle (function () var vertical = 0; var horizontal = 0; var $ el = $ (this); $ el.next (). children (). each (function () $ (this) .animate (top: '-' + vertical + 'px', izquierda: horizontal + 'px' , openspeed); vertical = vertical + 55; horizontal = (horizontal + .75) * 2;); $ el.next (). animate (top: '-50px', left: '10px', openspeed). addClass ('openStack') .find ('li a> img'). animate (width: '50px', marginLeft: '9px', openspeed); $ el.animate (paddingTop: '0'); , function () // revertir arriba var $ el = $ (this); $ el.next (). removeClass ('openStack'). children ('li'). animate (top: '55px', left : '-10px', closespeed); $ el.next (). Find ('li a> img'). Animate (width: '79px', marginLeft: '0', closespeed); $ el.animate (paddingTop: '35');); // Apila animación adicional $ ('. stack li a'). hover (function () $ ("img", this) .animate (width: '56px ', 100); $ ("span", this) .animate (marginRight:' 30px ');, function () $ ("img", this) .an imate (ancho: '50px', 100); $ ("span", this) .animate (marginRight: '0'); ); );