Fancy Menu Navigation Using Anchor Positioning

I believe you have heard of the CSS anchor point positioning function, right? This feature allows you to link any element on the page to another element, the anchor point. It is very useful for all tooltips, but it also creates many other good results.

This article will study menu navigation, and I rely on anchor positioning to create excellent hover effects on links.

It's cool, right? We have a sliding effect, the blue rectangle perfectly adapts to the text content through a smooth transition. If you are not familiar with anchor positioning, this example is perfect for you as it is simple and will give you the basics of this new feature. We'll learn another example, so stick to the end!

Note that as of this writing, only Chromium-based browsers fully support anchor positioning. Before other browsers can support this feature more widely, you need to view the demo in browsers like Chrome or Edge.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b initial configuration

Let's start with the HTML structure, which is just a nav element containing an unordered link list:

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

We won't spend much time explaining this structure, because it may also be different if your use cases are different. Just make sure the semantics are related to what you are trying to do. As for the CSS section, we will start with some basic styles to create horizontal menu navigation.

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

So far, nothing special. We removed some default styles and used Flexbox to align the elements horizontally.

Sliding effect

First, let us understand how the effect works. At first glance, it seems we have a rectangle that shrinks to a very small height, moves to a hover element, and then grows to a full height. This is the visual effect, but in reality, multiple elements are involved!

This is my first demonstration, and I use different colors to better understand what is going on.

Each menu item has its own "element" that can shrink or grow. Then we have a common "element" (the one in red) that slides between different menu items. The first effect is done using background animation, and the second effect is where anchor point positioning comes into play!

Background animation

For the first part, we will animate the height of the CSS gradient:

/* 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 define a gradient with a width of 100% and a height of 0% at the bottom. The gradient syntax may look weird, but it is the shortest syntax that allows me to have a monochrome gradient.

Related: "How to correctly define monochrome gradient"

Then, if the menu item is hovered or has a .active class, we set the height to 100%. Please note the use of delays here to ensure that growth occurs after shrinkage.

Finally, we need to deal with special cases of .active items. If we hover any item (not the active item), the .active item will get a shrinking effect (gradient height equals 0%). This is what the third selector in the code does.

Our first animation is finished! Note how growth starts after the contraction is completed due to the delay we defined in the second selector. Anchor Positioning Animation

The first animation is very easy because each project has its own background animation, which means we don't have to care about the text content, as the background automatically fills the entire space.

We will use one element to perform a second animation that slides between all menu items while adjusting its width to fit the text of each item. This is where anchor positioning can help us.

Let's start with the following code:

To avoid adding extra elements, I prefer to use pseudo-elements on ul. It should be absolutely positioned, and we will rely on two properties to activate anchor positioning.

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

We use the anchor-name attribute to define the anchor point. When a menu item is hovered or has a .active class, it becomes an anchor element. If another item is hovering, we also have to remove the anchor point from the .active item (so, the last selector in the code). In other words, only one anchor point is defined at a time.

Then we use the position-anchor attribute to link the pseudo-element to the anchor point. Note how the two use the same notation --li. This is similar to, for example, how we define @keyframes with a specific name and then use it in the animation property. Remember that you have to use the

syntax, which means that the name must always start with two dashes (--).

The pseudo-element is placed correctly, but nothing is seen because we do not define any dimensions! Let's add the following code:

The

height attribute is simple, but anchor() is a new member. Here is what Juan Diego describes it in Almanac:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

The

CSS anchor() function takes one side of the anchor element and parses it into its positioned

. It can only be used for inline properties (such as top, bottom, bottom, left, right, etc.), and is usually used to place absolutely positioned elements relative to the anchor point.

Let's check the MDN page as well:

anchor() The CSS function can be used in the embedded attribute value of the anchor positioning element, returning the length value relative to its associated anchor element edge position.

Usually, we use left: 0 to place the absolute element on the left edge of its containing block (i.e., the nearest ancestor with position: relative). left: anchor(left) will do the same, but it will take into account the associated anchor element instead of containing blocks.

That's it - we're done! Hover the menu items in the demo below to see how pseudo-elements slide between them.

Every time you hover your mouse over a menu item, it becomes a new anchor for the pseudo-element (ul:before). This also means that the anchor(...) value will change, resulting in a sliding effect! Let's not forget to use transition or we will have a sudden change.

We can also write code like this:

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

In other words, instead of using physical properties such as left, right, and bottom, we can rely on the inset abbreviation, and instead of defining position-anchor, we can include the name of the anchor in the anchor() function. We've repeated the same name three times here, which may not be the best option, but in some cases you might want your element to consider multiple anchors, in which case this syntax will make sense.

Combining two effects

Now, we combine the two effects, void, the hallucination is perfect!

Please note the transition value, where the delay is important:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

We have a series of three animations—reduce the height of the gradient, slide the pseudo-elements, and increase the height of the gradient—so we need to set a delay between them to put everything together. This is why for pseudo-element slides, we have a delay equal to an animation duration (transition: .2.2s), while for the growth part, the delay equals twice the duration (transition: .2s.4s).

Bounce effect? why not? !

Let's try another weird animation where the highlighted rectangle deforms into a small circle, jumps to the next item, and then deforms back into the rectangle again!

I won't explain this example too much, because this is your homework for analyzing the code! I'll provide some tips so you can unpack what's going on.

As with the previous effect, we combined two animations. For the first one, I will use the pseudo-elements of each menu item, I will resize and border-radius to simulate the deformation. For the second animation, I will create a small circle using the ul pseudo-element, which I move between menu items.

This is another version of the demo, different colors and slower transitions to better visualize each animation:

The tricky part is the jump effect, I used a weird cubic-bezier(), but I have a detailed article explaining this technique in my CSS-Tricks article "Advanced CSS Animation Using cubic-bezier()".

Conclusion

I hope you enjoyed this little experiment using the anchor positioning function. We've only looked at three properties/values, but that's enough to get you ready to use this new feature. The anchor-name and position-anchor attributes are mandatory parts that link an element (usually called the "target" element in this context) to another element (we call the "anchor" element in this context). From there, you can use the anchor() function to control the position.

Related: CSS Anchor Point Points Guide

The above is the detailed content of Fancy Menu Navigation Using Anchor Positioning. For more information, please follow other related articles on the PHP Chinese website!