2階層の開閉式ツリー型メニューは、jQuery で簡単に作れる。さらに、css で飾って、ボックスにしてみた。メニュー欄をクリックすると、サブメニューが現れる。メニュー欄を再びクリックすると、サブメニューが折りたたまれる。
実装例
実装例の動作について
「 メニュー1 | ▼ 」をクリックすると、メニュー1のサブメニューが現れる。「 メニュー1 | ▼ 」を再びクリックすると、メニュー1のサブメニューが折りたたまれる。メニュー2、メニュー3についても同様。
ソースコード
JavaScript
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$( function() {
$( '#jquery-menu-1-title' ) . click( function() {
$( "#jquery-menu-1-sub" ) . slideToggle( 'slow' );
} );
$( '#jquery-menu-2-title' ) . click( function() {
$( "#jquery-menu-2-sub" ) . slideToggle( 'slow' );
} );
$( '#jquery-menu-3-title' ) . click( function() {
$( "#jquery-menu-3-sub" ) . slideToggle( 'slow' );
} );
} );
// -->
</script>
<script type="text/javascript">
<!--
$( function() {
$( '#jquery-menu-1-title' ) . click( function() {
$( "#jquery-menu-1-sub" ) . slideToggle( 'slow' );
} );
$( '#jquery-menu-2-title' ) . click( function() {
$( "#jquery-menu-2-sub" ) . slideToggle( 'slow' );
} );
$( '#jquery-menu-3-title' ) . click( function() {
$( "#jquery-menu-3-sub" ) . slideToggle( 'slow' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
ul.jquery-menu {
background-color: silver;
list-style-position: inside;
width: 500px;
border: 1px darkgray solid;
border-bottom: none;
}
ul.jquery-menu li {
padding-bottom: 5px;
border-bottom: 1px darkgray solid;
list-style-type: none;
}
ul.jquery-menu li div.jquery-menu-title-box {
padding: 5px 10px 0 10px;
cursor: pointer;
}
ul.jquery-menu li div.menu-title {
float: left;
font-weight: bold;
}
ul.jquery-menu li div.menu-triangle {
float: right;
text-align: right;
color: darkgray;
border-left: 1px darkgray solid;
}
ul.jquery-menu-sub {
display: none;
background-color: lightgrey;
list-style-position: inside;
margin: 5px;
}
ul.jquery-menu-sub li {
padding: 5px 10px 5px 10px;
border: none;
list-style-type: square;
}
-->
</style>
<!--
ul.jquery-menu {
background-color: silver;
list-style-position: inside;
width: 500px;
border: 1px darkgray solid;
border-bottom: none;
}
ul.jquery-menu li {
padding-bottom: 5px;
border-bottom: 1px darkgray solid;
list-style-type: none;
}
ul.jquery-menu li div.jquery-menu-title-box {
padding: 5px 10px 0 10px;
cursor: pointer;
}
ul.jquery-menu li div.menu-title {
float: left;
font-weight: bold;
}
ul.jquery-menu li div.menu-triangle {
float: right;
text-align: right;
color: darkgray;
border-left: 1px darkgray solid;
}
ul.jquery-menu-sub {
display: none;
background-color: lightgrey;
list-style-position: inside;
margin: 5px;
}
ul.jquery-menu-sub li {
padding: 5px 10px 5px 10px;
border: none;
list-style-type: square;
}
-->
</style>
HTML
<ul class="jquery-menu">
<li id="jquery-menu-1">
<div id="jquery-menu-1-title" class="jquery-menu-title-box">
<div class="menu-title">メニュー1</div>
<div class="menu-triangle"> ▼</div>
<div style="clear: both;"></div>
</div>
<ul class="jquery-menu-sub" id="jquery-menu-1-sub">
<li><a href="#">メニュー1-1</a></li>
<li><a href="#">メニュー1-2</a></li>
<li><a href="#">メニュー1-3</a></li>
<li><a href="#">メニュー1-4</a></li>
<li><a href="#">メニュー1-5</a></li>
<li><a href="#">メニュー1-6</a></li>
<li><a href="#">メニュー1-7</a></li>
</ul>
</li>
<li id="jquery-menu-2">
<div id="jquery-menu-2-title" class="jquery-menu-title-box">
<div class="menu-title">メニュー2</div>
<div class="menu-triangle"> ▼</div>
<div style="clear: both;"></div>
</div>
<ul class="jquery-menu-sub" id="jquery-menu-2-sub">
<li><a href="#">メニュー2-1</a></li>
<li><a href="#">メニュー2-2</a></li>
<li><a href="#">メニュー2-3</a></li>
<li><a href="#">メニュー2-4</a></li>
<li><a href="#">メニュー2-5</a></li>
<li><a href="#">メニュー2-6</a></li>
<li><a href="#">メニュー2-7</a></li>
</ul>
</li>
<li id="jquery-menu-3">
<div id="jquery-menu-3-title" class="jquery-menu-title-box">
<div class="menu-title">メニュー3</div>
<div class="menu-triangle"> ▼</div>
<div style="clear: both;"></div>
</div>
<ul class="jquery-menu-sub" id="jquery-menu-3-sub">
<li><a href="#">メニュー3-1</a></li>
<li><a href="#">メニュー3-2</a></li>
<li><a href="#">メニュー3-3</a></li>
<li><a href="#">メニュー3-4</a></li>
<li><a href="#">メニュー3-5</a></li>
<li><a href="#">メニュー3-6</a></li>
<li><a href="#">メニュー3-7</a></li>
</ul>
</li>
</ul>
<li id="jquery-menu-1">
<div id="jquery-menu-1-title" class="jquery-menu-title-box">
<div class="menu-title">メニュー1</div>
<div class="menu-triangle"> ▼</div>
<div style="clear: both;"></div>
</div>
<ul class="jquery-menu-sub" id="jquery-menu-1-sub">
<li><a href="#">メニュー1-1</a></li>
<li><a href="#">メニュー1-2</a></li>
<li><a href="#">メニュー1-3</a></li>
<li><a href="#">メニュー1-4</a></li>
<li><a href="#">メニュー1-5</a></li>
<li><a href="#">メニュー1-6</a></li>
<li><a href="#">メニュー1-7</a></li>
</ul>
</li>
<li id="jquery-menu-2">
<div id="jquery-menu-2-title" class="jquery-menu-title-box">
<div class="menu-title">メニュー2</div>
<div class="menu-triangle"> ▼</div>
<div style="clear: both;"></div>
</div>
<ul class="jquery-menu-sub" id="jquery-menu-2-sub">
<li><a href="#">メニュー2-1</a></li>
<li><a href="#">メニュー2-2</a></li>
<li><a href="#">メニュー2-3</a></li>
<li><a href="#">メニュー2-4</a></li>
<li><a href="#">メニュー2-5</a></li>
<li><a href="#">メニュー2-6</a></li>
<li><a href="#">メニュー2-7</a></li>
</ul>
</li>
<li id="jquery-menu-3">
<div id="jquery-menu-3-title" class="jquery-menu-title-box">
<div class="menu-title">メニュー3</div>
<div class="menu-triangle"> ▼</div>
<div style="clear: both;"></div>
</div>
<ul class="jquery-menu-sub" id="jquery-menu-3-sub">
<li><a href="#">メニュー3-1</a></li>
<li><a href="#">メニュー3-2</a></li>
<li><a href="#">メニュー3-3</a></li>
<li><a href="#">メニュー3-4</a></li>
<li><a href="#">メニュー3-5</a></li>
<li><a href="#">メニュー3-6</a></li>
<li><a href="#">メニュー3-7</a></li>
</ul>
</li>
</ul>
要点解説
JavaScript
<script type="text/javascript" src="jquery.js"></script> // jquery.js を読み込む
<script type="text/javascript">
<!--
$( function() { // document が準備できたら呼び出す
$( '#jquery-menu-1-title' ) . click( function() { // id が jquery-menu-1-title の要素をクリックしたとき
$( "#jquery-menu-1-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-1-sub の要素をゆっくり開閉
} );
$( '#jquery-menu-2-title' ) . click( function() { // id が jquery-menu-2-title の要素をクリックしたとき
$( "#jquery-menu-2-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-2-sub の要素をゆっくり開閉
} );
$( '#jquery-menu-3-title' ) . click( function() { // id が jquery-menu-3-title の要素をクリックしたとき
$( "#jquery-menu-3-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-3-sub の要素をゆっくり開閉
} );
} );
// -->
</script>
<script type="text/javascript">
<!--
$( function() { // document が準備できたら呼び出す
$( '#jquery-menu-1-title' ) . click( function() { // id が jquery-menu-1-title の要素をクリックしたとき
$( "#jquery-menu-1-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-1-sub の要素をゆっくり開閉
} );
$( '#jquery-menu-2-title' ) . click( function() { // id が jquery-menu-2-title の要素をクリックしたとき
$( "#jquery-menu-2-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-2-sub の要素をゆっくり開閉
} );
$( '#jquery-menu-3-title' ) . click( function() { // id が jquery-menu-3-title の要素をクリックしたとき
$( "#jquery-menu-3-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-3-sub の要素をゆっくり開閉
} );
} );
// -->
</script>