Cree una barra de navegación de «destacado móvil» con JavaScript y CSS – Smash Magazine

Recientemente me encontré con un viejo tutorial jQuery que muestra un Barra de navegación de resaltado móvil Y decidió que el concepto era para una actualización moderna. Con este modo, cuando el usuario hace clic en un elemento de menú, los bordes alrededor del elemento de navegación activa se animarán directamente de un elemento a otro. En 2025, tenemos mejores herramientas para manipular DOM con Vanilla JavaScript. Como Ver la API de transición Haga que las mejoras progresivas sean más fáciles de implementar y manejar muchos detalles de animación.

En este tutorial, demostraré dos formas de crear una barra de navegación de «destacado móvil» utilizando JavaScript y CSS. El primer ejemplo usa getBoundingClientRect Cómo animar explícitamente el borde entre los elementos de la barra de navegación. El segundo ejemplo implementa la misma funcionalidad utilizando la nueva API de transición de vista.

Marca inicial

Supongamos que tenemos una aplicación de una sola página donde el contenido cambia sin recargar la página. El lanzamiento de HTML y CSS es su barra de navegación estándar div Contiene un elemento id de #highlight. Le damos una categoría al primer proyecto de navegación .active.

Para esta versión, nos dirigiremos #highlight Los elementos alrededor de los elementos y .active La clase crea fronteras. Podemos usar absolute Posicione y anime elementos en la barra de navegación para crear el efecto deseado. Inicialmente lo ocultamos fuera de la pantalla agregando left: -200px E incluir transition Todos los estilos de atributo para que cualquier cambio en la posición y el tamaño del elemento ocurran gradualmente.

#highlight {
  z-index: 0;
  position: absolute;
  height: 100%;
  width: 100px;
  left: -200px;
  border: 2px solid green;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

Agregue un controlador de eventos de Boilerplate para hacer clic en la interacción

Cuando cambia el usuario, queremos que se animen los elementos destacados .active Artículos de navegación. Agreguemos uno click Manipulador de actividades nav elementos, luego filtrados solo por eventos causados ​​por elementos que coinciden con el selector que necesitamos. En este caso solo queremos cambiar .active Proyecto NAV Si el usuario hace clic en un enlace que aún no ha .active clase.

Inicialmente, podemos llamar console.log Asegúrese de que el lanzamiento del controlador sea solo como se esperaba:

const navbar = document.querySelector('nav');

navbar.addEventListener('click', function (event) {
  // return if the clicked element doesn't have the correct selector
  if (!event.target.matches('nav a:not(active)')) {
    return;
  }
  
  console.log('click');
});

Abra la consola de su navegador e intente hacer clic en un elemento diferente en la barra de navegación. Solo deberías ver "click" Grabe cuando seleccione un nuevo elemento en la barra de navegación.

Ahora que sabemos que nuestro controlador de actividades está manejando los elementos correctos, agregemos el código para moverse .active Una clase similar a los elementos de navegación de clic. Podemos usar el objeto pasado al controlador de eventos para encontrar el elemento que inicializa el evento y proporcionar una clase para ese elemento .active Después de eliminarlo del proyecto previamente activo.

const navbar = document.querySelector('nav');

navbar.addEventListener('click', function (event) {
  // return if the clicked element doesn't have the correct selector
  if (!event.target.matches('nav a:not(active)')) {
    return;
  }
  
-  console.log('click');
+  document.querySelector('nav a.active').classList.remove('active');
+  event.target.classList.add('active');
  
});

Nuestro #highlight Los elementos deben moverse en la barra de navegación y colocarse alrededor del proyecto activo. Escribamos una función para calcular la nueva posición y el ancho. desde #highlight El selector tiene transition Aplique el estilo y, a medida que cambie la posición, se moverá gradualmente.

usar getBoundingClientRectpodemos obtener información sobre la ubicación y el tamaño del elemento. Calculamos el ancho del elemento de navegación activo y su desplazamiento desde el límite izquierdo del elemento principal. Luego asignamos el estilo al elemento de resaltado para que su tamaño y posición coincidan.

// handler for moving the highlight
const moveHighlight = () => {
  const activeNavItem = document.querySelector('a.active');
  const highlighterElement = document.querySelector('#highlight');
  
  const width = activeNavItem.offsetWidth;

  const itemPos = activeNavItem.getBoundingClientRect();
  const navbarPos = navbar.getBoundingClientRect()
  const relativePosX = itemPos.left - navbarPos.left;

  const styles = {
    left: `${relativePosX}px`,
    width: `${width}px`,
  };

  Object.assign(highlighterElement.style, styles);
}

Cuando comienza el evento de clic, llamamos a nuestra nueva característica:

navbar.addEventListener('click', function (event) {
  // return if the clicked element doesn't have the correct selector
  if (!event.target.matches('nav a:not(active)')) {
    return;
  }
  
  document.querySelector('nav a.active').classList.remove('active');
  event.target.classList.add('active');
  
+  moveHighlight();
});

Finalmente, también llamamos a la función de inmediato para que el límite se mueva detrás de nuestro elemento activo inicial cuando la página se carga primero:

// handler for moving the highlight
const moveHighlight = () => {
 // ...
}

