ホバードロップダウンメニューを実装するためのネイティブJS

JS はホバードロップダウンメニューを実装します。これは、フロントエンドの面接で遭遇するシナリオの質問です。原則は、メニュースタイルの display 属性の属性値を none=>block から変更することです。具体的な実装を以下に示します。次の部分に注目してください。

各セクションにフロートを設定します。
セクションの親ボックスの継承可能なプロパティ、フォント関連のプロパティを設定します。
ホバーを設定する場合、セクションの親ボックスにホバーすると、子要素のヘッドの背景が変わります。`.head:hover` と記述して、ヘッドクラスに直接ホバーすることもできます。ただし、マウスを li の上に移動すると、ヘッドが元の外観に戻ってしまうという問題が発生するため、セクションにホバーを配置することをお勧めします。
ただし、メニュー自体は表示されないため、親ボックスセクションにマウスを移動することによってのみメニューを表示できます (ヘッドは親ボックスではないため、ヘッドにマウスを移動することはできません)。

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ホバードロップダウンメニュー</title>
    <スタイル>
 
        /* 必要に応じて、ワイルドカード、a、li の既存のスタイルを削除します*/
        
        * {
            マージン: 0;
            パディング: 0;
        }
        
        {
            テキスト装飾: なし;
            色: 黒;
        }
 
        /* ここでの li は幅を指定せずに既存のスタイルを削除するだけです */
        
        li {
            リストスタイル: なし;
        }
 
        /* 各セクションをアイテムとしてフレックスレイアウトする */
        
        。容器 {
            マージン: 50px 自動;
            幅: 40%;
            高さ: 40px;
            ディスプレイ: フレックス;
            /* 最初にスペース均等に表示*/
            コンテンツの均等配置: スペースを均等に;
            背景色: スカイブルー;
        }
 
        /* フローティングは各セクションでのみ実行する必要があります */
        /* セクションの「フォント サイズ、テキスト配置、行の高さ」を設定します => 継承可能なプロパティ*/
        
        。セクション {
            フロート: 左;
            フォントサイズ: 16px;
            行の高さ: 40px;
            テキスト配置: 中央;
        }
 
        /*ここではホバー時のヘッドのスタイルを指定します*/
        /* .head:hover と書くこともできます */
 
        .section:hover .head {
            色: 白;
            背景色: オレンジ;
        }
 
        /* 最初はメニュー全体が非表示で、スタイルが設定されています */
        
        .メニュー{
            表示: なし;
            背景色: 透明;
        }
 
        /* マウスオーバーするとメニューが表示されます。親ボックスにのみマウスオーバーできます*/
        
        .section:hover .menu {
            表示: ブロック;
        }
 
        /* ホバー時の li のスタイルを指定します*/
        
        .menu li:hover {
            背景色: オレンジ;
        }
    </スタイル>
</head>
 
<本文>
    <div class="コンテナ">
        <div class="section">
            <a href="#" class="head">論文を書く</a>
            <ul class="メニュー">
                <li>情報を検索する</li>
                <li>メモを取る</li>
                <li>再現する</li>
            </ul>
        </div>
        <div class="section">
            <a href="#" class="head">フロントエンドを学ぶ</a>
            <ul class="メニュー">
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>リートコード</li>
            </ul>
        </div>
        <div class="section">
            <a href="#" class="head">リトルデイズ</a>
            <ul class="メニュー">
                <li>食べる</li>
                <li>睡眠</li>
                <li>豆をプレイ</li>
            </ul>
        </div>
    </div>
</本文>
 
</html>

最終的な効果は以下のようになります。

ヒント: クリックしてドロップダウンメニューを実装するという、似たような質問がもう 1 つあります。ここでの違いは、クリックイベントを追加し、それを JS で記述して、後で補足する必要があることです。 3 つのセクションを ul li の形式で記述することもできます。これにより、ネストされた 2 層の ul も実現でき、セマンティクスが向上し、読者の参照用に残されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: