ホームページ >ウェブフロントエンド >CSSチュートリアル >アンカーポジショニングを使用したファンシーメニューナビゲーション

アンカーポジショニングを使用したファンシーメニューナビゲーション

Joseph Gordon-Levittオリジナル: 2025-03-07 17:14:13938ブラウズ

Fancy Menu Navigation Using Anchor Positioning

CSSアンカーポイントの位置決め機能について聞いたことがあると思いますよね？この機能により、ページ上の任意の要素を別の要素であるアンカーポイントにリンクできます。すべてのツールチップに非常に役立ちますが、他の多くの良い結果も作成します。

この記事ではメニューナビゲーションを調査し、アンカーポジショニングに依存してリンクに優れたホバーエフェクトを作成します。

かっこいいですよね？スライド効果があり、青い長方形はスムーズな遷移を通じてテキストコンテンツに完全に適応します。アンカーポジショニングに慣れていない場合は、この例は簡単であり、この新しい機能の基本を提供するため、この例は完璧です。別の例を学ぶので、最後に固執します！

この執筆時点では、クロムベースのブラウザのみがアンカーポジショニングを完全にサポートすることに注意してください。他のブラウザがこの機能をより広くサポートする前に、ChromeやEdgeなどのブラウザでデモを表示する必要があります。

https://www.php.cn/link/93ac0c550dd620dc7b88e5fe05c705cnie15bhttps://www.php.cn/link/93ac0c5050d6620dc7b888e5fe05wwwppsppspps. n/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を使用して要素を水平方向に整列させました。

スライディング効果

最初に、効果がどのように機能するかを理解しましょう。一見すると、非常に小さな高さに縮み、ホバー要素に移動し、その後フル高さに成長する長方形があるようです。これは視覚効果ですが、実際には複数の要素が関係しています！

これは私の最初のデモであり、私は異なる色を使用して、何が起こっているのかをよりよく理解しています。

各メニュー項目には、縮小または成長できる独自の「要素」があります。次に、異なるメニュー項目の間にスライドする共通の「要素」（赤の要素」（赤の要素）があります。最初の効果は、バックグラウンドアニメーションを使用して行われ、2番目の効果は、アンカーポイントの位置決めが発生する場所です！

バックグラウンドアニメーション

最初の部分では、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％の高さの勾配を定義します。勾配構文は奇妙に見えるかもしれませんが、モノクロ勾配を持つことができるのは最短構文です。

関連： "モノクロ勾配を正しく定義する方法"

次に、メニュー項目がホバリングされているか、アクティブなクラスがある場合、高さを100％に設定します。ここでの遅延の使用に注意して、収縮後に成長が発生することを確認してください。

最後に、.Activeアイテムの特別なケースに対処する必要があります。アイテム（アクティブアイテムではなく）をホバリングすると、.Activeアイテムは縮小効果を得ます（勾配高さは0％に等しくなります）。これは、コードの3番目のセレクターが行うことです。

最初のアニメーションが終了しました！ 2番目のセレクターで定義した遅延により、収縮が完了した後に成長が始まる方法に注意してください。アンカーポジショニングアニメーション

最初のアニメーションは非常に簡単です。各プロジェクトには独自のバックグラウンドアニメーションがあります。つまり、背景が自動的に空間を満たすため、テキストコンテンツを気にする必要はありません。

1つの要素を使用して、各アイテムのテキストに合わせて幅を調整しながら、すべてのメニュー項目の間をスライドする2番目のアニメーションを実行します。これは、アンカーポジショニングが役立つ場所です。

次のコードから始めましょう：

追加の要素を追加しないようにするために、ULで擬似要素を使用することを好みます。それは絶対に配置する必要があり、私たちはアンカーの位置を作動させるために2つのプロパティに依存します。

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

Anchor-Name属性を使用して、アンカーポイントを定義します。メニュー項目がホバリングされているか、。アクティブクラスがある場合、アンカー要素になります。別のアイテムがホバリングしている場合は、.Activeアイテムからアンカーポイントを削除する必要があります（したがって、コードの最後のセレクター）。つまり、一度に定義されているアンカーポイントは1つだけです。

その後、Position-Anchor属性を使用して、擬似要素をアンカーポイントにリンクします。 2つが同じ表記法を使用する方法に注意してください。これは、たとえば、@KeyFramesを特定の名前で定義する方法に似ており、アニメーションプロパティで使用する方法に似ています。

