Tuesday, February 11, 2025
HomeWeb developmentFancy Menu Navigation Utilizing Anchor Positioning

Fancy Menu Navigation Utilizing Anchor Positioning


You’ve gotten for certain heard in regards to the new CSS Anchor Positioning, proper? It’s a function that means that you can hyperlink any factor from the web page to a different one, i.e., the anchor. It’s helpful for all of the tooltip stuff, however it will possibly additionally create numerous different good results.

On this article, we’ll research menu navigation the place I depend on anchor positioning to create a pleasant hover impact on hyperlinks.

Cool, proper? Now we have a sliding impact the place the blue rectangle adjusts to suit completely with the textual content content material over a pleasant transition. If you’re new to anchor positioning, this instance is ideal for you as a result of it’s easy and means that you can uncover the fundamentals of this new function. We can even research one other instance so keep till the tip!

Observe that solely Chromium-based browsers totally help anchor positioning on the time I’m penning this. You’ll wish to view the demos in a browser like Chrome or Edge till the function is extra broadly supported in different browsers.

The preliminary configuration

Let’s begin with the HTML construction which is nothing however a nav factor containing an unordered checklist of hyperlinks:

<nav>
  <ul>
    <li><a href="#">Residence</a></li>
    <li class="energetic"><a href="#">About</a></li>
    <li><a href="#">Initiatives</a></li>
    <li><a href="#">Weblog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

We is not going to spend an excessive amount of time explaining this construction as a result of it may be completely different in case your use case is completely different. Merely make sure the semantic is related to what you are attempting to do. As for the CSS half, we’ll begin with some primary styling to create a horizontal menu navigation.

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

ul li a {
  shade: #000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  show: block;
}

Nothing fancy to this point. We take away some default styling and use Flexbox to align the weather horizontally.

Sliding impact

First off, let’s perceive how the impact works. At first look, it appears like we’ve one rectangle that shrinks to a small peak, strikes to the hovered factor, after which grows to full peak. That’s the visible impact, however in actuality, a couple of factor is concerned!

Right here is the primary demo the place I’m utilizing completely different colours to higher see what is occurring.

Every menu merchandise has its personal “factor” that shrinks or grows. Then we’ve a standard “factor” (the one in crimson) that slides between the completely different menu gadgets. The primary impact is finished utilizing a background animation and the second is the place anchor positioning comes into play!

The background animation

We are going to animate the peak of a CSS gradient for this primary half:

/* 1 */
ul li {
  background: 
    conic-gradient(lightblue 0 0)
    backside/100% 0% no-repeat;
  transition: .2s;
}

/* 2 */
ul li:is(:hover,.energetic) {
  background-size: 100% 100%;
  transition: .2s .2s;
}

/* 3 */
ul:has(li:hover) li.energetic:not(:hover) {
  background-size: 100% 0%;
  transition: .2s;
}

We’ve outlined a gradient with a 100% width and 0% peak, positioned on the backside. The gradient syntax could look unusual, but it surely’s the shortest one that permits me to have a single-color gradient.

Associated: “The right way to appropriately outline a one-color gradient”

Then, if the menu merchandise is hovered or has the .energetic class, we make the peak equal to 100%. Observe using the delay right here to verify the rising occurs after the shrinking.

Lastly, we have to deal with a particular case with the .energetic merchandise. If we hover any merchandise (that’s not the energetic one), then the .energetic merchandise will get the shirking impact (the gradient peak is the same as 0%). That’s the aim of the third selector within the code.

Our first animation is finished! Discover how the rising begins after the shrinking completes due to the delay we outlined within the second selector.

The anchor positioning animation

The primary animation was fairly simple as a result of every merchandise had its personal background animation, that means we didn’t must care in regards to the textual content content material for the reason that background routinely fills the entire area.

We are going to use one factor for the second animation that slides between all of the menu gadgets whereas adapting its width to suit the textual content of every merchandise. That is the place anchor positioning will help us.

Let’s begin with the next code:

ul:earlier than {
  content material:"";
  place: absolute;
  position-anchor: --li;
  background: crimson;
  transition: .2s;
}

ul li:is(:hover, .energetic) {
  anchor-name: --li;
}

ul:has(li:hover) li.energetic:not(:hover) {
  anchor-name: none;
}

To keep away from including an additional factor, I’ll choose utilizing a pseudo-element on the ul. It ought to be absolutely-positioned and we’ll depend on two properties to activate the anchor positioning.

We outline the anchor with the anchor-name property. When a menu merchandise is hovered or has the .energetic class, it turns into the anchor factor. We additionally must take away the anchor from the .energetic merchandise if one other merchandise is in a hovered state (therefore, the final selector within the code). In different phrases, just one anchor is outlined at a time.

