Fancy Menu Navigation Using Anchor Positioning
You have for sure heard about the new CSS Anchor Positioning, right? It’s a feature that allows you to link any element from the page to another one, i.e., the anchor. It’s useful for all the tooltip stuff, but it can also create a lot of other nice effects.
In this article, we will study menu navigation where I rely on anchor positioning to create a nice hover effect on links.
Cool, right? We have a sliding effect where the blue rectangle adjusts to fit perfectly with the text content over a nice transition. If you are new to anchor positioning, this example is perfect for you because it’s simple and allows you to discover the basics of this new feature. We will also study another example so stay until the end!
Note that only Chromium-based browsers fully support anchor positioning at the time I’m writing this. You’ll want to view the demos in a browser like Chrome or Edge until the feature is more widely supported in other browsers.
The initial configuration
Let’s start with the HTML structure which is nothing but a nav element containing an unordered list of links:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>We will not spend too much time explaining this structure because it can be different if your use case is different. Simply ensure the semantic is relevant to what you are trying to do. As for the CSS part, we will start with some basic styling to create a horizontal menu navigation.
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
gap: .5rem;
font-size: 2.2rem;
}
ul li a {
color: #000;
text-decoration: none;
font-weight: 900;
line-height: 1.5;
padding-inline: .2em;
display: block;
}Nothing fancy so far. We remove some default styling and use Flexbox to align the elements horizontally.
Sliding effect
First off, let’s understand how the effect works. At first glance, it looks like we have one rectangle that shrinks to a small height, moves to the hovered element, and then grows to full height. That’s the visual effect, but in reality, more than one element is involved!
Here is the first demo where I am using different colors to better see what is happening.
Each menu item has its own “element” that shrinks or grows. Then we have a common “element” (the one in red) that slides between the different menu items. The first effect is done using a background animation and the second one is where anchor positioning comes into play!
The background animation
We will animate the height of a CSS gradient for this first part:
/* 1 */
ul li {
background:
conic-gradient(lightblue 0 0)
bottom/100% 0% no-repeat;
transition: .2s;
}
/* 2 */
ul li:is(:hover,.active) {
background-size: 100% 100%;
transition: .2s .2s;
}
/* 3 */
ul:has(li:hover) li.active:not(:hover) {
background-size: 100% 0%;
transition: .2s;
}We’ve defined a gradient with a 100% width and 0% height, placed at the bottom. The gradient syntax may look strange, but it’s the shortest one that allows me to have a single-color gradient.
Related: “How to correctly define a one-color gradient”
Then, if the menu item is hovered or has the .active class, we make the height equal to 100%. Note the use of the delay here to make sure the growing happens after the shrinking.
Finally, we need to handle a special case with the .active item. If we hover any item (that is not the active one), then the .active item gets the shirking effect (the gradient height is equal to 0%). That’s the purpose of the third selector in the code.
Our first animation is done! Notice how the growing begins after the shrinking completes because of the delay we defined in the second selector.
The anchor positioning animation
The first animation was quite easy because each item had its own background animation, meaning we didn’t have to care about the text content since the background automatically fills the whole space.
We will use one element for the second animation that slides between all the menu items while adapting its width to fit the text of each item. This is where anchor positioning can help us.
Let’s start with the following code:
ul:before {
content:"";
position: absolute;
position-anchor: --li;
background: red;
transition: .2s;
}
ul li:is(:hover, .active) {
anchor-name: --li;
}
ul:has(li:hover) li.active:not(:hover) {
anchor-name: none;
}To avoid adding an extra element, I will prefer using a pseudo-element on the ul. It should be absolutely-positioned and we will rely on two properties to activate the anchor positioning.
We define the anchor with the anchor-name property. When a menu item is hovered or has the .active class, it becomes the anchor element. We also have to remove the anchor from the .active item if another item is in a hovered state (hence, the last selector in the code). In other words, only one anchor is defined at a time.
Then we use the position-anchor property to link the pseudo-element to the anchor. Notice how both use the same notation --li. It’s similar to how, for example, we define @keyframes with a specific name and later use it inside an animation property. Keep in mind that you have to use the syntax, meaning the name must always start with two dashes (--).
The pseudo-element is correctly placed but nothing is visible because we didn’t define any dimension! Let’s add the following code:
ul:before {
bottom: anchor(bottom);
left: anchor(left);
right: anchor(right);
height: .2em;
}The height property is trivial but the anchor() is a newcomer. Here’s how Juan Diego describes it in the Almanac:
The CSS
anchor()function takes an anchor element’s side and resolves to thewhere it is positioned. It can only be used in inset properties (e.g.top,bottom,bottom,left,right, etc.), normally to place an absolute-positioned element relative to an anchor.
Let’s check the MDN page as well:
The
anchor()CSS function can be used within an anchor-positioned element’s inset property values, returning a length value relative to the position of the edges of its associated anchor element.
Usually, we use left: 0 to place an absolute element at the left edge of its containing block (i.e., the nearest ancestor having position: relative). The left: anchor(left) will do the same but instead of the containing block, it will consider the associated anchor element.
That’s all — we are done! Hover the menu items in the below demo and see how the pseudo-element slides between them.
Each time you hover over a menu item it becomes the new anchor for the pseudo-element (the ul:before). This also means that the anchor(...) values will change creating the sliding effect! Let’s not forget the use of the transition which is important otherwise, we will have an abrupt change.
We can also write the code differently like this:
ul:before {
content:"";
position: absolute;
inset: auto anchor(right, --li) anchor(bottom, --li) anchor(left, --li);
height: .2em;
background: red;
transition: .2s;
}In other words, we can rely on the inset shorthand instead of using physical properties like left, right, and bottom, and instead of defining position-anchor, we can include the anchor’s name inside the anchor() function. We are repeating the same name three times which is probably not optimal here but in some situations, you may want your element to consider multiple anchors, and in such cases, this syntax will make sense.
Combining both effects
Now, we combine both effects and, tada, the illusion is perfect!
Pay attention to the transition values where the delay is important:
ul:before {
transition: .2s .2s;
}
ul li {
transition: .2s;
}
ul li:is(:hover,.active) {
transition: .2s .4s;
}
ul:has(li:hover) li.active:not(:hover) {
transition: .2s;
}We have a sequence of three animations — shrink the height of the gradient, slide the pseudo-element, and grow the height of the gradient — so we need to have delays between them to pull everything together. That’s why for the sliding of the pseudo-element we have a delay equal to the duration of one animation (transition: .2 .2s) and for the growing part the delay is equal to twice the duration (transition: .2s .4s).
Bouncy effect? Why not?!
Let’s try another fancy animation in which the highlight rectangle morphs into a small circle, jumps to the next item, and transforms back into a rectangle again!
I won’t explain too much for this example as it’s your homework to dissect the code! I’ll offer a few hints so you can unpack what’s happening.
Like the previous effect, we have a combination of two animations. For the first one, I will use the pseudo-element of each menu item where I will adjust the dimension and the border-radius to simulate the morphing. For the second animation, I will use the ul pseudo-element to create a small circle that I move between the menu items.
Here is another version of the demo with different coloration and a slower transition to better visualize each animation:
The tricky part is the jumping effect where I am using a strange cubic-bezier() but I have a detailed article where I explain the technique in my CSS-Tricks article “Advanced CSS Animation Using cubic-bezier()”.
Conclusion
I hope you enjoyed this little experimentation using the anchor positioning feature. We only looked at three properties/values but it’s enough to prepare you for this new feature. The anchor-name and position-anchor properties are the mandatory pieces for linking one element (often called a “target” element in this context) to another element (what we call an “anchor” element in this context). From there, you have the anchor() function to control the position.
Related: CSS Anchor Positioning Guide
Fancy Menu Navigation Using Anchor Positioning originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
