jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウンメニューが必要になることがあります。最も基本的な CSS と JS を使用してこれを完成させることもできますが、jQuery を使用すると、次の効果を実現するために必要なのは非常に短いコードだけです。

とても滑らかじゃないですか？マウスがターゲットに移動すると、ドロップダウンメニューが自動的に表示されます。必要なコードは 2 行だけです。

$(" ").hover(関数() {
$(this).children(" ").slideToggle();
});

このうち、ホバーはマウスが通過して去るのを合成した言葉で、通常は次のように表記されます。

$(" ").hover(関数() {
     $(this).children(" ").slideDown() );
 }、 関数（） {
     $(this).children(" ").slideUp() );
 });

つまり、マウスが通過したときとマウスが離れたときの 2 つの関数を hover に記述し、2 つをコンマで区切ります。ただし、上記のコードでは関数を 1 つしか記述していないことがわかります。これは、hover に関数を 1 つだけ記述すると、マウスが通過したときや離れたときに効果が繰り返されるため、記述が簡単になるためです。

全体のコードでは次のように使用します。

<!DOCTYPE html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        
        li {
            リストスタイルタイプ: なし;
        }
        
        {
            テキスト装飾: なし;
            フォントサイズ:20px;
        }
        
        .nav {
            マージン: 100px;
        }
        
        .nav>li {
            位置: 相対的;
            フロート: 左;
            幅: 80ピクセル;
            高さ:50px;
            テキスト配置: 中央;
        }
        
        .nav li a {
            表示: ブロック;
            幅: 100%;
            高さ: 100%;
            行の高さ: 50px;
            色: 黒;
   border:1px ソリッドスカイブルー;
        }
        
        .nav>li>a:hover {
            背景色: ピンク;
        }
        
        .nav ul {
            表示: なし;
            位置: 絶対;
            上: 50px;
            左: 0;
            幅: 100%;
            左境界線: 1px 実線 #FECC5B;
            右境界線: 1px 実線 #FECC5B;
        }
        
        .nav ul li {
            下境界線: 1px 実線 #FECC5B;
        }
        
        .nav ul li a:hover {
            背景色: #FFF5DA;
        }
    </スタイル>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
 
<本文>
    <ul class="nav">
        <li>
            <a href="#" >メッセージ</a>
            <ul>
                <li>
                    <a href="">フォロー</a>
                </li>
                <li>
                    <a href="">コメント</a>
                </li>
                <li>
                    のように
                </li>
            </ul>
        </li>
        <li>
            <a href="#" >メッセージ</a>
            <ul>
                <li>
                    <a href="">フォロー</a>
                </li>
                <li>
                    <a href="">コメント</a>
                </li>
                <li>
                    のように
                </li>
            </ul>
        </li>
  <li>
      <a href="#" >メッセージ</a>
      <ul>
          <li>
              <a href="">フォロー</a>
          </li>
          <li>
              <a href="">コメント</a>
          </li>
          <li>
              のように
          </li>
      </ul>
  </li>
    </ul>
    <スクリプト>
        $(関数() {
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });
        })
    </スクリプト>
</本文>
 
</html>

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

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