Tutorial: Creating a Moving-Highlight Navigation Bar with JavaScript and CSS
By
[email protected] (Blake Lundquist)
11mo ago· 8 min readen
100/100
Golden Brown
Bagelometer↗
Front-window bakery material. Catches the eye, delivers the goods.
Score100Typehow-toSentimentneutral
Summary
The article provides a tutorial by Blake Lundquist on creating a 'moving-highlight' navigation bar using JavaScript and CSS. It covers two methods: one using the `getBoundingClientRect` method for explicit animation and another leveraging the View Transition API for the same effect. The tutorial is a modern update to an older jQuery-based approach.
Key quotes
· 3 pulledThe 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.
I recently came across an old jQuery tutorial demonstrating a 'moving highlight' navigation bar and decided the concept was due for a modern upgrade.
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
You might also wanna read
CSS-Only Menu Reveal Animation Using Clip-Path Techniques
A developer shares a code exploration project implementing a menu reveal animation using only HTML and CSS with clip-path techniques. The pr
github.com·3mo ago
Recreating Apple's Liquid Glass Effect with CSS, SVG Displacement Maps, and Refraction Calculations
This article provides a hands-on technical tutorial on recreating Apple's Liquid Glass UI effect (introduced at WWDC 2025) using web technol
kube.io·8mo ago