Then we use the position-anchor property to hyperlink the pseudo-element to the anchor. Discover how each use the identical notation --li. It’s much like how, for instance, we outline @keyframes with a selected title and later use it inside an animation property. Remember the fact that you need to use the <dashed-indent> syntax, that means the title should at all times begin with two dashes (--).

The pseudo-element is appropriately positioned however nothing is seen as a result of we didn’t outline any dimension! Let’s add the next code:

ul:earlier than {
  backside: anchor(backside);
  left: anchor(left);
  proper: anchor(proper);
  peak: .2em;  
}

The peak property is trivial however the anchor() is a newcomer. Right here’s how Juan Diego describes it within the Almanac:

The CSS anchor() operate takes an anchor factor’s aspect and resolves to the <size> the place it’s positioned. It could possibly solely be utilized in inset properties (e.g. high, backside, backside, left, proper, and so on.), usually to put an absolute-positioned factor relative to an anchor.

Let’s verify the MDN web page as properly:

The anchor() CSS operate can be utilized inside an anchor-positioned factor’s inset property values, returning a size worth relative to the place of the perimeters of its related anchor factor.

Often, we use left: 0 to put an absolute factor on the left fringe of its containing block (i.e., the closest ancestor having place: relative). The left: anchor(left) will do the identical however as a substitute of the containing block, it would take into account the related anchor factor.

That’s all — we’re achieved! Hover the menu gadgets within the beneath demo and see how the pseudo-element slides between them.

Every time you hover over a menu merchandise it turns into the brand new anchor for the pseudo-element (the ul:earlier than). This additionally implies that the anchor(...) values will change creating the sliding impact! Let’s not overlook using the transition which is essential in any other case, we can have an abrupt change.

We are able to additionally write the code in a different way like this:

ul:earlier than {
  content material:"";
  place: absolute;
  inset: auto anchor(proper, --li) anchor(backside, --li) anchor(left, --li);
  peak: .2em;  
  background: crimson;
  transition: .2s;
}

In different phrases, we will depend on the inset shorthand as a substitute of utilizing bodily properties like left, proper, and backside, and as a substitute of defining position-anchor, we will embrace the anchor’s title contained in the anchor() operate. We’re repeating the identical title thrice which might be not optimum right here however in some conditions, it’s your decision your factor to think about a number of anchors, and in such circumstances, this syntax will make sense.

Combining each results

Now, we mix each results and, tada, the phantasm is ideal!

Take note of the transition values the place the delay is essential:

ul:earlier than {
  transition: .2s .2s;
}

ul li {
  transition: .2s;
}

ul li:is(:hover,.energetic) {
  transition: .2s .4s;
}

ul:has(li:hover) li.energetic:not(:hover) {
  transition: .2s;
}

Now we have a sequence of three animations — shrink the peak of the gradient, slide the pseudo-element, and develop the peak of the gradient — so we have to have delays between them to tug every part collectively. That’s why for the sliding of the pseudo-element we’ve a delay equal to the period of 1 animation (transition: .2 .2s) and for the rising half the delay is the same as twice the period (transition: .2s .4s).

Bouncy impact? Why not?!

Let’s strive one other fancy animation by which the spotlight rectangle morphs right into a small circle, jumps to the subsequent merchandise, and transforms again right into a rectangle once more!

I received’t clarify an excessive amount of for this instance because it’s your homework to dissect the code! I’ll supply a couple of hints so you may unpack what’s taking place.

Just like the earlier impact, we’ve a mix of two animations. For the primary one, I’ll use the pseudo-element of every menu merchandise the place I’ll regulate the dimension and the border-radius to simulate the morphing. For the second animation, I’ll use the ul pseudo-element to create a small circle that I transfer between the menu gadgets.

Right here is one other model of the demo with completely different coloration and a slower transition to higher visualize every animation:

The difficult half is the leaping impact the place I’m utilizing an odd cubic-bezier() however I’ve an in depth article the place I clarify the method in my CSS-Methods article “Superior CSS Animation Utilizing cubic-bezier().

Conclusion

I hope you loved this little experimentation utilizing the anchor positioning function. We solely checked out three properties/values but it surely’s sufficient to organize you for this new function. The anchor-name and position-anchor properties are the obligatory items for linking one factor (typically known as a “goal” factor on this context) to a different factor (what we name an “anchor” factor on this context). From there, you’ve the anchor() operate to manage the place.

Associated: CSS Anchor Positioning Information

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments