Creating The “Moving Highlight” Navigation Bar With JavaScript And CSS

In this tutorial, Blake Lundquist walks us through two methods of creating the “moving-highlight” navigation pattern using only plain JavaScript and CSS. The first technique uses the getBoundingClientRect method to explicitly animate the border between navigation bar items when they are clicked. The second approach achieves the same functionality using the new View Transition API. https://smashingmagazine.com/2025/06/creating-moving-highlight-navigation-bar-javascript-css/

Creată 2mo | 12 iun. 2025, 00:10:06


Autentifică-te pentru a adăuga comentarii

Alte posturi din acest grup

UX Job Interview Helpers

Talking points. Smart questions. A compelling story. This guide helps you prepare for your UX job interview. And remember: no act of kindness, however small, is ever wasted. https://smashingmagazine.c

5 aug. 2025, 16:20:05 | Smashing magazine
Stories Of August (2025 Wallpapers Edition)

Do you need a little inspiration boost? Well, then our new batch of desktop wallpapers might be for you. The wallpapers are designed with love by the community for the community and can be downloaded

31 iul. 2025, 13:20:08 | Smashing magazine
The Core Model: Start FROM The Answer, Not WITH The Solution

The Core Model is a practical methodology that flips traditional digital development on its head. Instead of starting with solutions or structure, we begin with a hypothesis about what users need and

30 iul. 2025, 14:10:09 | Smashing magazine
Web Components: Working With Shadow DOM

Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader

28 iul. 2025, 11:10:16 | Smashing magazine
Designing Better UX For Left-Handed People

Today, roughly 10% of people are left-handed. Yet most products — digital and physical — aren’t designed with it in mind. Let’s change that. More design patterns in <a href="https://smart-

25 iul. 2025, 20:30:06 | Smashing magazine
Handling JavaScript Event Listeners With Parameters

Event listeners are essential for interactivity in JavaScript, but they can quietly cause memory leaks if not removed properly. And what if your event listener needs parameters? That’s where things ge

21 iul. 2025, 16:50:07 | Smashing magazine
Why Non-Native Content Designers Improve Global UX

Ensuring your product communicates clearly to a global audience is not just about localisation. Even for products that have a proper localisation process, English often remains the default language fo

18 iul. 2025, 19:20:07 | Smashing magazine