HTML、CSS、jQueryを使用して動的なドロップダウンメニューを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQueryを使用して動的なドロップダウンメニューを作成する方法

王林

リリース： 2023-10-25 12:28:57

オリジナル

1508 人が閲覧しました

HTML、CSS、jQueryを使用して動的なドロップダウンメニューを作成する方法

HTML、CSS、jQuery を使用して動的なドロップダウンメニューを作成する方法

Web テクノロジーの継続的な発展により、動的なドロップダウンメニューが一般的になりました。現代のWebデザインにおける要素の一つ。これにより、より優れたユーザーエクスペリエンスとナビゲーション機能が提供されます。この記事では、HTML、CSS、jQuery を使用して動的なドロップダウンメニューを作成する方法を、いくつかの具体的なコード例とともに学びます。

HTML 構造
まず、基本的な HTML 構造を構築しましょう。簡単な例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <title>动态下拉菜单</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">菜单1</a></li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
      <li class="dropdown">
        <a href="#">菜单4</a>
        <ul class="submenu">
          <li><a href="#">子菜单1</a></li>
          <li><a href="#">子菜单2</a></li>
          <li><a href="#">子菜单3</a></li>
        </ul>
      </li>
      <li><a href="#">菜单5</a></li>
    </ul>
  </nav>
</body>
</html>

ログイン後にコピー

CSS スタイル
次に、CSS スタイルを使用してドロップダウンメニューの外観を設定する必要があります。簡単な例を次に示します。

/* 清除默认样式 */
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 导航菜单样式 */
nav ul.menu li {
  display: inline-block;
  position: relative;
}

nav ul.menu li a {
  display: block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

nav ul.menu li.dropdown:hover .submenu {
  display: block;
}

/* 子菜单样式 */
nav ul.menu li .submenu {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: #333;
}

nav ul.menu li .submenu li {
  display: block;
}

nav ul.menu li .submenu li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

ログイン後にコピー

jQuery Effect
最後に、jQuery を使用していくつかのインタラクティブな効果を追加する必要があります。ここでは、サブメニューの表示と非表示を切り替えるために、単純なホバー機能を使用しています。

$(document).ready(function() {
  $('nav ul.menu li.dropdown').hover(
    function() {
      $(this).find('.submenu').stop().slideDown();
    },
    function() {
      $(this).find('.submenu').stop().slideUp();
    }
  );
});

ログイン後にコピー

結論
上記の手順により、動的なドロップダウンメニューを作成することができました。マウスをメニュー 4 の上に置くと、サブメニューが表示されます。マウスを離すとサブメニューが消えます。この簡単な例は、初心者が HTML、CSS、jQuery を使用して動的なドロップダウンメニューを作成する方法を理解するのに役立ちます。

要約すると、動的なドロップダウンメニューを作成するには、次の手順が必要です。HTML 構造を構築し、CSS スタイルを使用して外観を設定し、jQuery を使用してインタラクティブ効果を追加します。この記事がお役に立てば幸いです!

以上がHTML、CSS、jQueryを使用して動的なドロップダウンメニューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。