JavaScriptでドロップダウンリスト

質問

下記ページのようなものを作りたいです。
----------
http://www.resonate.co.jp/
中段「Access」の部分の感じ
----------
これはFlashですが、確かJavaScriptでもできたと記憶しています。
が、その作り方を紹介しているページを探し出すことが出来ませんでした。

このようなドロップダウンリストはJavaScriptで出来ますか?また、出来るとした場合、その方法を紹介しているページがあれば教えてください。

回答No.2

yambejp · ベストアンサー

じゃ、こんな感じで

<style type="text/css">

.head-on{
width:150px;
border:5px solid #556C1F;
background-color:#556C1F;
color:#FFFFFF;
}
.head-off{
width:150px;
border:5px solid #93A659;
background-color:#93A659;
}
.sub-on{
display:block;
}
.sub-off{
display:none;
color:#000000;
}
.sub-def{
width:150px;
background-color:#B0BB8A;
border:5px solid #B0BB8A;
text-decoration:none;
color:#000000;
}
.sub-over{
width:150px;
background-color:#D0DBAA;
border:5px solid #D0DBAA;
text-decoration:none;
color:#000000;
}

}
</style>

<div style="position:absolute">
<span style="float:left;"
onMouseover="changeClass('menu1','head-on'); changeClass('sub1','sub-on')"
onMouseout ="changeClass('menu1','head-off');changeClass('sub1','sub-off')">
<span class="head-off" id="menu1">TEST1</span><br>
<span id="sub1" class="sub-off">
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST1</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST1</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST1</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST1</span></a><br>
</span>
</span>
<span style="float:left;"
onMouseover="changeClass('menu2','head-on'); changeClass('sub2','sub-on')"
onMouseout ="changeClass('menu2','head-off');changeClass('sub2','sub-off')">
<span class="head-off" id="menu2">TEST2</span><br>
<span id="sub2" class="sub-off">
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST2</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST2</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST2</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST2</span></a><br>
</span>
</span>
<span style="float:left;"
onMouseover="changeClass('menu3','head-on'); changeClass('sub3','sub-on')"
onMouseout ="changeClass('menu3','head-off');changeClass('sub3','sub-off')">
<span class="head-off" id="menu3">TEST3</span><br>
<span id="sub3" class="sub-off">
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST3</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST3</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST3</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-def" onMouseover="this.className='sub-over'" onMouseout="this.className='sub-def'">TEST3</span></a><br>
</span>
</span>
</div>
<br><br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
<script language=javascript>
function changeClass(obj,cn){
document.getElementById(obj).className=cn;
}
</script>

回答No.1

yambejp

理論は簡単ですが、やるとおもったより面倒。
なるべく似せてみましたが、こんなかんじですで
いかがですか？
（とびさきはすべてyahooになってますけど）

<style type="text/css">
.main-off{
position:relative;
float:left;
height:1em;
width:150px;
overflow:hidden;
border:0px solid;
background-color:#93A659
}
.main-on{
float:left;
overflow:hidden;
width:150px;
background-color:#556C1F;
color:#ffffff;
border:0px solid;
}
.sub-on{
position:relative;
float:left;
overflow:hidden;
width:150px;
border:0px solid ;
text-decoration:none;
}
.sub-off{
position:relative;
float:left;
overflow:hidden;
width:150px;
color:#000000;
background-color:#B0BB8A;
border:0px solid ;
text-decoration:none;
}
}
</style>
<div class="main-off" onMouseover="this.className='main-on';document.getElementById('Facilities').innerHTML='館内施設'" onMouseout="this.className='main-off';document.getElementById('facilities').innerHTML='Facilities'">
<span id="facilities" >Facilities</span><br>
<a href="http://www.yahoo.co.jp"><span class="sub-off" onMouseover="this.innerHTML='客室'" onMouseout="this.innerHTML='Guest Room'">Guest Room</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-off" onMouseover="this.innerHTML='レストラン'" onMouseout="this.innerHTML='Restaurant'">Restaurant</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-off" onMouseover="this.innerHTML='温泉'" onMouseout="this.innerHTML='Hot Spring'">Hot Spring</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-off" onMouseover="this.innerHTML='ショップ'" onMouseout="this.innerHTML='Shop'">Shop</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-off" onMouseover="this.innerHTML='その他施設'" onMouseout="this.innerHTML='Other'">Other</span></a><br>
</div>
<div class="main-off" onMouseover="this.className='main-on';document.getElementById('access').innerHTML='交通案内'" onMouseout="this.className='main-off';document.getElementById('access').innerHTML='Access'">
<span id="access" >Access</span><br>
<a href="http://www.yahoo.co.jp"><span class="sub-off" onMouseover="this.innerHTML='交通案内'" onMouseout="this.innerHTML='Access'">Access</span></a><br>
<a href="http://www.yahoo.co.jp"><span class="sub-off" onMouseover="this.innerHTML='バスチャーター'" onMouseout="this.innerHTML='Buscharder'">Buschater</span></a><br>
</div>

補足

返答ありがとうございます。
まずは、ロールオーバー時の"英語→日本語"は必要ありません。この場合、どこを削ったら良いのでしょうか?
また、太さ(高さ)を変更できないのでしょうか?(色々とやってみたのですがうまく出来ませんでした)

さらに、このボタンを5～6こ横に並べたいので、それぞれをテーブルの中に入れたいと思います。こちらも変な動作をする(デザインが崩れると言えば良いのでしょうか。微妙に上下に動いてしまいます)のですが、何か良い解決方法は無いでしょうか?