// display the highlight when the page loads
moveHighlight();

Ahora, cuando se selecciona un nuevo elemento, el límite se mueve a través de la barra de navegación. Intente hacer clic en un enlace de navegación diferente para animar la barra de navegación.

Esto requiere solo unas pocas líneas de javascript de vainilla y se puede extender fácilmente para considerar otras interacciones, p. mouseover evento. En la siguiente sección, exploraremos la refactorización de esta funcionalidad utilizando la API de transición View.

Usando la API de transición View

View Transition API proporciona la capacidad de crear transiciones animadas entre las vistas del sitio web. Debajo del capó, la API crea instantáneas de las vistas «frontales» y «atrás», y luego procesa la transición entre ellas. Ver las transiciones es útil para crear animaciones entre documentos y proporcionar Experiencia de usuario similar a las aplicaciones locales En el marco astronauta. Sin embargo, la API también proporciona Aplicación de estilo de hotes de hélice. Lo usaremos para reducir el JavaScript requerido en la implementación y facilitar la creación de funciones respiradas.

Para este enfoque, ya no necesitamos estar solos #highlight elemento. En cambio, podemos .active Navegue por el proyecto directamente con el pseudo-selector y deje que la API de transición View maneje las animaciones entre la UIS delantera y trasera al hacer clic en un nuevo proyecto de navegación.

Primero lo desharemos de eso #highlight Elementos y su CSS relacionado, y use estilos en su lugar nav a::after Persona pseudo-seleccionada:

<nav>
  - <div id="highlight"></div>
  <a href="#" class="active">Home</a>
  <a href="#services">Services</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

- #highlight {
-  z-index: 0;
-  position: absolute;
-  height: 100%;
-  width: 0;
-  left: 0;
-  box-sizing: border-box;
-  transition: all 0.2s ease;
- }

+ nav a::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  box-sizing: border-box;
+ }

para .active En clase, incluimos view-transition-name Propiedades, desbloqueando así la magia de la API de transición View. Una vez que activamos la transición de la vista, entonces el .active Se tomarán elementos de navegación en el DOM, instantáneas de «frente» y «retroceso», y el navegador hará que el borde cruze la barra. Haremos la transición a nuestro punto de vista un nombre highlightpero teóricamente se le puede dar cualquier nombre.

nav a.active::after {
  border: 2px solid green;
  view-transition-name: highlight;
}

Una vez que tenemos un selector que contiene uno view-transition-name Los únicos pasos restantes son usar startViewTransition Método y función de devolución de llamada de paso.

const navbar = document.querySelector('nav');

// Change the active nav item on click
navbar.addEventListener('click', async  function (event) {

  if (!event.target.matches('nav a:not(.active)')) {
    return;
  }
  
  document.startViewTransition(() => {
    document.querySelector('nav a.active').classList.remove('active');

    event.target.classList.add('active');
  });
});

Lo anterior es la versión revisada click Programa de manejo. La API de transición de la vista no realiza todos los cálculos para el tamaño y la posición del límite móvil, pero maneja todos los cálculos para nosotros. Solo necesitamos llamar document.startViewTransition y pasar la función de devolución de llamada para cambiar el .active ¡clase!

Ajustar las transiciones de vista

En este punto, cuando haga clic en el enlace de navegación, notará que la transición funciona, pero puede ver algunos problemas de tamaño extraño.

Esta inconsistencia en tamaño es causada por cambios en las relaciones de aspecto durante las transiciones de vista. No entraremos en detalles aquí, pero Jake Archibald tiene una explicación detallada que puedes leer Para más información. En resumen, para garantizar que la altura del límite permanezca uniforme durante todo el proceso de transición, debemos declarar clara height para ::view-transition-old y ::view-transition-new Los pseudo selectores representan instantáneas estáticas de la vista anterior, respectivamente.

::view-transition-old(highlight) {
  height: 100%;
}

::view-transition-new(highlight) {
  height: 100%;
}

Hagamos un poco de refactorización final para resolver nuestro código moviendo la devolución de llamada a una función separada y agregando respaldo para cuando la conversión de vista no es compatible.

const navbar = document.querySelector('nav');

// change the item that has the .active class applied
const setActiveElement = (elem) => {
  document.querySelector('nav a.active').classList.remove('active');
  elem.classList.add('active');
}

// Start view transition and pass in a callback on click
navbar.addEventListener('click', async  function (event) {
  if (!event.target.matches('nav a:not(.active)')) {
    return;
  }

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    setActiveElement(event.target);
    return;
  }
  
  document.startViewTransition(() => setActiveElement(event.target));
});

¡Esta es nuestra barra de navegación impulsada por la transición de nuestra vista! Al hacer clic en diferentes enlaces, observe una transición suave.

en conclusión

Animación y transición entre los estados de interfaz de usuario del sitio web solía requerir muchas bibliotecas externas de Kilobyte, así como un código detallado, confuso y propenso a errores, pero Vanilla JavaScript y CSS han combinado la funcionalidad para implementar Interacciones similares a las aplicaciones locales sin interrumpir bancos. Demostramos esto implementando el modo de navegación «móvil destacado» utilizando dos métodos: transición CSS y getBoundingClientRect() Método y ver API de transición.

recurso

(GG, YK)