menu
menu

jQueryでツリーメニュー | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク4
  • Google+4
  • Pocket0
  • Twitter0

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
  • facebook4
  • はてなブックマーク4
  • Google+4
  • Pocket0
  • Twitter0