マウスボタン・ダウンでリンク先をリスト表示する
|
|||||
| Sample 下の Menu_List と書いている所をクリックして下さい。 | |||||
|
|||||
| ソース | |||||
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var win_param = "height=500,width=500,location=no,scrollbars=no,"
+ "menubars=no,toolbars=no,resizable=yes";
var vis_mnu = "";
var act_mnu, url;
function menu_handle(act_mnu,url) {
popup = window.open("http://"+url,"MenuPopup",win_param);
hideMenu(act_mnu);
popup.focus()
}
function list_menu(act_mnu) {
if (vis_mnu == "")
showMenu(act_mnu);
else {
if (vis_mnu == act_mnu)
hideMenu(act_mnu);
else {
hideMenu(vis_mnu);
showMenu(act_mnu);
}
}
}
function showMenu(act_mnu) {
act_mnu.style.background = "darkcyan";
act_mnu.style.visibility = "visible";
vis_mnu = act_mnu;
}
function hideMenu(act_mnu) {
act_mnu.style.background = "";
act_mnu.style.visibility = "hidden";
vis_mnu = "";
}
//-->
</script>
</HEAD>
<BODY TEXT="black" LINK=blue VLINK=white ALINK=red>
<table border=0 cellpadding=2>
<tr bgcolor=darkcyan style="cursor:default">
<td align=center onMousedown="list_menu(document.all.Mnu1)"><font color=yellow>
<b> Menu_List <font size=1>(ココをクリック) </td>
</tr>
<tr>
<td valign="top">
<table id=Mnu1 width=100% style="cursor:default; visibility:hidden;">
<tr><td onClick="menu_handle(Mnu1,'www.yahoo.co.jp/')"> <a href="#">yahoo.co.jp</a> </td></tr>
<tr><td onClick="menu_handle(Mnu1,'www.excite.co.jp/')"> <a href="#">excite.co.jp </a> </td></tr>
<tr><td onClick="menu_handle(Mnu1,'www.google.com/')"> <a href="#">google.com </a> </td></tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
|
|||||
| ワンポイント解説 | |||||
|
win_param = "height=500,width=500,・・・・ で、ウィンドウをオープンする時のパラメーターを設定しています。
function showMenu(act_mnu) で、メニューが開いたときの背景色などを設定しています。 function hideMenu(act_mnu) で、メニューが閉じたときの背景色などを設定しています。 |