素晴らしい CSS ナビゲーション バーの下線効果

素晴らしい CSS ナビゲーション バーの下線効果

中国初のカッター github.com/chokcoco

まず、ここに画像があります。純粋な CSS を使用して次の効果を作成するにはどうすればよいでしょうか?

読み続ける前に、少し時間を取ってください。上記の効果について考えたり、自分で試してみたりして、JS の助けを借りずに上記の効果を巧みに実現できるかどうかを確認してください。

はい、続けます。この影響は、私がビジネス開発の過程で遭遇した同様の小さな問題です。実際、Javascript を使うように言われたとしても、私の第一反応は「とても面倒だ」ということになるでしょう。そこで、CSS のみを使用してこの効果を実現することは可能かどうか疑問に思いました。

要件の定義

次の要件を持つ簡単なルールを定義しましょう。

HTML 構造が次のようになっていると仮定します。

<ul>
  <li>素晴らしい CSS</li>
  <li>ナビゲーション バー</li>
  <li>カーソルの小さな下線が続きます</li>
  <li>純粋な CSS</li>
  <li>ナビゲーションの下線</li>
</ul>
  • ナビゲーションliの幅は固定されていません
  • ナビゲーションのliからliへ移動すると、下線が左から右へ移動します。同様に、ナビゲーションの右のliから左のliに移動すると、下線は右から左に移動します。

実現要件

最初にこの効果を見たとき、次のアニメーションは CSS だけでは実現不可能だと感じました。

CSS のみで実現したい場合は、別の方法を見つけて、いくつかのトリッキーな方法を使用するしかありません。

さて、いくつかのトリックと CSS を使用して、この効果を段階的に実現してみましょう。困難を分析する:

幅は固定されていない

最初の難点は、 liの幅が固定されていないことです。したがって、 li要素自体の幅を調整する必要があるかもしれません。

liの幅は固定されていないため、対応する下線の長さはそれに応じて調整する必要があります。当然、 border-bottom使用を検討します。

li {
    下境界線: 2pxsolid#000;
}

つまり、今は次のようになります (li は互いに接続され、li 間のギャップはpaddingを使用して作成されます)。

デフォルトでは非表示、アニメーション効果

もちろん、最初はアンダースコアがないので、それを非表示にする必要があるかもしれません。

li {
    下境界線: 0pxsolid#000;
}

疑似要素でやり直す

これは機能していないようです。非表示にした後、 liホバーすると下線のアニメーションが必要になり、 li自体は移動できないからです。そこで、疑似要素の使用を検討します。各li疑似要素に下線を適用します。

li::before {
    コンテンツ: "";
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    下境界線: 2pxsolid#000;
}

アニメーションの最初のステップを考えてみましょう。マウスをホバーすると、下線が移動して片側から拡大します。したがって、絶対位置指定を使用して、 li疑似要素の幅を 0 に設定します。ホバーすると、幅はwidth: 0 -> width: 100%に変わります。CSS は次のとおりです。

li::before {
    コンテンツ: "";
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 0;
    高さ: 100%;
    下境界線: 2pxsolid#000;
}

li:hover::before {
    幅: 100%;
}

以下の結果が得られます。

左に移動して左に出て、右に移動して右に出て

よし、成功に一歩近づいたような気がする。今、私たちは最も難しい問題に取り組まなければなりません。

ナビゲーションの左のli li移動すると、下線が左から右に移動するように、線をカーソルの動きに合わせて移動させる方法。同様に、ナビゲーションの右のliから左のliに移動すると、下線は右から左に移動します。

現在の効果を詳しく見てみましょう。

最初のliから 2 番目のliに切り替えるときに、最初のli下線の引き込み方向が正しくありません。したがって、下線の初期位置をシフトしてleft: 100%に設定し、下線が引き込まれるたびに最初のliが正しくなるようにする必要があります。

li::before {
    コンテンツ: "";
    位置: 絶対;
    上: 0;
    左: 100%;
    幅: 0;
    高さ: 100%;
    下境界線: 2pxsolid#000;
}

