ドロップダウンメニュー

jQuery

<script type="text/javascript">


	$(function(){
		$(".dropdown_menu").children("a").on("click" , function(evt){ // .dropdown_menuの子要素のa

			//evt.preventDefault(); // aのデフォルトの動作をストップ
			evt.stopPropagation(); // aより上の階層はクリックしてないことにする
			var $this = $(this); // $(this)は<a href="#">メニュー</a>のこと

			
			$this.parent().siblings("li").children("a").removeClass("open").next().slideUp(300);
			
			if($this.hasClass("open") == true){ // openがあったら

				$this.removeClass("open").next().slideUp(300); // next()はaの次の要素、つまりulを閉じる
				$("html , body").off("click" , function(){
					$this.removeClass("open").next().slideUp(300); // 閉じる動作をoffにする
				}); 
				
				
			}else{ // openがなかったら（つまりloadした初期の状態でクリックしたら）

				$this.addClass("open").next().slideDown(300); // next()はaの次の要素、つまりulを開く
				$("html , body").on("click" , function(){ // これがないとhtmlをクリックしても閉じない
					$this.removeClass("open").next().slideUp(300); // 閉じる動作をonにする 
				}); 
				
				
				} 
				
				}); 
	}); 
	
	
</script>

ボタンをクリックした時点で  →　閉じていたら　→　開く　かつ　[htmlをクリックしたら　閉じる]をキャンセル
			    →　開いていたら　→　閉じる　かつ　[htmlをクリックしたら　閉じる]

HTML

<div id="navi">
	<ul>
		<li class="dropdown_menu"><a href="#">メインメニュー1</a> // liにclass="dropdown_menu"
			<ul>
				<li><a href="#">サブメニュー1</a></li>
				<li><a href="#">サブメニュー1</a></li>
				<li><a href="#">サブメニュー1</a></li>
				<li><a href="#">サブメニュー1</a></li>
				<li><a href="#">サブメニュー1</a></li>
			</ul>
		</li>
		<li class="dropdown_menu"><a href="#">メインメニュー2</a>
			<ul>
				<li><a href="#">サブメニュー2</a></li>
				<li><a href="#">サブメニュー2</a></li>
				<li><a href="#">サブメニュー2</a></li>
				<li><a href="#">サブメニュー2</a></li>
				<li><a href="#">サブメニュー2</a></li>
			</ul>
		</li>
		.....
	</ul>
</div>

CSS

@charset "utf-8";

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

a{
	text-decoration: none;
}

#container{
	width: 100%;
	height: auto;
}

h1{ margin: 20px auto 20px 20px;}

#navi{
	width: 980px;
	height: 50px;
	margin: 0 auto 0;
	background-color: #666;
	position: relative; /* サブメニューを前面に出すため */
}

#navi ul{
	list-style-type: none;
}

#navi ul li{
	float: left;
	width: 140px;
	height: 50px;
	border: 1px solid #fff;
	color: #fff;
	line-height: 50px;
	display: inline-block;
	text-align: center;
}

#navi ul li.dropdown_menu a{
	display: block;
	width: 140px;
	height: 49px;
	color: #ccc;
}

#navi ul li.dropdown_menu a:hover{
	background-color: #999;
}

#navi ul li:first-child{
	border-right: 0;
}

#navi ul li + li{
	border-right: 0;
}

/* サブメニュー */
#navi ul li > ul{
	border: 0;
	display: none; /* 最初は非表示 */
}

#navi ul li > ul li{
	width: 140px;
	height: 50px;
	background-color: #666;
	margin: 0;
	border: 0

}

#main{
	width: 980px;
	height: auto;
	margin: 0 auto 0;
}

pre{
	margin: 0;
	padding: 0;
}

インデックスに戻る