純粋な CSS を使用してドロップダウンメニューを作成するサンプルコード

導入：
最近の面接の質問を見ると、ドロップダウンメニューを実装するために CSS を使用することが多いのですが、多くの人がそれができず、最終的にはしぶしぶ JS でしか実行できないことがわかりました。正直言って驚きました。この機能は実装が非常に簡単で、初歩的な問題とも言えるものです。なぜ多くの人がやり方を知らないのでしょうか?そこで今日は、面接のヒントをいくつか紹介し、CSS を使用してドロップダウンメニューを作成する方法を紹介します。

相変わらずですね。さっそくレンダリングを見てみましょう。

1. ボタンがクリックされる前（携帯電話の場合）またはマウスがポイントされていないとき（PCの場合）

ここに画像の説明を挿入

2. マウスをクリックまたはポイントした後。

電話をクリックした後
マウスを後ろに向ける

ドロップダウンメニューを表示することができ、その実装原理も非常に簡単です。覚えておく必要があるのは、この属性のホバーという 1 つのポイントだけです。

すぐにコードを見て、後で説明しましょう。

<!DOCTYPE html>
<html>
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
    <スタイル>
        li{
            リストスタイル: なし;
            高さ: 28px;
        }
        ＃メニュー{
            表示: インラインブロック;
        }
        #メニュー #リスト {
            最大高さ: 0;
            遷移: 最大高さ 0.25 秒のイーズアウト;
            オーバーフロー: 非表示;
            背景: #f5f4f4;
            幅: 80ピクセル;
            マージン: 0;
            パディング: 0;
            テキスト配置: 中央;
        }
        #メニュー:ホバー #リスト {
            最大高さ: 200px;
            遷移: 最大高さ 0.25 秒のイーズイン;
            幅: 80ピクセル;
            マージン: 0;
            パディング: 0;
        }
        。ボタン{
	          高さ: 32px;
	          幅: 80ピクセル;
	          上マージン: 6px;
	          境界線の半径: 4px;
	          色: #fff;
	          左パディング: 0;
	          右パディング: 0;
	          行の高さ: 32px;
	          背景: #E33E33;
	          テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
  <div id="メニュー">
    <div class="button">詳細情報</div>
    <ul id="リスト">
        <li>パーソナルセンター</li>
        <li>私のブログ</li>
        <li>設定</li>
        <li>ログアウト</li>
        <li>ログアウト</li>
    </ul>
  </div>
</本文>
</html>

div を設定し、それを :hover なしの状態と :hover ありの状態の 2 つの状態に設定するだけです。 :hover がない場合は、メニューを非表示に設定するだけで (overflow: hidden;)、残りのコードは単純なボックスモデルになります。

さて、:hover についてお話しましょう。これは何でしょうか?これは、マウスポインターが浮かんでいる要素を選択するために使用される CSS セレクターです。したがって、携帯電話でマウスをホバーしたりクリックしたりすると、この属性がトリガーされ、ドロップダウンメニューが表示されます。同時に、ドロップダウンメニューにグラデーション効果を持たせ、より下に引っ張られているような感覚になるように transition 属性を追加しました。

CSS セレクターは魔法のようではありませんか? うまく使用すれば、多くの JS コードを書く必要はありません。今後は CSS セレクターに関するコラムを作成し、すべての CSS セレクターを体系的に紹介する予定です。

ここに画像の説明を挿入

要約する

純粋な CSS を使用してドロップダウンメニュー機能のサンプルコードを作成する方法についての記事はこれで終わりです。CSS ドロップダウンメニューに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Portainer を使用して複数の Docker コンテナ環境を管理する方法を説明します。

>>: vue-qr を使用して Vue の QR コードを生成する方法について深く理解する