|
|
| ポップアップメニューの作成 |
- レイヤをある程度理解する事ができれば、いろいろ面白い事が行えるようになります。
この章では、Microsoftなど有名サイトでも良く使用されているレイヤを使ったメニューの作成に挑戦します。
最近では、ホームページ作成ソフトにポップアップメニューを簡単に付けられるものがありますが、
それらのソフトが生成するJavaScriptを再配布する事はできません。
また、メニュー作成法を理解していなければCGIに応用する事もできませんので、簡単なものは作成できる必要があります。
- ダイナミックメニューを作る
それではこの章のまとめにダイナミックなメニューを作ってみましょう。
<style TYPE=text/css>
a:link {text-decoration:none;color:#405040 }
a:visited {text-decoration:none;color:#405040 }
a:active { text-decoration:none; color:#00FF00;background:#000000 }
a:hover { text-decoration:none; color:#FFFF00;background:#000000 }
</style>
<dl>
<dt id=menu1 class='0' onclick="menushow(1);">
<a href=javascript:void(0)>■ 初めてのCGI</a></dt>
<dd id=sub1 style="DISPLAY:none">
<li><nobr><a href=#>ローカルサーバーでCGI</a></nobr></li>
<li><nobr><a href=#>Perlマニュアル</a></nobr></li>
<li><nobr><a href=#>ロックファイルを考える</a></nobr></li>
<li><nobr><a href=#>Webからのメール送信機能</a></nobr></li>
<li><nobr><a href=#>不正なタグの除去</a></nobr></li>
</dd>
<dt id=menu2 class='0' onclick="menushow(2);">
<a href=javascript:void(0)>■ CGI研究室</a></dt>
<dd id=sub2 style="DISPLAY:none">
<li><nobr><a href=#>便利なサブルーチン関数集</a></nobr></li>
<li><nobr><a href=#>改造の手引き</a></nobr></li>
<li><nobr><a href=#>開発のコツ</a></nobr></li>
<li><nobr><a href=#>グラフィックライブラリ</a></nobr></li>
<li><nobr><a href=#>JavaとCGI</a></nobr></li>
</dd>
<script>
function menushow(menu){
var menuID=document.getElementById('menu'+menu);
var subID=document.getElementById('sub'+menu);
if(menuID.className=='0'){
subID.style.display='block';
menuID.className='1';
}else{
subID.style.display='none';
menuID.className='0';
}
}
</script>
|
|
これは、今までにも何度も登場したドロップダウンメニューの基本型です。
DISPLAY:none
で隠されているサブメニューをmenushow関数が、親メニューのclassによって表示しています。
最初はclassが0なので、メニューを表示、classを1に設定し、次に押された場合は、
classが1なので非表示に切り替えています。
この例では、Styleの設定にPOSITION:absolute が有りませんのでレイヤではない事になります。
次の例は、サブメニューをレイヤを使って表示しています。
<style TYPE=text/css>
a:link { text-decoration:none; color:#405040 }
a:visited { text-decoration:none;color:#405040 }
a:active { text-decoration:none; color:#00FF00;background:#000000 }
a:hover { text-decoration:none; color:#FFFF00;background:#000000 }
</style>
<table border=0>
<tr><td id=menu1 class='0'
onclick="showmenu(1);">
<a href=javascript:void(0)>■ 初めてのCGI</a></td></tr>
<tr><td id=menu2 class='0'
onclick="showmenu(2);">
<a href=javascript:void(0)>■ CGI研究室</a></td></tr>
</table>
<div id=layer1 style="BORDER-RIGHT:black thin solid;BORDER-BOTTOM:thin solid;
BACKGROUND-COLOR:turquoise;POSITION:absolute;DISPLAY:none; LEFT:80">
</div>
<div id=sub1 style="DISPLAY:none">
<table border=0>
<tr><td><a href=#>ローカルサーバーでCGI</a></td></tr>
<tr><td><a href=#>Perlマニュアル</a></td></tr>
<tr><td><a href=#>ロックファイルを考える</a></td></tr>
<tr><td><a href=#>Webからのメール送信機能</a></td></tr>
<tr><td><a href=#>不正なタグの除去</a></td></tr>
</table>
</div>
<div id=sub2 style="DISPLAY:none">
<table border=0>
<tr><td><a href=#>便利なサブルーチン関数集</a></td></tr>
<tr><td><a href=#>改造の手引き</a></td></tr>
<tr><td><a href=#>開発のコツ</a></td></tr>
<tr><td><a href=#>グラフィックライブラリ</a></td></tr>
<tr><td><a href=#>JavaとCGI</a></td></tr>
</table>
</div>
<script>
var Flag=0;
var Obj;
function showmenu(menu){
if(Flag) {
if(menu!=Obj){
var menuID=document.getElementById('menu'+Obj);
menuID.className='0';
subclose();
}
}
menushow(menu)
}
function menushow(menu){
var menuID=document.getElementById('menu'+menu);
var subID=document.getElementById('sub'+menu);
var layerID=document.getElementById('layer1');
if(menuID.className=='0'){
layerID.style.top=menu*23+16;
layerID.innerHTML=subID.innerHTML;
layerID.style.display='block';
menuID.className='1';
Flag=1;
Obj=menu;
}else{
menuID.className='0';
subclose();
}
}
function subclose(){
var layerID=document.getElementById('layer1');
layerID.style.display='none';
Flag=0;
}
</script>
|
|
|
|
|
