En cualquier contenido que tu necesites presentar, deberías mostrarlo de forma interactiva y con posibles caminos alternativos de respuesta. En este artículo hemos querido mostrar 10 Tecnicas excelentes de usar la magia de jQuery  para conseguir llamar la atención de tus usuarios con una simple y enriquecida experiencia de navegación y así aportar a tu página un plus adicional.

1. Navegación Fluida – Como crear una barra de menú informativa con jQuery & CSS

Aprendamos como crear un menú que aparece como un texto estándar en la barra, pero esto solo es el aspecto por defecto. Pero aparece la magia al poner el ratón sobre los elementos del menú y se despliega un texto adicional sobre el botón creando un fundido de dropdown y que además nos cubre el texto inicial del menú. Una simple expansión de un elemento al activar el evento over en otro.

2. Mover Elementos con distintos estilos y propiedades

Roundabout es un plugin de jQuery que convierte una estructura estática de HTML en elementos que serán altamente configurables, responderán de forma activa a eventos del ratón y podrán girar, rotar, desplazarse en el area que definamos. En esta simple configuración de elementos Roundabout será capaz de trabajar con listas ordenadas o desordenadas (UL/OL) y con unos pocos pasos de configuración conseguiremos unos efectos muy funcionales y entretenidos para el usuario.

3. Slider Automático de imágenes con CSS & jQuery

Un Slider sencillo de imágenes usando HTML/CSS/Javascript. El HTML de imágenes tiene como ventaja la identificación de contenidos para SEO y al tiempo nos permite informar de varios productos en la misma zona web con muy poco código javascript.

4. QuickSand jQuery Plugin

Con Quicksand podemos reordenar y filtrar elementos con un agradable desplazamiento de los elementos mostrados. A nivel básico, Quicksand reemplaza una colección de elementos por otra, deslizando estos a la nueva posición. Todo lo que necesitamos es disponer de dos listas de elementos que podremos crear con:

• 1. Usa texto plano HTML, como una lista desordenada.
• 2. Descarga los datos con una llamada Ajax
• 3. Transformar elementos HTML con javascript  (por ejemplo, ordenarlos de forma distinta)

5. jQuery Magic Line deslizando la navegación con estilos

Este idea recuerda a un plugin desarrollado hace tiempo que se denominaba Lava Lamp. La idea es remarcar el elemento sobre el que está el ratón con un deslizamiento de otro elemento, de esta forma damos un aspecto de disponer de un subrayado móvil al ratón, que ayuda al usuario a ver la opción seleccionada. En si es una de las habilidades de jQuery en desplazamiento. Como es lógico la "linea magica" se agrega por JavaScript. Una vez agregado y sobre una lista de elementos personalizados con hoja de estilos, solo necesitamos mover el ratón sobre los distintos elementos y nuestra línea se deslizará hasta el sitio y se adaptará al ancho de este elemento.

6. Texto con movimientos de fondos

La idea es crear un contenedor que se desplace con un movimiento de fondo, pero solamente una máscara de las letras mostradas son visibles dando una sensación muy curiosa. Realmente hemos creado agujeros en nuestro contenedor de texto.

Normalmente debemos crear archivos PNG conteniendo letras "anti-aliased" y la situamos dentro de un contenedor en la parte superior del fondo. Realmente solo necesitamos colocar la imagen completa como fondo y dejar que el PNG haga la máscara!

7. jDiv: un menú de navegación jQuery alternativo

Un menú de tipo drop-down que nos permite agregar contenido adicional según necesidades. En si hablamos de una combinación de imágenes y listas, sin estar limitado solamente a una lista desordenada (UL). Las principales ventajas:

• Mas flexibilidad en diseño sobre lo permitido para una lista del tipo <UL>
• El uso del tag H4 y un UL con el contenido oculto, agrega ventajas en nuestro posicionamiento natural SEO pere debemos estar seguros de que nuestra cabecera y sus tags mantienen equivalencia sobre el contenido
• Como primer nivel de navegación cada elemento linka con una página y mantenemos la accesibilidad con un JS desactivado.

8. Menú de Navegación de Medio Tono con jQuery & CSS3

Este curioso sistema de navegación en menú nos habilita una imagen de medio tono o marca de agua nos ayuda a incrementar la información gráfica de la zona. Realmente agradable de ver y muy práctico para dar información adicional en la web.
 

9. Deslizamiento lateral animado con with jQuery

Para páginas web que precisan un alto contenido gráfico y que además necesitan incluir contenidos adicionales, este sistema les facilita la labor completa. Da igual el contenido que necesitemos, una galería de imágenes, presentaciones de productos, explicaciones o detalles de servicios, las posibilidades de este plugin animado son excelentes. En el tutorial de la web se explican varias transiciones y como cambiar los efectos de las ventanas visibles.

10. SlideDeck

SlideDeck es un nuevo camino para mostrar contenidos de sitios web. Similar al concepto anterior, o a otros plugins de deslizamiento lateral, dispone de varias ventajas de simplicidad en la implantación y un movimiento muy cuidado. Recuerda en algunos casos a aplicaciones que hemos visto para móviles y dispositivos que pueden mostrar poca información, así se solapan diferente etapas como si de una librería fuera. El único pero es que la versión completa no es gratuita, pero al menos disponemos de una versión libre aunque recortada.