HTML、CSS、jQuery: アニメーションのアコーディオンメニューを作成する-jsチュートリアル-php.cn

HTML、CSS、jQuery: アニメーションのアコーディオンメニューを作成する

WBOY

リリース： 2023-10-27 16:33:52

オリジナル

1501 人が閲覧しました

HTML、CSS、jQuery: アニメーションのアコーディオンメニューを作成する

HTML、CSS、および jQuery: アニメーションの折りたたみ可能なメニューの作成

Web 開発では、折りたたみ可能なメニューは、ページのスペースを節約し、ユーザーの利便性を向上させる一般的なインタラクティブな要素です。経験。この記事では、HTML、CSS、jQuery を使用してアニメーションの折りたたみメニューを作成する方法と、具体的なコード例を紹介します。

HTML 構造
まず、折りたたみ可能なメニューを構築するための HTML 構造を定義する必要があります。以下は、単純な HTML 構造の例です。

<div class="menu-item">
  <h3 class="menu-title">菜单标题</h3>
  <div class="menu-content">
    <!-- 菜单内容 -->
  </div>
</div>

ログイン後にコピー

上記のコードでは、.menu-item が最も外側のコンテナであり、.menu-title はメニューのタイトル .menu-content はメニューの内容であり、初期状態では非表示になっています。

CSS スタイル
次に、いくつかの CSS スタイルを折りたたみメニューに追加して、メニューの外観とアニメーション効果を定義する必要があります。以下は、基本的な CSS スタイルの例です。

.menu-item {
  margin-bottom: 10px;
}

.menu-title {
  cursor: pointer;
}

.menu-content {
  display: none;
}

.menu-content.show {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

ログイン後にコピー

上記のコードでは、メニュー間に一定の間隔を与えるために、.menu-item に下部スペースを追加しました。 cursor: pointer が .menu-title に設定され、マウスのスタイルを変更して、メニューをクリックして展開または折りたたむことができることを示します。 .menu-content は初期状態では非表示になっていますが、クラス名 .show を追加するとメニュー内容がフェードインアニメーション効果とともに表示されます。

jQuery アニメーション効果
メニューの展開と折りたたみ機能を実現するために、jQuery を使用してアニメーション効果を追加できます。以下は、基本的な jQuery コードの例です。

$(document).ready(function() {
  $('.menu-title').click(function() {
    $(this).siblings('.menu-content').toggleClass('show');
  });
});

ログイン後にコピー

上記のコードでは、$(document).ready() を使用して、メソッドを実行する前にページがロードされていることを確認します。コード。 .menu-title 要素をクリックすると、toggleClass() メソッドを使用して .show クラス名を切り替え、メニュー内容。

完全なサンプルコードと効果のプレビュー
次は、完全な HTML ファイルコードの例です。コードをコピーして HTML ファイルに貼り付け、ブラウザで効果を表示できます:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>折叠菜单</title>
  <style>
    .menu-item {
      margin-bottom: 10px;
    }

    .menu-title {
      cursor: pointer;
    }

    .menu-content {
      display: none;
    }

    .menu-content.show {
      display: block;
      animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.menu-title').click(function() {
        $(this).siblings('.menu-content').toggleClass('show');
      });
    });
  </script>
</head>
<body>
  <div class="menu-item">
    <h3 class="menu-title">菜单标题1</h3>
    <div class="menu-content">
      <p>菜单内容1</p>
    </div>
  </div>

  <div class="menu-item">
    <h3 class="menu-title">菜单标题2</h3>
    <div class="menu-content">
      <p>菜单内容2</p>
    </div>
  </div>

  <div class="menu-item">
    <h3 class="menu-title">菜单标题3</h3>
    <div class="menu-content">
      <p>菜单内容3</p>
    </div>
  </div>
</body>
</html>

ログイン後にコピー

ブラウザで上記のコードを実行し、メニュータイトルをクリックすると、フェードインアニメーション効果でメニューコンテンツが展開したり折りたたまれたりするのがわかります。

要約すると、HTML、CSS、jQuery を使用すると、アニメーション効果を備えた折りたたみメニューを簡単に作成できます。この記事のサンプルコードがお役に立てば幸いです。ぜひ試してみてください。

以上がHTML、CSS、jQuery: アニメーションのアコーディオンメニューを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。