Share
En este tutorial, crearemos una barra de navegación que permanecerá con usted a medida que se desplaza hacia abajo, y también agregaremos un truco o dos a la mezcla para pulirla.
"Todo el mundo ama las cintas", dice Chris Coyier cuando habla de las virtudes del :antes de y :después pseudo-elementos. He visto estas cintas estilizadas, con bordes de triángulos apareciendo en Internet (un ejemplo destacado es la página de Introducción de la línea de tiempo de Facebook) y, aunque tienen cierto atractivo, debo admitir que el efecto espacial que crean no es suficiente. me ves bien.
Sin embargo, las cintas tienen gusto por una razón: rompen el paradigma de diseño en su mayoría plano al que tradicionalmente estamos obligados, y son uno de los pocos elementos visuales que lo hacen de manera discreta. Pero, como dice el antiguo dicho, debería haber más de una forma de despellejar a un gato; por lo tanto, en este tutorial, propondré un estilo visual alternativo para tales elementos, que me parece mucho más natural y estético. agradable. Espero que os guste y que la aprovechéis.!
En este tutorial, vamos a utilizar uno de los nuevos elementos de HTML5, el nav etiqueta, como un contenedor para una lista horizontal de enlaces. Explicaré brevemente cómo hacer que se vea bonito usando un poco de CSS.
Lo más importante es que te familiarizarás con los aspectos básicos del complemento Waypoints de jQuery, que brindará una funcionalidad avanzada: a medida que el usuario se desplaza hacia abajo, la barra de navegación se pegará a la parte superior de la ventana gráfica, y cambiará para indicar la sección actual . Como un toque adicional, usaremos otro complemento, ScrollTo, para proporcionar un desplazamiento suave y un posicionamiento conveniente cuando el usuario haga clic en los enlaces de navegación.
Estoy seguro de que ya estás familiarizado con los diversos elementos nuevos que se han introducido con HTML5. En este ejemplo vamos a hacer uso de dos de ellos: y . Vamos a empezar con lo siguiente:
Un título razonablemente grande.
Lorem ipsum ...
Vamos a tener que darle a nuestra barra de navegación un ancho explícito. Hágalo 28px más ancho que el envoltorio y empújelo en su lugar con un margen izquierdo negativo. También vamos a darle bordes superiores suavemente redondeados usando borde - * - radio, así como un relleno arbitrario.
nav posición: relativa; ancho: 928px; relleno: 2em; margen izquierdo: -14px; borde superior izquierdo del radio: 14px 7px; borde superior-derecho-radio: 14px 7px;
A continuación, agregaremos una lista desordenada de enlaces dentro de la barra de navegación y estableceremos sus elementos en display: inline-block para ponerlos todos en una sola línea. No necesitamos balas, así que también lanzaremos. estilo de lista: ninguno en la mezcla.
nav li display: inline-block; estilo de lista: ninguno;
Hasta ahora, deberías tener algo como esto:
Ahora, si solo CSS nos permitió tener múltiples pseudo-elementos (es decir,. :: después :: después), podríamos completar fácilmente los bordes redondeados de la barra de navegación de forma semánticamente limpia. Pero no podemos hacer eso, así que tendremos que agregar dos elementos no semánticos divs al final de la nav. Darles las clases navegación izquierda y derecho de navegación (O podrías llamarlos algo imaginativo, como Castor y Pollux). Son 14px de ancho por 14px de altura, y son absolutoLado 14px desde el extremo inferior de la nav.
Como se ve arriba, el radio del borde La familia de propiedades puede tomar dos valores para cada esquina. Esos también pueden ser porcentajes del ancho del elemento, lo cual es bastante práctico: este enfoque permite que el radio del borde se adapte automáticamente a los cambios en las dimensiones de la caja..
Las pequeñas "sombras" que completan el aspecto de la barra de navegación se crean usando ::después pseudo-elementos. Su ancho y alto, así como sus radios de borde, también se establecen utilizando porcentajes.
/ * swap 'left' con 'right' para los otros dos * / .nav-left position: absolute; izquierda: 0; abajo: -14px; ancho: 14px; altura: 14px; fondo: # 848a6a; borde inferior-izquierdo-radio: 100% 50%; .nav-left :: after content: "; posición: absoluta; derecha: 0; ancho: 66%; altura: 66%; fondo: # 000; radio superior del borde izquierdo: 100% 50%; borde - radio inferior izquierdo: 100% 50%;
Y hemos terminado aqui!
Habiendo eliminado la mayor parte de la geometría imposible de las cintas de bordes rectos, continuemos.
Para lograr el efecto de encabezado flotante, usaremos un plugin jQuery llamado Waypoints, de Caleb Troughton. Su único propósito es desencadenar eventos cuando el usuario se desplaza a un elemento determinado. Como verá, es extremadamente simple, pero ofrece mucha flexibilidad: puede ver varios ejemplos en su página de inicio..
Incluya jQuery y Waypoints en su página, y comencemos!
Lo primero que deberá hacer es registrar un punto de referencia llamando al .punto de referencia () Método en un elemento. Por supuesto, esto no hace nada por sí mismo: tendrá que definir una función de controlador para el evento. La forma más fácil de hacer esto es pasar esa función como un parámetro a .punto de referencia ().
Pruébelo ahora: agregue lo siguiente a su secuencia de comandos y vea un mensaje emergente a medida que se desplaza por la barra de navegación.
Accentsconagua
$ (function () // Cuando la página se ha cargado, $ ('nav'). waypoint (// crea una función de waypoint () alert ("Waypoint alcanzado.");)); Ahora, para lograr el efecto deseado, las cosas se complicarán un poco. Primero, debemos encerrar nuestra barra de navegación en un contenedor, que será nuestro punto de referencia real, y servir como un marcador de posición conveniente (más sobre esto más adelante).
En su CSS, cree la siguiente regla de CSS. (Mientras estás en ello, mueve cualquier margen vertical del nav podría tener que el contenedor nav)
.pegajosa posición: fija; arriba: 0;
Y estamos listos para la parte buena! Cambie los contenidos de su guión a lo siguiente:
$ (function () // Haga nuestras búsquedas en DOM de antemano var nav_container = $ (". nav-container"); var nav = $ ("nav"); nav_container.waypoint (handler: function (event, direction) nav.toggleClass ('sticky', direction == 'down'););); Bien, ¿de dónde diablos vino todo esto? Bueno, probablemente te hayas dado cuenta de que estamos adjuntando un punto de ruta al contenedor nav; Solo que esta vez, lo estamos haciendo de manera diferente. En lugar de pasar directamente la función de controlador a .punto de referencia (), Lo estamos encapsulando en un objeto. Por sí solo, esto no hace ninguna diferencia: ambas son formas completamente válidas de hacer lo mismo. Sin embargo, el objeto que estamos pasando puede contener varios otros valores de opción, por lo que usarlo ahora genera un código más consistente más adelante.
La función de controlador que hemos definido recibe dos parámetros: el primero es el estándar jQuery evento Objeto, que es de poco interés aquí. El segundo es específico de Waypoints: es una cadena cuyo valor es 'abajo' o 'arriba' dependiendo de la forma en que el usuario estaba desplazándose cuando llegaron al punto de referencia.
Ahora, saber en qué dirección va el usuario es una información muy importante, simplemente porque nos permite ejecutar diferentes comportamientos en cualquier dirección. En el cuerpo de la función de controlador, estamos usando una variante relativamente poco conocida de jQuery's .toggleClass () Método, que sirve para una abreviatura útil: en esta sintaxis, el segundo parámetro determina si la clase se agregará al elemento de destino o se eliminará de él. Cuando el usuario se desplaza hacia abajo, la expresión dirección === 'abajo' evalúa a cierto, por lo que nuestra barra de navegación recibe el pegajoso clase, y se adhiere a la parte superior de la ventana gráfica. Tan pronto como el usuario se desplaza de nuevo, la clase se elimina de la barra de navegación, que vuelve a su lugar. Pruébalo ahora.
Genial, ¿eh? Sin embargo, si se desplaza lentamente por el punto de referencia que acaba de crear, probablemente notará que a medida que lo pasa, el contenido "salta" un poco debido a que la barra de navegación se elimina del flujo de contenido. Además de parecer muy descuidado, tal comportamiento puede oscurecer parte de su contenido y dificultar su uso. Afortunadamente, todo lo que necesita es una solución simple: agregar el siguiente código a la función del controlador hace que el salto desaparezca.
if (direction == 'down') nav_container.css ('height': nav.outerHeight ()); else nav_container.css ('height': 'auto'); Lo que está pasando aquí es bastante obvio: usamos contenedor nav como un marcador de posición, como se mencionó anteriormente. Cuando nos desplazamos hacia abajo, expandimos su altura y el contenido a continuación permanece en su lugar. Sin embargo, hay un problema: para que esto funcione como es, cualquier margen vertical que pueda tener alrededor de la barra de navegación debe aplicarse a contenedor nav y no a la nav.
¡Así que ahí está! Tenemos una buena barra de navegación fija, como muchos otros sitios ya lo hacen. Se acabó el show, amigos ...
… ¿O es eso? Bueno, todavía hay uno o dos trucos que podrías querer ver y que podrían ponerte por delante del resto. Si ese es el caso, sigue leyendo.
Si lo piensas bien, hay muchos casos en los que no es lo que quieres activar un evento cuando un elemento llega al límite de la ventana del navegador. Afortunadamente, Waypoints proporciona una opción conveniente para eso: compensar. Esto es lo que parece:
nav.waypoint (handler:…, offset: 50)
compensar le permite crear el punto de ruta real a una distancia variable desde la parte superior del elemento. Un valor positivo activa el punto de ruta cuando la parte superior del elemento está a la distancia especificada debajo de la parte superior de la ventana gráfica, y un valor negativo activa el punto de ruta cuando el elemento está muy por encima de la parte superior de la ventana gráfica (es decir, el usuario se ha desplazado mucho más allá de él) ).
El valor de desplazamiento puede ser un número (que representa una cantidad fija de píxeles), una cadena que contiene un porcentaje (interpretado como un porcentaje de la altura de la ventana gráfica) o una función que devuelve una cantidad de píxeles. El último puede proporcionar cierta flexibilidad seria, y vamos a hacer uso de ella más adelante. Por ahora, atengámonos a valores fijos y veamos para qué sirven..
Lo primero que viene a la mente es agregar algo de espacio sobre el elemento adhesivo. Utilizando la compensar variable, esto es fácil: para un desplazamiento de 15 píxeles desde la parte superior, agregue desplazamiento: 15px a .punto de referencia ()Opciones de, y cambio. arriba: 0px a superior: 15px en el .pegajoso Regla CSS.
Si su diseño lo requiere, un pequeño degradado sobre la barra de navegación también podría ser un buen toque. Esto se logra fácilmente mediante la adición de otro div dentro de nav, y escribiendo un poco de CSS:
.pegajosa .nav-por encima de posición: absoluta; arriba: -15px; izquierda: 1em; derecha: 1em; altura: 15px; Fondo: gradiente lineal (arriba, rgba (255,255,255,1) 0%, rgba (255,255,255,0) 100%); / * agregar código de gradiente entre navegadores según sea necesario * /
Este poco sutil de dulce de ojos funcionaría muy bien en diseños minimalistas.
Una cosa que Caleb ha incluido cuidadosamente en los Puntos de ruta es poder generar un desplazamiento de puntos de ruta de forma dinámica, como por ejemplo:
nav.waypoint (handler:…, offset: function () return - (nav.outerHeight () + 50);)
Esto nos permite tener un controlador que se activaría cuando el usuario ya haya desplazado 50px más allá de la parte inferior del elemento, sin necesidad de saber su altura por adelantado..
Nota: Dichas compensaciones generadas por el procedimiento (así como las dadas como porcentajes), se vuelven a calcular cada vez que se cambia el tamaño de la ventana, se agregan nuevos puntos de referencia o se modifican las opciones de un punto de referencia. Si está haciendo otra cosa que podría afectar las posiciones de los puntos de ruta (como cambiar el DOM o el diseño de la página), asegúrese de llamar $ .waypoints ('actualizar') Posteriormente para las posiciones a recalcular..
En el contexto de nuestro tutorial, un uso de esta funcionalidad es deslizar suavemente la barra de navegación desde la parte superior. Esté preparado: la siguiente es la mayor parte del código hasta ahora. Sin embargo, no debería haber nada con lo que no esté familiarizado, así que aquí va:
var top_spacing = 15; var waypoint_offset = 50; nav_container.waypoint (handler: function (event, direction) if (direction == 'down') nav_container.css ('height': nav.outerHeight ()); nav.addClass ("sticky"). stop () .css ("top", -nav.outerHeight ()) .animate ("top": top_spacing); else nav_container.css ('height': 'auto'); nav.removeClass ("sticky") .stop () .css ("top", nav.outerHeight () + waypoint_offset) .animate ("top": "");, offset: function () return - (nav .outerHeight () + waypoint_offset);); ¡No está nada mal! Es una tarifa jQuery bastante estándar: tan pronto como agregamos o eliminamos pegajoso clase a la nav, Anulamos la posición vertical del elemento usando .css (), y entonces .animar() a lo que debería ser. los .detener() sirve para prevenir posibles errores al borrar la cola de eventos de jQuery.
Sin embargo, hay un pequeño efecto secundario en esto: ya que el código asume efectivamente la posición vertical del elemento de navegación cuando se fija, también puede dejar de lado superior: 15px Declaración de tu CSS. Si eres parte de un gran proyecto, con personas separadas trabajando en el diseño y en la creación de scripts de aplicaciones, esto podría constituir un problema, ya que es fácil perder el rastro de estos ataques. Solo para hacerle saber, existen complementos, como la excelente jQuery.Rule de Ariel Flesler, que se puede usar para cerrar la brecha entre los scripts y las hojas de estilo. Tendrás que decidir por ti mismo si necesitas algo así..
Seguramente podrías lograr un efecto similar con CSS @keyframes en su lugar, pero hay mucho menos soporte para ellos (y muchos prefijos de proveedores), son menos flexibles y la animación "up" sería un gran no-no. Ya que no estamos dejando la pista de la mejora progresiva, no hay razón para no seguir con la funcionalidad robusta de jQuery.
Es posible que necesite cambiar el elemento resaltado a medida que el lector avanza por las diferentes secciones de su página. Con Waypoints, esto es bastante fácil de lograr. Deberá agregar lo siguiente a su script:
$ (function () … // copie desde aquí… var section = $ ('section'); var navigation_links = $ ('nav a'); section.waypoint (handler: function (event, direction) // código del manejador, desplazamiento: '35% '); // ... hasta aquí); Esta vez estamos usando un desplazamiento expresado como un porcentaje de la altura de la ventana. Efectivamente, esto significa que la línea imaginaria que le dice a nuestra secuencia de comandos qué sección se está viendo actualmente se ubica aproximadamente a un tercio desde la parte superior de la ventana gráfica, justo donde el espectador estaría mirando cuando lee un texto largo. Una solución más robusta podría usar una función para adaptarse a los cambios en la altura de la barra de navegación.
Sin embargo, el código que vamos a utilizar en nuestra función de controlador es un poco menos explicativo. Aquí está:
var active_section; sección_activa = $ (esto); if (direction === "up") active_section = active_section.prev (); var active_link = $ ('nav a [href = "#' + active_section.attr (" id ") + '"]'); navigation_links.removeClass ("selected"); active_link.addClass ("seleccionado"); Primero, necesitamos saber qué sección se está viendo actualmente. Si nos estamos desplazando hacia abajo, entonces la sección a la que pertenece el punto de referencia es la misma que se activa. Sin embargo, desplazarse más allá de un punto intermedio significa que es la sección anterior que se muestra, por lo que usamos .anterior () para seleccionarlo. Luego, eliminamos el seleccionado clase de todos los enlaces en la barra de navegación, antes de volver a aplicarla a aquel cuyo href atributo corresponde a la carné de identidad de la sección actualmente activa.
Esto funciona bastante bien; Si desea ir más allá de agregar y eliminar clases, puede buscar un complemento como LavaLamp..
En algún momento, es posible que haya notado que al hacer clic en los enlaces en la barra de navegación, se ubica la parte superior de la sección en la parte superior de la ventana del navegador. Esto es lo suficientemente contradictorio cuando no hay nada que oculte esa parte de la pantalla; ahora que tenemos una barra de navegación allí, se convierte en una gran molestia. Aquí es donde Ariel Flesler's ScrollTo viene al rescate. Inclúyalo en su página y luego agregue el siguiente código:
navigation_links.click (función (evento) $ .scrollTo ($ (this) .attr ("href"), duration: 200, offset: 'left': 0, 'top': - 0.15 * $ (ventana) .height ());); (por supuesto, ese código va por encima de la última llave)
Aunque hay mejores formas de vincular una función para hacer clic en eventos, vamos a seguir con la más simple: .hacer clic(). los .scrollTo () método se llama de una manera que es muy similar a .punto de referencia (). Requiere dos parámetros: un objetivo de desplazamiento y un objeto que contiene diferentes opciones, que, en este caso, son bastante fáciles de explicar. Los enlaces pulsados href el atributo funciona bien como un objetivo de desplazamiento, y la expresión utilizada como desplazamiento superior coloca el objetivo en el 15% de la altura de la ventana gráfica.
Y parece que hemos terminado. Le he presentado el pequeño y práctico complemento que es Waypoints, y hemos revisado algunos casos de uso que deberían darle una idea de las diversas cosas que podría lograr con él. También hemos implementado un comportamiento de desplazamiento mucho más intuitivo para acompañar nuestra navegación. Agregue un poco de Ajax a la mezcla, y estará en camino de crear el tipo de experiencia Web inmersiva e impecable que será el futuro de la Web ... bueno, lo más probable es que esté de moda por un corto tiempo y luego se convierta en un lugar común, haciendo que los veteranos de la red se sientan nostálgicos sobre cómo solían ser las cosas. Pero oye, así van las cosas..
En cuanto a las cintas, su mayor inconveniente es este: son solo una ilusión. Los lados de la cinta no van realmente alrededor de los bordes del contenedor; solo aparecen de esa manera, lo que se vuelve bastante obvio cuando la cinta pasa sobre un elemento que sobresale del borde de la página..
Debido a cómo funciona el índice z, parece que no hay una forma simple de resolver este conflicto, salvo por evitarlo en primer lugar. Sin embargo, con un poco de imaginación, así como un conocimiento básico de jQuery, podría diseñar una manera para que estos elementos alejarse del camino de la cinta A medida que se acerca a ellos. Sin embargo, hacer esto está más allá del alcance de este tutorial; Con suerte, podré mostrárselo tarde o temprano en forma de consejo rápido, ya sea aquí o en Nettuts +. Manténganse al tanto!
