ページ内の左クリック・メニュー
ページ内の任意の位置を左クリックすればメニューが開き、このページをカスタマイズできます。
ページ内の任意の位置を左クリックすればメニューが開き、このページをカスタマイズできます。
Sample Source......................................................................>>>
＊本題の趣旨から外れるので、時計を表示するScriptは省略しました(WWWﾌﾟﾗｳｻﾞのHTMLｿｰｽで見て下さい)
<style TYPE="text/css"><!--
.over {width:150;color:white;font:12pt;cursor:hand;}
.open {width:150;color:blue;font:12pt;border:thin solid maroon;}
.submenu {position:absolute;width:250;background-color:#dcdcdc;padding:5px;
color:navy;font:10pt;display:none;}
select {width:120px;margin-left:20px;}
--></style>
<script language="JavaScript"><!--
var flg1 = true;
var flg2 = true;
var flg3 = true;
var ac_obj; //現在のﾒﾆｭｰを記憶しておく変数
function SubMenu(obj,sub,t){ //ﾒﾆｭｰ選択時
if(flg3 == true){obj.className = "open";ac_obj = obj;
//ｸﾘｯｸ位置が右端に近い場合、ｻﾌﾞﾒﾆｭｰを左側に出す
if(dv.style.pixelLeft < document.body.clientWidth - 135 -200){
sub.style.pixelLeft = dv.style.pixelLeft + 135;
}else{sub.style.pixelLeft = dv.style.pixelLeft - 200;}
sub.style.pixelTop = dv.style.pixelTop + t;
sub.style.display = "block"; //ｻﾌﾞﾒﾆｭｰを表示
flg1 = true;
flg2 = false;
flg3 = false;
window.event.cancelBubble=true;
}
}
var timerID;
function SubOK(sub){ //ｻﾌﾞﾒﾆｭｰ内のﾎﾞﾀﾝが押された場合
if(sub == sub1)boy.style.backgroundColor = bgsel.value;
if(sub == sub2)boy.style.color = cosel.value;
if(sub == sub3)boy.style.fontFamily = fnsel.value;
if(sub == sub4)boy.style.fontSize = fssel.value;
if(sub == sub5)PositionSet();
ac_obj.className = "menu";
sub.style.display = "none";
flg1 = false;
flg3 = true;
window.event.cancelBubble=true;
}
//--></script>
<script FOR="document" EVENT="onclick" language="JavaScript"><!--
if(flg1 == true){
if(flg2 == true) {
//ﾒﾆｭｰがｳｨﾝﾄﾞｳの右端を超える場合は、左側に出す
if(event.x < document.body.clientWidth - 135){
dv.style.pixelLeft = event.x; //現在のMouseのX座標を取得
}else{dv.style.pixelLeft = event.x - 135;}
//ﾒﾆｭｰがｳｨﾝﾄﾞｳの下端を超える場合は、上側に出す
if(event.y < document.body.clientHeight - 110){
dv.style.pixelTop = event.y; //現在のMouseのy座標を取得
}else{dv.style.pixelTop = event.y - 110;}
dv.style.visibility = "visible";
flg1 = false;
}
} else{
dv.style.visibility = "hidden";
flg1 = true;
flg2 = true;
}
//--></script>
</head>
<body id="boy">
<div id="dv"style="position:absolute;width:135;background-color:silver;
color:navy;font:14px;visibility:hidden;">
<p><span class="menu" onmouseover="if(this.className != 'open')this.className='over'"
onmouseout="if(this.className != 'open')this.className='menu'"
onclick="SubMenu(this,sub1,0);">背景色変更 </span><br>
<span class="menu" onmouseover="if(this.className !=
'open')this.className='over'"
onmouseout="if(this.className != 'open')this.className='menu'"
onclick="SubMenu(this,sub2,20);">文字色変更</span><br>
<span class="menu" onmouseover="if(this.className !=
'open')this.className='over'"
onmouseout="if(this.className != 'open')this.className='menu'"
onclick="SubMenu(this,sub3,40);">使用フォント変更</span><br>
<span class="menu" onmouseover="if(this.className !=
'open')this.className='over'"
onmouseout="if(this.className != 'open')this.className='menu'"
onclick="SubMenu(this,sub4,60);">フォントサイズ変更</span><br>
<span class="menu" onmouseover="if(this.className !=
'open')this.className='over'"
onmouseout="if(this.className != 'open')this.className='menu'"
onclick="SubMenu(this,sub5,80);">時計</span> </p>
</div>
<div id="sub1" class="submenu">
<p>このページの背景色を選択してﾈ<br>
<select id="bgsel" size="1">
<option value="white" selected>白色 </option>
<option value="azure">水色 </option>
<option value="lightsteelblue">薄青色</option>
<option value="lightgreen">緑色</option>
<option value="lightyellow">黄色</option>
<option value="tan">茶色</option>
<option value="peachpuff">オレンジ色</option>
<option value="mistyrose">ピンク色</option>
<option value="violet">紫色</option>
<option value="lightgrey">薄グレー色</option>
</select> <button onclick="SubOK(sub1);">＜OK＞</button></p>
</div>
･･･(途中省略)
<div id="sub5" class="submenu">
<p>ﾍﾟｰｼﾞ下右端に<br>
<button id="bt_clock" onclick="SubOK(sub5);">
時計を表示</button></p>
</div>
end(最終更新:12/11/18)