使用錨定位的花式菜單導航

CSS錨點定位功能想必您已有所耳聞，對吧？這項功能允許您將頁面上的任何元素鏈接到另一個元素，即錨點。它對所有工具提示都非常有用，但也能創造許多其他不錯的效果。

本文將研究菜單導航，我依靠錨點定位在鏈接上創建出色的懸停效果。

很酷，對吧？我們有一個滑動效果，藍色矩形通過流暢的過渡完美地適應文本內容。如果您不熟悉錨點定位，此示例非常適合您，因為它很簡單，可以讓您了解這項新功能的基礎知識。我們還將學習另一個示例，所以請堅持到最後！

請注意，在我撰寫本文時，只有基於Chromium的瀏覽器完全支持錨點定位。在其他瀏覽器更廣泛地支持此功能之前，您需要在Chrome或Edge等瀏覽器中查看演示。

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 初始配置

讓我們從HTML結構開始，它只是一個包含無序鏈接列表的nav元素：

<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>

我們不會花太多時間解釋這個結構，因為如果您的用例不同，它也可能不同。只需確保語義與您嘗試執行的操作相關即可。至於CSS部分，我們將從一些基本樣式開始，以創建水平菜單導航。

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;
}

到目前為止，沒有什麼特別的。我們刪除了一些默認樣式並使用Flexbox將元素水平對齊。

滑動效果

首先，讓我們了解效果的工作原理。乍一看，似乎我們有一個矩形，它縮小到很小的高度，移動到懸停的元素，然後增長到全高。這就是視覺效果，但實際上，涉及多個元素！

這是我的第一個演示，我使用不同的顏色來更好地了解正在發生的事情。

每個菜單項都有其自己的“元素”可以收縮或增長。然後我們有一個公共“元素”（紅色的那個），它在不同的菜單項之間滑動。第一個效果是使用背景動畫完成的，第二個效果是錨點定位發揮作用的地方！

背景動畫

對於第一部分，我們將動畫化CSS漸變的高度：

/* 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;
}

我們定義了一個寬度為100%，高度為0%的漸變，位於底部。漸變語法可能看起來很奇怪，但它是允許我擁有單色漸變的最短語法。

相關：“如何正確定義單色漸變”

然後，如果菜單項被懸停或具有.active類，我們將高度設置為100%。請注意此處延遲的使用，以確保增長發生在收縮之後。

最後，我們需要處理.active項的特殊情況。如果我們懸停任何項（不是活動項），則.active項會獲得收縮效果（漸變高度等於0%）。這就是代碼中第三個選擇器的作用。

我們的第一個動畫完成了！請注意，由於我們在第二個選擇器中定義的延遲，增長是如何在收縮完成之後開始的。

錨點定位動畫

第一個動畫非常容易，因為每個項目都有自己的背景動畫，這意味著我們不必關心文本內容，因為背景會自動填充整個空間。

我們將使用一個元素進行第二個動畫，該元素在所有菜單項之間滑動，同時調整其寬度以適應每個項目的文本。這就是錨點定位可以幫助我們的地方。

讓我們從以下代碼開始：

<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>

為了避免添加額外的元素，我更喜歡在ul上使用偽元素。它應該是絕對定位的，我們將依靠兩個屬性來激活錨點定位。

我們使用anchor-name屬性定義錨點。當菜單項被懸停或具有.active類時，它將成為錨元素。如果另一個項目處於懸停狀態，我們還必須從.active項目中刪除錨點（因此，代碼中的最後一個選擇器）。換句話說，一次只定義一個錨點。

然後我們使用position-anchor屬性將偽元素鏈接到錨點。請注意兩者如何使用相同的表示法--li。這類似於例如，我們如何使用特定名稱定義@keyframes，然後在animation屬性中使用它。請記住，您必須使用語法，這意味著名稱必須始終以兩個破折號（--）開頭。

偽元素已正確放置，但什麼也看不見，因為我們沒有定義任何維度！讓我們添加以下代碼：

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;
}

height屬性很簡單，但anchor()是新成員。以下是Juan Diego在Almanac中對其的描述：

CSS anchor()函數獲取錨元素的一側並解析為其定位的。它只能用於內嵌屬性（例如top、bottom、bottom、left、right等），通常用於相對於錨點放置絕對定位的元素。

讓我們也查看MDN頁面：

anchor() CSS 函數可以在錨定位元素的內嵌屬性值中使用，返回相對於其關聯錨元素邊緣位置的長度值。

通常，我們使用left: 0將絕對元素放置在其包含塊（即具有position: relative的最近祖先）的左邊緣。 left: anchor(left)將執行相同的操作，但它將考慮關聯的錨元素，而不是包含塊。

就是這樣——我們完成了！在下面的演示中懸停菜單項，看看偽元素是如何在它們之間滑動的。

每次您將鼠標懸停在菜單項上時，它都會成為偽元素（ul:before）的新錨點。這也意味著anchor(...)值將發生變化，從而產生滑動效果！讓我們不要忘記使用transition，否則我們將有一個突然的變化。

我們也可以這樣編寫代碼：

<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>

換句話說，我們可以依靠inset簡寫，而不是使用left、right和bottom等物理屬性，並且代替定義position-anchor，我們可以在anchor()函數中包含錨點的名稱。我們在這裡重複了三次相同的名稱，這可能不是最佳選擇，但在某些情況下，您可能希望您的元素考慮多個錨點，在這種情況下，此語法將很有意義。

結合兩種效果

現在，我們將兩種效果結合起來，瞧，幻覺完美了！

請注意transition值，其中延遲很重要：

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;
}

我們有一系列三個動畫——縮小漸變的高度、滑動偽元素和增大漸變的高度——因此我們需要在它們之間設置延遲才能將所有內容組合在一起。這就是為什麼對於偽元素的滑動，我們有一個等於一個動畫持續時間的延遲（transition: .2 .2s），而對於增長部分，延遲等於持續時間的兩倍（transition: .2s .4s）。

彈跳效果？為什麼不呢？ ！

讓我們嘗試另一個奇特的動畫，其中高亮矩形變形為一個小圓圈，跳到下一個項目，然後再次變形回矩形！

我不會過多解釋這個例子，因為這是你剖析代碼的作業！我將提供一些提示，以便您可以解包正在發生的事情。

與之前的效果一樣，我們結合了兩個動畫。對於第一個，我將使用每個菜單項的偽元素，我將調整尺寸和border-radius來模擬變形。對於第二個動畫，我將使用ul偽元素創建一個小的圓圈，我將它移動到菜單項之間。

這是另一個版本的演示，顏色不同，過渡速度較慢，以便更好地可視化每個動畫：

棘手的部分是跳躍效果，我使用了一個奇怪的cubic-bezier()，但我有一篇詳細的文章在我的CSS-Tricks文章“使用cubic-bezier()的先進CSS動畫”中解釋了這種技術。

結論

我希望您喜歡使用錨點定位功能進行的這個小實驗。我們只查看了三個屬性/值，但這足以讓您準備好使用這項新功能。 anchor-name和position-anchor屬性是將一個元素（在此上下文中通常稱為“目標”元素）鏈接到另一個元素（在此上下文中我們稱為“錨”元素）的強制性部分。從那裡，您可以使用anchor()函數來控制位置。

相關：CSS錨點定位指南

以上是使用錨定位的花式菜單導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！