HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

ドロップダウン・メニュー

以下のメニューでﾍﾟｰｼﾞ全体の背景色と文字色を変更できる。
またトップメニューの背景色も変更できます。

背景色|文字色|メニュー色

　

　

　

Sample Source......................................................................>>>

<style TYPE="text/css"><!--
.topOFF {width:90;font:12px;padding:1px 12px;text-decoration:underline;cursor:hand;}
.topON {width:90;background-color:#a9a9a9;padding:1px 5px;border-top:1px solid wheat;
　　　　　border-left:1px solid wheat;border-right:2px solid gray;border-bottom:2px solid gray;
　　　　　color:maroon;font:bold 13px;cursor:hand;}
.subOFF {position:absolute;width:90;background-color:lightgrey;font:11pt;cursor:hand;}
.subON {position:absolute;width:90;background-color:lavender;font:bold 11pt;cursor:hand;}
--></style>

<script language="JavaScript"><!--
　var old_top = null;  　　　　 //1つ前のﾄｯﾌﾟﾒﾆｭｰ項目を記憶
　var old_sub = null;   　　　　//1つ前のｻﾌﾞﾒﾆｭｰ項目を記憶
　function Menu(top,sub){  　　 //ﾄｯﾌﾟﾒﾆｭｰをｸﾘｯｸした場合
　　　if(old_sub != null && old_sub != sub)old_sub.style.visibility = "hidden";
　　　if(old_top != null)old_top.className = "topOFF";
　　　　　sub.style.visibility = (sub.style.visibility=="visible") ? "hidden" :"visible";
　　　if(old_top == top)top.className = "topOFF";
　　　else{top.className = (top.className=="topOFF") ? "topON" : "topOFF";}
　　　old_sub = sub;
　　　old_top = top;
　}

　var old_Ele = null;  　　　　  //1つ前に選択したﾒﾆｭｰを記憶
　function SubMenu(y,c){  　　　 //ｻﾌﾞﾒﾆｭｰがｸﾘｯｸされた場合
　　　if(old_Ele != null)old_Ele.className = "subOFF";
　　　　　　var Ele = event.srcElement;　　　　　//ｸﾘｯｸされた要素を取得
　　　　　　Ele.className = (Ele.className == "subOFF") ? "subON" : "subOFF";
　　　//以下、引数の数値により背景色、文字色、ﾒﾆｭｰ色を変更
　　　if(y == 1)by.style.backgroundColor = c;
　　　if(y == 2)by.style.color = c;
　　　if(y == 3){ top1.style.backgroundColor = c;
　　　　　　　　　top2.style.backgroundColor = c;
　　　　　　　　　top3.style.backgroundColor = c;
　　　}
　　　old_Ele = Ele;  　　 //現在のﾒﾆｭｰを1つ前として記憶
　}
//--></script>
</head>

<body id="by">
　<div style="position:absolute;top:120;left:30;background-color:#d3d3d3;">
　　　<p><span id="top1" class="topOFF" onclick="Menu(this,sub1);">背景色</span>|
　　　　 <span id="top2" class="topOFF" onclick="Menu(this,sub2);">文字色</span>|
　　　　 <span id="top3" class="topOFF" onclick="Menu(this,sub3);">メニュー色</span>
　　　</p>
　</div>
　<div id="sub1" class="sub1cl"style="position:absolute;top:145;left:40;visibility:hidden">
　　　<p> <span class="subOFF" onclick="SubMenu(1,'white');">白色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(1,'lightgrey');">薄灰色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(1,'lightblue');">薄青色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(1,'cornsilk');">クリーム色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(1,'mistyrose');">ピンク色</span></p>
　</div>
　<div id="sub2" style="position:absolute;top:145;left:141;visibility:hidden">
　　　<p> <span class="subOFF" onclick="SubMenu(2,'red');">赤色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(2,'green');">緑色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(2,'black');">黒色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(2,'blue');">青色</span></p>
　</div>
　<div id="sub3" style="position:absolute;top:145;left:242;visibility:hidden">
　　　<p> <span class="subOFF" onclick="SubMenu(3,'beige');">ベージュ色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(3,'lightgreen');">緑色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(3,'lightblue');">薄青色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(3,'lightgrey');">グレー色</span><br>
　　　　　<span class="subOFF" onclick="SubMenu(3,'lightpink');">ピンク色</span></p>
　</div>

end(最終更新:12/11/12)