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

純粋な 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 コードを生成する方法について深く理解する

推薦する

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

Element-UI の Select と Cascader にポップアップ下部アクション ボタンを追加する方法

下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...

CSSとHTMLを組み合わせる4つの方法

(1)各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。 <div s...

Linux で環境変数 JAVA_HOME を変更/設定する方法について簡単に説明します。

1. 永久的な変更、すべてのユーザーに有効# vi /etc/プロファイル//キーボードの[Shi...

Vueはタブルーティング切り替えコンポーネントのメソッド例を実装します

序文この記事では、vue に付属している vue-router.js ルーティングを使用してページン...

データベースのデフォルトパスを変更した後にmysqlが起動できない問題の解決策

序文mysql がデフォルトのデータベース パスを変更したため、サービスを開始できませんでした。ログ...

MySQLの日次統計レポートでは、その日にデータがない場合には0が入力されます。

1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...

MySQL ストアド プロシージャの作成と呼び出しの詳細な説明

目次序文ストアドプロシージャ: 1. ストアドプロシージャの作成と呼び出し1. ストアドプロシージャ...

静的ウェブサイトをRSSに変換するツール

<br /> この記事は allwebdesignresources.com から Ra...

CSS3 フレックスレイアウトを使用して要素を均等に分散するサンプルコード

この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分...

Reactで例外を適切にキャプチャする方法

目次序文エラー境界エラー境界を超えてトライ/キャッチwindow.onerror、エラーイベント未処...

アニメーションとトランジションの違い

CSS3アニメーションとJSアニメーションの違いJSはフレームアニメーションを実装しますCSS3はト...

Linux システムを起動時に自動的にスクリプトを実行するように設定する方法の例

序文みなさんこんにちは。私は梁旭です。職場では、システムの起動後にスクリプトやサービスを自動的に開始...

Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法

では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...

HTMLのタグについての簡単な説明

0. タグとは何ですか? XML/HTML コードコンテンツをクリップボードにコピー<入力 t...