プルダウンメニュー
-
0 名前： 匿名 ： 2006/07/11（火） 15:05 ID:gk5wk1yX
- FORMタグを使わずに、CSSとTABLEタグとJava Scriptでプルダウンメニューを作ることって可能ですか？？
-
1 名前： Script41 ： 2006/07/11（火） 15:05 ID:A3n49R0s
- とりあえず、こんな雰囲気のモノは可能かと。
・・・でも、この質問自体に どういう意図があるのか不明・・・
<script type="text/javascript">
<!--
function dsp(obj){
var i = 0;
opt = document.body.childNodes;
while(opt[i]){
if(opt[i].className == "opt"){
opt[i].style.display = "block";
}
i++;
}
obj.innerHTML = "選択してください ▼";
}
function hdn(){
var i = 0;
opt = document.body.childNodes;
while(opt[i]){
if(opt[i].className == "opt"){
opt[i].style.display = "none";
}
i++;
}
}
function odp(obj){
var i = 0;
opt = document.body.childNodes;
while(opt[i]){
if(opt[i].className == "opt"){
opt[i].style.display = "block";
}
i++;
}
obj.style.backgroundColor = "#000066";
obj.style.color = "#ffffff";
}
function ohn(){
var i = 0;
opt = document.body.childNodes;
while(opt[i]){
if(opt[i].className == "opt"){
opt[i].style.backgroundColor = "#e0e0e0";
opt[i].style.color = "#000000";
opt[i].style.display = "none";
}
i++;
}
}
function sop(obj){
o = document.getElementById('frm');
o.innerHTML = obj.innerHTML;
hdn();
}
//-->
</script>
<style type="text/css">
#frm{
display:block;
border:inset 2px #eeeeff;
height:1.3em;
width:10em;
text-align:right;
font-size:0.95em;
padding:3px;
margin:0;
}
.opt{
display:none;
border:solid 1px #ffffff;
height:1.3em;
width:10em;
text-align:right;
font-size:0.95em;
padding:3px;
margin:0;
background-color:#e0e0e0;
color:#000000;
}
</style>
<body>
<div id="frm" onmouseover="dsp(this)" onmouseout="hdn()">選択してください ▼</div>
<div class="opt" id="opt0" onmouseover="odp(this)" onmouseout="ohn()" onclick="sop(this)">オプション.0</div>
<div class="opt" id="opt1" onmouseover="odp(this)" onmouseout="ohn()" onclick="sop(this)">オプション.1</div>
<div class="opt" id="opt2" onmouseover="odp(this)" onmouseout="ohn()" onclick="sop(this)">オプション.2</div>
<div class="opt" id="opt3" onmouseover="odp(this)" onmouseout="ohn()" onclick="sop(this)">オプション.3</div>
<div class="opt" id="opt4" onmouseover="odp(this)" onmouseout="ohn()" onclick="sop(this)">オプション.4</div>
</body>
