ywork2020.com

Title

ドロップダウンメニューを使う

DropDownMenuの概要

リンクリストをドロップダウンメニューに組み込むことが出来るjQueryです。

実機サンプル

メニューにマウスポインタを合わせるとメニューが展開します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title>jQuery : DropDownMenu | 独学 Webプログラミング! - YWORK</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<style>
			.classDropDown{
				max-width: 900px;
				display: flex;
			}
			ul{
				color: #fff;
				list-style-type: none;
				margin: 0 auto;
				padding: 0;
			}
			li{
				max-width: calc(900px/5);
				position: relative;
				padding: 5px;
				display: block;
				cursor: pointer;
			}
			.classDropDown>li{
				font-weight: bold;
				text-align: center;
				width: 166px;
				margin: 1px;
				background: #05f;
				display: inline;
			}
			.classDropDownMenu{
				background: #017;
				width: 100%;
				display: none;
				position: absolute;
				margin-left: -5px;
				margin-top: 5px;
				padding: 0;
			}
			.classDropDownMenu li{
				width: 100%;
				text-align: left;
				font-weight: normal;
			}
			.classDropDownMenu li a{
				padding: 5px 0px 5px 5px;
				margin: -5px 5px -5px -5px;
				display: block;
				color: #fff;
			}
			li a:hover{
				background: #03a;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<ul class="classDropDown">
			<li>用語
				<ul class="classDropDownMenu">
					<li>メニュー</li>
					<li>メニュー</li>
				</ul>
			</li>
			<li>HTML
				<ul class="classDropDownMenu">
					<li>メニュー</li>
					<li>メニュー</li>
				</ul>
			</li>
			<li>CSS
				<ul class="classDropDownMenu">
					<li>メニュー</li>
					<li>メニュー</li>
				</ul>
			</li>
			<li>javascript
				<ul class="classDropDownMenu">
					<li>メニュー</li>
					<li>メニュー</li>
				</ul>
			</li>
			<li>jquery
				<ul class="classDropDownMenu">
					<li>メニュー</li>
					<li>メニュー</li>
				</ul>
			</li>
		</ul>
		<hr>
		<script>
			document.open();
			$(function(){
				$('.classDropDown li').hover(function(){
					$("ul:not(:animated)",this).slideDown();
				}, function(){
					$("ul.classDropDownMenu",this).slideUp();
				});
			});
			document.close();
		</script>
	</body>
</html>
関連のあるページ
jQueryで関連のあるサイト
  1. jQuery.com
  2. Google CDN
  3. Microsoft CDN