li:hover::before {
    左: 0;
    幅: 100%;
}

効果をご覧ください:

さて、2 枚の写真を注意深く比較すると、2 番目の効果は実際にはゴマを拾い、スイカを失うことです。最初のliの方向は正しいですが、2 番目のliの下線の方向が間違っています。

魔法のセレクター

したがって、現在のホバーliの下線の移動モードを変更せずに (非常に混乱を招く)、次のliの下線の移動モードを変更できる方法が緊急に必要です。

そうです、ここでは~セレクターを使用してこの難しいミッションを完了できます。これは、この例で最も重要な部分でもあります。

現在ホバーされているliの場合、対応する疑似要素の下線の位置はleft: 100%ですが、 li:hover ~ li::before場合、それらの位置はleft: 0です。 CSS コードは次のとおりです。

li::before {
    コンテンツ: "";
    位置: 絶対;
    上: 0;
    左: 100%;
    幅: 0;
    高さ: 100%;
    下境界線: 2pxsolid#000;
    遷移: 0.2salllinear;
}

li:hover::before {
    幅: 100%;
    左: 0;
}

li:hover~li::before {
    左: 0;
}

この時点で、望んでいた効果が達成されました!花を撒きます。見てみましょう:

効果は良いですが、少し硬いです。イージング関数を適切に変更しアニメーション遅延を追加することで、上記の効果を実現できます。もちろん、これらは単なる付加価値に過ぎません。

完全なデモは、こちらでご覧いただけます: CodePen --Demo

やっと

この方法の最大の欠点は、最初の li を入力するときに、行が右から左にしか進まないことです。これを除けば、次の効果は非常にうまく達成できます。

長い間更新していませんでした。最近は、イーサリアムプログラミング、スマートコントラクトの記述など、ブロックチェーン関連の技術の学習に夢中になっています。今後も自分の分野にもっと力を入れ、フロントエンドの記事をもっと書いていきたいと思います。CSS の魅力はまだまだ尽きません。

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

要約する

上記は、私が紹介した素晴らしい CSS ナビゲーション バーの下線付き効果です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  クリエイティブな会社概要ウェブページデザイン

>>:  HTML と埋め込み Flash の両方におけるスクロールバーの分析と処理

推薦する

CSS3は、大きな円のドット分布と回転効果を実現するためにtransform-originを使用します。

まず、transform-origin 属性を使用する必要があります。transform 属性は必ず...

Linux RabbitMQ クラスタ構築プロセス図

1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...

MySQLの始め方から諦め方まで徹底解説 - インストール

学ぶ内容1. ソフトウェアのインストールとサーバーの設定。 2. (オプションですが、強くお勧めしま...

MySQL 8.0 の新機能 - 管理ポートの使用の概要

目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...

MySQLクライアントとサーバーのプロトコルの解釈

目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...

JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

HTML での select optgroup タグの使用の概要

時々、選択した内容をグループ化する必要があります。以前はプログラム制御を使用していました。今日、se...

Tomcat と WebLogic で純粋な HTML ファイルを展開するプロセスの分析

1. まず、純粋なHTMLファイルにはindex.htmlというエントリが必要です。 2. Tomc...

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...

MySQL トランザクション分離レベルとロックメカニズムの問題に関する深い理解

概要データベースは通常、複数のトランザクションを同時に実行します。複数のトランザクションが、同じデー...

MySQLがウィンドウ関数で合計関数を実行するときに発生する可能性のあるバグ

MySql のウィンドウ関数を使用して統計データを収集する際に、小さな問題が見つかったので、それにつ...

Squid を使用して http および https 用のプロキシ サーバーを構築する方法

nginx を導入した際に、フォワードプロキシの設定も nginx を使っていました。しかし、htt...

Axios の二次カプセル化の例 プロジェクトのデモ

1. なぜパッケージングを行うのですか?全体的なコード呼び出し、リクエストの公開処理、パーソナライズ...