| 解 説 |
フローティングメニューはdivタグ、imgタグで構築する方法とサンプルのようにtableタグで構築する方法があります。tableタグの場合も画像をドラッグする手法と全く同じです。テーブル上でマウスボタンが押されたらドラッグ中とし、マウスの動きに合わせてテーブルを追従させます。マウスボタンが離されたら追従をやめます。
|
| コード |
<![CDATA[
<html>
<head>
<title>フローティングメニュー</title>
<style type="text/css"><!--
td { font-size:9pt; line-height:150%; background-color:#c9d9f6; }
th { font-size:9pt; line-height:150%; background-color:#000000; color:#FFFFFF; }
--></style>
<script language="JavaScript"><!--
flag = false;
function dragOn()
{
flag = true;
offx = event.x - fMENU.style.pixelLeft;
offy = event.y - fMENU.style.pixelTop;
}
function dragOff(){ flag = false; }
function dragTBL()
{
if (!flag) return;
fMENU.style.top = event.y - offy;
fMENU.style.left = event.x - offx;
return false;
}
// --></script>
</head>
<body onMousemove="dragTBL()">
<table border="1" cellspacing="4" cellpadding="0" id="fMENU" style="position:absolute;top:10px;left:10px;" onmousedown="dragOn()" onmouseup="dragOff()">
<tr><th>[[[ MENU ]]]</th></tr>
<tr><td><a href="http://www.impress.co.jp/">■Impress</a></td></tr>
<tr><td><a href="http://www.openspc2.org/" >■OpenSpace</a></td></tr>
<tr><td><a href="http://www.yahoo.co.jp/" >■Yahoo</a></td></tr>
<tr><td><a href="http://www.google.com/" >■Google</a></td></tr>
</table>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
フローティングメニュー