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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery を使用してドロップダウン メニュー効果を実装するコード
  • jQueryで実装された超シンプルなドロップダウンメニュー
  • 検索ボックス付きのJQueryドロップダウンメニュー
  • jQueryは、マウスを移動したときにセカンダリドロップダウンメニューを表示する効果を実装します。
  • ドロップダウンメニューをクリックするjQueryの小さな例
  • JQuery はドロップダウン メニューの特定のオプションの値を設定します (より完全)
  • jQuery はさまざまな方向へのスライドを制御します (左、右などへのスライド)
  • jQueryMobile を使用してスライドページめくり効果を実現する方法
  • jQuery ベースの水平スクロールバー (スライダー)
  • jQueryで書かれたメニューは左から右にスライドします

<<:  MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ

>>:  VMware Tools を最初からインストールするための詳細な手順 (グラフィック チュートリアル)

推薦する

HTMLおよびJSPページがキャッシュされ、Webサーバーから再取得されるのを防ぎます。

ユーザーがログアウトした後、ブラウザの戻るボタンがクリックされると、Web アプリケーションは保護さ...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル

私は頻繁にシステムをインストールするので、インストールのたびにいくつかのソフトウェアを再インストール...

MySQLは、where in()順序ソートを実装するためにfind_in_set()関数を使用します。

この記事では、MySQL で find_in_set() 関数を使用して where in() の順...

React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...

Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明

実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...

Workbench を介して MySQL データベースにリモートでアクセスする方法の詳細な説明

序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...

プロジェクトのフロントエンドとバックエンドでの Echart チャートの使用に関する詳細な説明

目次序文1. プロジェクトアーキテクチャ2. Echart公式サイトにアクセスして自己分析を学ぶ2....

PythonはデータベースMySQLの解凍バージョンのインストール構成に接続し、問題が発生しました

導入今日は Python でデータベースに接続する方法を学んだので、MySQL データベースをインス...

Linux で開いているファイルが多すぎる問題を解決する方法

原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...

要素の円弧モーションを実現する CSS3 サンプルコード

CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...

MySQL SELECT実行順序の簡単な理解

SELECT ステートメントの完全な構文は次のとおりです。 (7)選択 (8) DISTINCT ...

HTML の隠しフィールドの紹介と例

基本的な構文: <input type="hidden" name=&qu...

MySQL Workbench の使い方チュートリアルの詳しい説明

目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...

mysql ERROR 1045 (28000) 問題の解決方法

私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...