menu
menu

キーワード検索

jQueryでツリーメニュー

  • Labs

jQuery

こんにちは(・∀・)

今回はjQueryでツリーメニューのご紹介です。以前ご紹介しましたアコーディオンメニューとjQueryはほぼ同じです。

サンプルデモ

サンプルデモはこちら

HTML

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="container">
<div id="content">
<p>jQueryで縦に展開するツリーメニューのサンプルです</p>
<!--content--></div>
<div class="treemenu">
<p class="lv1btn">INDEX</p>
<div class="lv1body">
<p class="lv2btn"><img src="guide.png" alt="">INDEX2</p>
	<div class="lv2body">
	<p class="lv3btn"><img src="guide.png" alt="">INDEX3</p>
		<div class="lv3body">
		<p><img src="guide.png" alt=""><a href="#">PAGE</a></p>
		<p><img src="guide2.png" alt=""><a href="#">PAGE</a></p>
	</div>
	<p><img src="guide2.png" alt=""><a href="#">PAGE</a></p>
	</div>
<p><img src="guide2.png" alt=""><a href="#">PAGE</a></p>
</div>
<p class="lv1btn">INDEX</p>
<div class="lv1body">
<p class="lv2btn"><img src="guide.png" alt="">INDEX2</p>
	<div class="lv2body">
	<p><img src="guide.png" alt=""><a href="#">PAGE</a></p>
	<p><img src="guide2.png" alt=""><a href="#">PAGE</a></p>
	</div>
<p><img src="guide.png" alt=""><a href="#">PAGE</a></p>
<p><img src="guide2.png" alt=""><a href="#">PAGE</a></p>
</div>
<p class="lv1btn">INDEX</p>
<div class="lv1body">
<p><img src="guide.png" alt=""><a href="#">PAGE</a></p>
<p><img src="guide.png" alt=""><a href="#">PAGE</a></p>
<p class="lv2btn"><img src="guide2.png" alt="">INDEX2</p>
	<div class="lv2body">
	<p><img src="guide.png" alt=""><a href="#">PAGE</a></p>
	<p><img src="guide2.png" alt=""><a href="#">PAGE</a></p>
	</div>
</div>
<p class="lv1btn">INDEX</p>
<div class="lv1body">
<p class="lv2btn"><img src="guide2.png" alt="">INDEX2</p>
	<div class="lv2body">
	<p><img src="guide.png" alt=""><a href="#">PAGE</a></p>
	<p><img src="guide2.png" alt=""><a href="#">PAGE</a></p>
	</div>
</div>
<p class="lv1btn">INDEX</p>
<div class="lv1body">
<p><img src="guide.png" alt=""><a href="#">PAGE</a></p>
<p><img src="guide2.png" alt=""><a href="#">PAGE</a></p>
</div>
<p class="lv1btn"><a href="#">PAGE</a></p>
<p class="lv1btn"><a href="#">PAGE</a></p>
<!--treemenu--></div>
<!--container--></div>
CSS

#container {
	width: 940px;
	margin: 0 auto;
	overflow: hidden;
	background: #9fb7d4;
}
#content {
	float: right;
	width: 684px;
	text-align: left;
}
#content p {
	padding: 10px;
}
.treemenu {
	float: right;
	width: 256px;
	background: #ccc;
}
/*階層1*/
.treemenu .lv1btn{
	cursor: pointer;
	padding: 5px 10px;
}
.treemenu .lv1body {
	display: none;
	padding: 0 10px 5px 10px;
}
.treemenu .lv1body a {
	line-height: 2.0;
}
/*階層2*/
.treemenu .lv1body .lv2btn {
	cursor: pointer;
	padding: 5px 10px 5px 0;
}
.treemenu .lv1body .lv2body {
	display: none;
	padding: 0 10px 5px 10px;
}
.treemenu .lv1body .lv2body a {
	line-height: 2.0;
}
/*階層3*/
.treemenu .lv1body .lv3btn {
	cursor: pointer;
	padding: 5px 10px 5px 0;
}
.treemenu .lv1body .lv2body .lv3body {
	display: none;
	padding: 0 10px 5px 10px;
}
.treemenu .lv1body .lv2body .lv3body a {
	line-height: 2.0;
}
JavaScript

$(function(){
$(".treemenu .lv1btn,.treemenu .lv1body .lv2btn,.treemenu .lv1body .lv2body .lv3btn").click(function() {
$(this).next().slideToggle(100);
});
});
関連リンク

CSSだけでサイズ可変・スマホ対応のツリーメニュー

  • カテゴリー:Labs