開閉するメニュー
CSSのdisplayプロパティを利用し、メニューを開閉できるようにする。即ち、"block"と"none"を切り替える。
DHTML 応用編
■ 造形工房
■ 運動力学
■ 踊り子ショー
■ マウスでホイ
CSSのdisplayプロパティを利用し、メニューを開閉できるようにする。即ち、"block"と"none"を切り替える。
Sample Source......................................................................>>>
<style type="text/css"><!--
#m01,#m02,#m03,#m04 {display:none;}
-->
</style>
<script language="JavaScript"><!--
var old_sub = null; //1つ前のsubメニュー項目を記憶しておく変数
function menu(sub){
if(old_sub != null)old_sub.style.display = "none"; //開いているメニューを閉じる
sub.style.display = "block"; //メニューを開く
old_sub = sub; //開いたメニューを変数「old_sub」に記憶しておく
}
//--></script>
</head>
<body>
<div class="item" onclick="menu(m01);">■ 造形工房</div>
<div id="m01">
<span class="mark">▼</span><a href="dhtml02/draw01.htm"
target="_self">階段</a><br>
<span class="mark">▼</span><a href="dhtml02/draw07.htm"
target="_self">風船</a><br>
･･･
</div>
<div class="item" onclick="menu(m02);">■ 運動力学</div>
<div id="m02">
<span class="mark">▼</span><a href="dhtml02/move01.htm"
target="_self">
バウンドする文字列・画像</a><br>
<span class="mark">▼</span><a href="dhtml02/move02.htm"
target="_self">
移動量を変えながらバウンド</a><br>
････
</div>
<div class="item" onclick="menu(m03);">■ 踊り子ショー</div>
<div id="m03">
<span class="mark">▼</span><a href="dhtml02/show02.htm"
target="_self">左右に歩く踊り子</a><br>
<span class="mark">▼</span><a href="dhtml02/show03.htm">二人で踊り子</a><br>
</div>
<div class="item" onclick="menu(m04);">■ マウスでホイ</div>
<div id="m04">
<span class="mark">▼</span><a href="dhtml02/mouse02.htm"
target="_self">
マウスと一緒に動くボール</a><br>
<span class="mark">▼</span><a href="dhtml02/mouse03.htm"
target="_self">
マウスダウン位置まで動くボール</a><br>
</div>
end(最終更新:12/11/6)