TOPページ >  クリックやマウスオーバーで表示が変化(イベントパンドラ) > レイヤーを使って折りたたみメニューを表示する

レイヤーを使って折りたたみメニューを表示する

HTMLの<div>タグが持つレイヤー機能と 簡単なJavaScriptを組み合わせると、ウェブサイト内に表示されている文字などにマウスポインタが重なったりクリックしたときに別の文章をなどを表示させることができます。これを使って、折りたたみメニューを作ることができます。

メニューリスト

クリックでメニューが開きます。

このソースは、次のようになります。

<script Language=javascript>
<!--
function show(inputData) {
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "category_" + inputData );
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
}else{
objID.style.display='none';
objID.className='close';
}
}
//-->
</script>
<p>メニューリスト</p>
<ul>
<li><a href="javascript:void(0)" id="category_1" onclick="show('1');">1のカテゴリ</a>
<div id="layer_1" style="display: none;position:relative;" class="close">
<ul>
<li>1-1のエントリ
<li>1-2のエントリ
<li>1-3のエントリ
</ul>
</div>
<li><a href="javascript:void(0)" id="category_2" onclick="show('2');">2のカテゴリ</a>
<div id="layer_2" style="display: none;position:relative;" class="close">
<ul>
<li>2-1のエントリ
<li>2-2のエントリ
<li>2-3のエントリ
</ul>
</div>
</ul>
<p>クリックでメニューが開きます。</p>

大きさを指定してウィンドウを開く(こ(ボタンにアンカー機能を持たせる;リンクする、という意味で)や、送信ボタンの代わりに画像を表示すると組み合わせて使用すると、下記のように画像のクリックで同様の効果を持たせることもできます。

メニューリスト

  •  3のカテゴリ
  •  4のカテゴリ

三角マーク』マークをクリックすると、メニューが開きます。

このソースは、次のようになっています。

<script Language=javascript>
<!--
function show(inputData) {
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "button_" + inputData );
if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
buttonID.src='http://html.appelle.jp/image/close.gif';
}else{
objID.style.display='none';
objID.className='close';
buttonID.src='http://html.appelle.jp/image/open.gif';
}
}
//-->
</script>

<p>メニューリスト</p>
<ul style="list-style-type:none">
<li><input type="image" src="http://html.appelle.jp/image/open.gif" id="button_3" onclick="show('3');"> 3のカテゴリ
<div id="layer_3" style="display: none;position:relative;" class="close">
<ul>
<li>3-1のエントリ
<li>3-2のエントリ
<li>3-3のエントリ
</ul>
</div>
<li><input type="image" src="http://html.appelle.jp/image/open.gif" id="button_4" onclick="show('4');"> 4のカテゴリ
<div id="layer_4" style="display: none;position:relative;" class="close">
<ul>
<li>4-1のエントリ
<li>4-2のエントリ
<li>4-3のエントリ
</ul>
</div>
</ul>
<p>『<img src="http://html.appelle.jp/image/open.gif" width="9" height="12" alt="三角マーク">』マークをクリックすると、メニューが開きます。</p>

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
イベントパンドラ:マウスを重ねると説明が表示される
イベントパンドラ:マウスを重なると画像が変化する
レイヤーを使って折りたたみメニューを表示する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス