Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Una navegación superior diferente

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Al diseñar un nuevo sitio, los diseñadores web suelen enfrentarse a la antigua pregunta: ¿navegación vertical u horizontal? Hay pros y contras en ambas soluciones. Un ejemplo de navegación horizontal limita el número de enlaces que puedes tener debido al limitado ancho de página. Esto generalmente se resuelve mediante la inclusión de un sistema desplegable. Sin embargo, si estás intentando que tu sitio en particular destaque, podrías considerar pensar fuera de la "norma".

En este tutorial, estaremos haciendo precisamente eso. Usaremos jQuery para crear un sistema de navegación horizontal distinto compuesto por diversas capas pero que continúa siendo lo suficientemente intuitivo como para que cualquiera comprenda cómo usarlo desde el primer momento.


Lo que vamos a aprender:

Al final de este tutorial, queremos haber aprendido lo siguiente:

  • Cómo crear esquinas redondeadas con CSS puro compatible en todos los navegadores actuales
  • A usar jQuery para animar un slider situado en la parte superior
  • A usar jQuery para controlar la apariencia de las listas secundarias sin orden cuando se sitúa el puntero sobre la lista primaria
  • A usar jQuery para crear una capacidad casi dinámica

Objetivo:

Al final de este tutorial, queremos crear un sistema de navegación horizontal que no use el típico sistema desplegable.

Efecto deseado

Page

Estado normal – Haz clic para visualizar la imagen a tamaño completo

Page

Estado ampliado - Haz clic para visualizar la imagen a tamaño completo

Funcionalidad

Empecemos mapeando lo que necesitaremos hacer para cumplir nuestro objetivo:

Expansión

  1. Esperar a que el usuario coloque el puntero sobre uno de los enlaces principales
  2. Mostrar la X de cierre
  3. Asegurarte de que los enlaces principales no tengan aplicada la clase active (la clase que hará que su fondo coincida con el fondo del sub-enlace)
  4. Añadir la clase activa al enlace principal sobre el que se sitúe el puntero
  5. Animar la altura de la barra superior a 40px
  6. Asegurarte de que no se muestran sub enlaces ocultando todos ellos
  7. Mostrar los sub enlaces del enlace principal sobre el que se está situando el puntero

Contracción

  1. Esperar a que la X sea clicada
  2. Ocultar todos los sub enlaces
  3. Eliminar la clase activa en todos los enlaces principales
  4. Animar la altura de la barra de sub enlace para que vuelva ser de 10px
  5. Ocultar la X de cierre

El HTML

Ya existen muchos excelentes tutoriales en este sitio para aprender los fundamentos de HTML y CSS, así que en este tutorial asumiré que ya los conoces. No me detendré en detalles en estos aspectos:

Para el contenido de la página actual, usaremos simplemente una imagen del contenido para superar la pérdida de calidad que implica el uso de texto en la web. Esto hace que el HTML sea bastante sencillo:

El CSS

El CSS es bastante sencillo también. Dado que este tutorial no se centra en el HTML ni en el CSS, si tienes consultas a este respecto, puedes escribirme unas líneas a través de la sección de comentarios al final del tutorial.

Esquinas redondeadas

Para este ejemplo, también nos gustaría hacer las esquinas inferiores redondeadas. Existen muchas soluciones a este dilema, incluyendo el uso de imágenes, javascript, CSS o normalmente una combinación de todo lo anteriormente mencionado. Para este ejemplo, me gustaría conseguir las esquinas usando solo CSS. Aunque CSS3 nos ofrece una sencilla solución, todavía no es compatible con todos los navegadores. Así que para este ejemplo, vamos a usar un servicio online denominado Spiffy Corners. Spiffy Corners genera todo el código por nosotros. Está genial. Basta con que introduzcamos el radio de las esquinas, el nombre que queremos para la clase, y el color para el fondo y el frente, y el se encarga del resto.

Page

Aquí está el código generado para nosotros:

Hora del script

Volvamos a la funcionalidad:

  • Expansión

    1. Esperar a que el usuario coloque el puntero sobre uno de los enlaces principales
    2. Mostrar la X de cierre
    3. Asegurarnos de que los enlaces principales no tienen asignada la clase activa (la clase que hará que su fondo coincida con el fondo de los sub enlaces)
    4. Añadir la clase activa al enlace principal sobre el que se esté colocando el puntero
    5. Animar la altura de la barra superior para que alcance los 40px
    6. Asegurarnos de que no se muestran sub enlaces escondiendo todos ellos
    7. Mostrar los sub enlaces del enlace principal sobre el que se está colocando el puntero

    Contracción

    1. Esperar a que se haga clic en la X de cierre
    2. Ocultar todos los sub enlaces
    3. Eliminar la clase active de todos los enlaces principales
    4. Animar la altura de la barra del sub enlace a 10px
    5. Ocultar la X de cierre

Cómo vamos a lograr estas cosas

Añadir el receptor:

Ponemos el manejador en el receptor “hover” dentro de la función de lectura del DOM:

Mostrar la X de cierre

Para mostrar la X, usaremos la función fadeIn():

Asegúrate de que ningún enlace principal tenga asignada la clase active

Para hacer esto, eliminaremos la clase .active de todos los enlaces principales

Añadir la clase activa al elemento sobre el que se sitúe el puntero

Al usar “este” selector podemos seleccionar el elemento actual al cual nos estamos refiriendo. Dado que estamos dentro de un receptor sobre el que se puede situar el puntero, añadirá la clase al elemento concreto sobre el que se está situando el puntero.

Animar la altura de la barra superior hasta que alcance los 40px

Para esto usaremos la función animate().

Asegúrate de que no se muestran sub enlaces

Para hacer esto, usaremos la misma técnica que usamos para eliminar la clase activa de todos los elementos. Solo esta vez, ocultaremos todas las listas de sub enlaces.

Mostrar el conjunto correcto de sub enlaces

Para hacer esto, seleccionaremos el elemento hermano del elemento sobre el que se ha situado el puntero y mostraremos su lista hermana.

Contracción

Ahora añadamos la capacidad que nos permita cerrar la barra de nuevo. Para este ejemplo, he decidido incluir una X que cerrará la barra. Sin embargo, para tu ejemplo, podrías elegir cualquier método que pienses que es la más intuitiva y funcional.

La espera a que la X sea clicada

Para hacer esto, estableceremos un receptor de eventos que espera a que la X sea clicada y después hace algo.

Elimina la clase activa en todos los enlaces principales

Lo primero que queremos hacer después de que la X sea pulsada es eliminar la clase active de cualquier enlace principal, ya que cuando el menú se esté colapsando, no debería haber nada seleccionado.

Esconder todos los subenlaces

Ahora que la barra está a punto de colapsarse, necesitamos ocultar todos los sub enlaces.

Anima la barra superior hasta que su altura sea de 10px

Ahora tenemos que minimizar la barra para que vuelva a tener solo 10px

Ocultar de nuevo la X

Ahora que el panel está colapsado, el usuario no debería ver más una opción para cerrar la barra. Así que debemos ocultarla de nuevo.

El script completo

Ahora que hemos visto el script en detalle, echemos un vistazo a todo en su conjunto:

Ya hemos acabado


¡Felicidades! ¡Acabas de crear un sistema de navegación horizontal que ayudará a que tu web marque la diferencia! Espero que hayas disfrutado el tutorial y te haya parecido útil como medio para aprender más sobre cómo usar jQuery de forma práctica. Si tienes cualquier pregunta o deseas dejar tu opinión, ¡déjanos un comentario en la sección que viene a continuación! ¡Me encantaría escucharte!


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.