構文を使用する必要があることを忘れないでください。つまり、名前は常に2つのダッシュ（ - ）で始まる必要があります。

擬似要素は正しく配置されますが、次元を定義していないため、何も見られません！次のコードを追加しましょう：

height属性は単純ですが、Anchor（）は新しいメンバーです。これがJuan Diegoが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;
}

css anchor（）関数は、アンカー要素の片側を取り、それをその位置にある

に解析します。インラインプロパティ（上、下、下、左、右など）にのみ使用でき、通常、アンカーポイントに比べて完全に配置された要素を配置するために使用されます。

MDNページも確認しましょう：

anchor（）CSS関数は、アンカー位置決め要素の埋め込み属性値で使用でき、関連するアンカー要素エッジ位置に比べて長さの値を返します。

通常、左：0を使用して、その含有ブロックの左端に絶対要素を配置します（つまり、位置を持つ最も近い先祖：相対）。左：アンカー（左）は同じことを行いますが、ブロックを含むのではなく、関連するアンカー要素を考慮します。

それだけです - 私たちは終わりました！以下のデモのメニュー項目をホバリングして、擬似要素がそれらの間でどのようにスライドするかを確認します。

メニュー項目にマウスをホバリングするたびに、擬似要素の新しいアンカーになります（ul：before）。これはまた、アンカー（...）値が変更され、スライド効果が発生することを意味します！移行を使用することを忘れないでください。そうしないと、突然の変化があります。

次のようなコードを記述することもできます

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

言い換えれば、左、右、下などの物理的特性を使用する代わりに、挿入図の略語に頼ることができ、ポジションアンカーを定義する代わりに、アンカーの名前をアンカー（）関数に含めることができます。ここで同じ名前を3回繰り返しましたが、これは最良の選択肢ではないかもしれませんが、場合によっては、要素に複数のアンカーを検討することを望むかもしれません。その場合、この構文は理にかなっています。

2つの効果を組み合わせる

さて、2つの効果、

void を組み合わせて、幻覚は完璧です！

遅延が重要な遷移値に注意してください：

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

一連の3つのアニメーションがあります。グラデーションの高さを除去し、擬似エレメントをスライドさせ、勾配の高さを上げます。そのため、すべてをまとめるために遅延を設定する必要があります。これが、擬似要素スライドの場合、アニメーション期間（遷移：.2.2s）に等しい遅延がある理由ですが、成長部分の場合、遅延は期間の2倍に等しくなります（遷移：.2s.4s）。

バウンス効果？なぜだめですか？！

強調表示された長方形が小さな円に変形し、次のアイテムにジャンプしてから、再び長方形に変形する別の奇妙なアニメーションを試してみましょう！

この例はあまり説明しません。これはコードを分析するための宿題だからです！何が起こっているのかを開梱できるように、いくつかのヒントを提供します。

前の効果と同様に、2つのアニメーションを組み合わせました。最初のものについては、各メニュー項目の擬似要素を使用します。変形をシミュレートするために、サイズ変更と国境となることを示します。 2番目のアニメーションでは、ul擬似要素を使用して小さな円を作成します。これはメニュー項目の間を移動します。

これは、各アニメーションをより適切に視覚化するためのデモの別のバージョン、異なる色、より遅い遷移です。

トリッキーな部分はジャンプ効果です。奇妙なCubic-Bezier（）を使用しましたが、CSS-Tricksの記事「Cubic-Bezier（）を使用した高度なCSSアニメーション」でこの手法を説明する詳細な記事があります。

結論

アンカーポジショニング機能を使用して、この小さな実験を楽しんだことを願っています。 3つのプロパティ/値しか見ていませんが、この新しい機能を使用する準備を整えるのに十分です。アンカー名とポジションアンカーの属性は、要素（通常はこのコンテキストでは「ターゲット」要素と呼ばれる）を別の要素にリンクする必須部分です（このコンテキストでは「アンカー」要素を呼び出します）。そこから、Anchor（）関数を使用して位置を制御できます。

アンカーポジショニングを使用したファンシーメニューナビゲーション

最初のアニメーションは非常に簡単です。各プロジェクトには独自のバックグラウンドアニメーションがあります。つまり、背景が自動的に空間を満たすため、テキストコンテンツを気にする必要はありません。

関連記事