ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、jQueryを使用して動的なドロップダウンメニューを作成する方法
HTML、CSS、jQueryを使用して動的なドロップダウンメニューを作成する方法
- 王林オリジナル
- 2023-10-25 12:28:571490ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。