ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、jQuery: アニメーションのアコーディオンメニューを作成する

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

WBOYオリジナル: 2023-10-27 16:33:521543ブラウズ

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 サイトの他の関連記事を参照してください。

jquery css html pointer

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Layui フレームワークを使用して、即時の Q&A と知識の共有をサポートする質問相談プラットフォームを開発する方法次の記事：Layui フレームワークを使用して、即時の Q&A と知識の共有をサポートする質問相談プラットフォームを開発する方法

続きを見る

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

関連記事

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