下記ページのようなものを作りたいです。
----------
http://www.resonate.co.jp/
中段「Access」の部分の感じ
----------
これはFlashですが、確かJavaScriptでもできたと記憶しています。
が、その作り方を紹介しているページを探し出すことが出来ませんでした。
このようなドロップダウンリストはJavaScriptで出来ますか?また、出来るとした場合、その方法を紹介しているページがあれば教えてください。
No.2ベストアンサー
- 回答日時:
じゃ、こんな感じで
<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
- 回答日時:
理論は簡単ですが、やるとおもったより面倒。
なるべく似せてみましたが、こんなかんじですで
いかがですか?
(とびさきはすべて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こ横に並べたいので、それぞれをテーブルの中に入れたいと思います。こちらも変な動作をする(デザインが崩れると言えば良いのでしょうか。微妙に上下に動いてしまいます)のですが、何か良い解決方法は無いでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS Webページを作るには、HTMLとCSSだけ出来れば大丈夫なのですか? JavaScriptのスキル 6 2022/08/21 15:28
- JavaScript JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えてほしいです 2 2023/08/25 21:43
- JavaScript セレクトボックスを選んで点数を出した後、4段階評価するプログラム 1 2022/07/03 07:23
- その他(ブログ) 趣味を紹介するブログを開設したいです。おすすめの方法を教えてください。 1 2022/12/14 20:11
- 英語 MDP-9 は 民間用なのでしょうか? また、市販されているのでしょうか? 3 2022/05/04 20:56
- 事件・事故 MDP-9 は民間用なのでしょうか? また、市販されているのでしょうか? 1 2022/05/05 19:57
- C言語・C++・C# プログラミングの問題です。至急教えてください。 /***から***/の部分をプログラミングにしてほし 1 2022/10/13 11:48
- Chrome(クローム) グーグルクロームでプラウザーを2個開く件について 1 2023/08/03 16:04
- JavaScript Javascriptで出来ること 1 2022/05/16 20:19
- その他(SNS・コミュニケーションサービス) 書き込んだ場合、同サイトの同ページに出てこない? 1 2022/05/24 02:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
指定したパスが現URLに含まれて...
-
innerHTMLの初期値
-
Jquery 親要素で順番入れ替え
-
JSで動的にリンクを作成
-
変数内容をHTML内で表示する方法
-
createElementで作成した要素を...
-
jqueryを使って無駄なspanタグ...
-
removeEventListenerについて
-
innerHTMLに入れたリンクが反応...
-
Notice:Undefined index が。
-
checkboxにチェックを入れると...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
文字列より<・・・>を削除す...
-
removeAttribute()メソッドで削...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
HTMLタグに複数のクラスを設定...
-
変数名をどのようにつけるのが...
-
401エラードキュメントを401.ht...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
タブで開いてさらにタブ内をア...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
HTMLとJavaScriptで作ったタイ...
-
getElementByIdの戻り値がnull...
-
指定したパスが現URLに含まれて...
-
[急ぎ] videoタグで埋め込んだm...
-
IFRAMEの表示/非表示を切り替え...
-
iframe内のリンクが飛ばないの...
-
removeAttribute()メソッドで削...
-
背景色を透明化
-
jQueryで同じid属性が複数あっ...
おすすめ情報