- ベストアンサー
Ｍacromediaサイト風メニューを…
Ｍacromediaサイト http://www.macromedia.com/jp/ トップのメニューをマクロメディアではＦＬＡＳＨで作成してますが、これをJavascriptで再現できないでしょうか？ 参考になるソースがあれば教えてください、お願いします。
- frigo
- お礼率83% (5/6)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
JavaScriptでも近い動作のものはできると思います。 HTMLの構造などによっては厳しい場合もあるとは思いますが。 以下、参考です。IE6・Firefox1ではそれなりな動きをしていると思います。 <HTML> <HEAD> <TITLE>Test</TITLE> <SCRIPT language="javascript" type="text/javascript"> <!-- timer = false;//タイマーの初期化 time = 2000;//レイヤーや背景色を元に戻すまでの時間(ミリ秒) //タイマーの削除用 function clearTimer(){ if(timer){ clearTimeout(timer); } } //メインメニューの背景色変化用 function changeColor(id,color){ //メインメニューのIDをすべて配列にする var menu = new Array('menu1','menu2','menu3'); //すべてのメインメニューの背景を初期化 for(i = 0; i < menu.length; ++i){ document.getElementById(menu[i]).style.backgroundColor = 'transparent'; } //選択されたメインメニューのみ背景色を変化 document.getElementById(id).style.backgroundColor = color; } //サブメニューの表示変化用 function changeDisplay(id,flag){ //サブメニュー用レイヤーのIDをすべて配列にする var layer = new Array('layer0','layer1','layer2','layer3');//配列の先頭は非表示時に表示するダミーのレイヤー //すべてのレイヤーを非表示化 for(i = 0; i < layer.length; ++i){ document.getElementById(layer[i]).style.display = 'none'; } //フラグが0以外なら選択されたレイヤーを表示、0ならダミーを表示 var object = (flag)? document.getElementById(id): document.getElementById(layer[0]); object.style.display = 'block'; } //メイン function changeMenu(id,flag,menu){ //タイマーがあれば削除 clearTimer(); //フラグが0以外(onMouseOver)時の色指定。フラグが0の時(onMouseOut)は透明 var color = (flag)? '#ff6600': 'transparent'; //色変更 changeColor(menu,color); //サブメニュー表示切替 changeDisplay(id,flag); } //サブメニュー内での背景色変化 function subMenu(object,flag,menu){ var color = 'transparent'; if(flag){ //onMouseOver時に色指定とタイマーの削除 color = '#ff9933'; clearTimer(); }else{ //onMouseOut時に元も戻すタイマーの設定 timer = setTimeout('changeMenu(\''+object.parentNode.id+'\',0,\''+menu+'\')',time); } //サブメニューの色変更 object.style.backgroundColor = color; } //--> </SCRIPT> <STYLE type="text/css"> <!-- /* サブメニューレイヤーの初期化 */ #layer0 {display:block}/* 空のダミーレイヤー */ #layer1 {display:none;} #layer2 {display:none;} #layer3 {display:none;} --> </STYLE> </HEAD> <BODY> <H1>Menu Sample</H1> <!--メインメニュー リンク時には何もしない changeMenu(A,B,C) A:表示するサブメニューのIDを指定 B:フラグ(onMouseOverでは1、onMouseOutでは0) C:自身に付けたID --> <P><A href="javascript:void(0)" id="menu1" onMouseOver="changeMenu('layer1',1,'menu1')" onMouseOut="timer = setTimeout('changeMenu(\'layer1\',0,\'menu1\')',time)">MenuMenu1</A> <A href="javascript:void(0)" id="menu2" onMouseOver="changeMenu('layer2',1,'menu2')" onMouseOut="timer = setTimeout('changeMenu(\'layer2\',0,\'menu2\')',time)">MenuMenu2</A> <A href="javascript:void(0)" id="menu3" onMouseOver="changeMenu('layer3',1,'menu3')" onMouseOut="timer = setTimeout('changeMenu(\'layer3\',0,\'menu3\')',time)">MenuMenu3</A> <!--サブメニュー subMenu(A,B,C) A:自身(this)を指定 B:フラグ(onMouseOverでは1、onMouseOutでは0) C:自身のサブメニューに対応するメインメニューのID --> <DIV id="layer0"> <!--ダミーレイヤー：一行分の高さを確保--></DIV> <DIV id="layer1"><A href="http://www.yahoo.co.jp/" onMouseOver="subMenu(this,1,'menu1')" onMouseOut="subMenu(this,0,'menu1')">yahoo</A>| <A href="http://www.google.co.jp/" onMouseOver="subMenu(this,1,'menu1')" onMouseOut="subMenu(this,0,'menu1')">google</A></DIV> <DIV id="layer2"><A href="http://www.yahoo.co.jp/" onMouseOver="subMenu(this,1,'menu2')" onMouseOut="subMenu(this,0,'menu2')">yahoo</A>| <A href="http://www.google.co.jp/" onMouseOver="subMenu(this,1,'menu2')" onMouseOut="subMenu(this,0,'menu2')">google</A>| <A href="http://www.goo.ne.jp/" onMouseOver="subMenu(this,1,'menu2')" onMouseOut="subMenu(this,0,'menu2')">goo</A></DIV> <DIV id="layer3"><A href="http://www.goo.ne.jp/" onMouseOver="subMenu(this,1,'menu3')" onMouseOut="subMenu(this,0,'menu3')">goo</A>| <A href="http://www.yahoo.co.jp/" onMouseOver="subMenu(this,1,'menu3')" onMouseOut="subMenu(this,0,'menu3')">yahoo</A>| <A href="http://www.google.ne.jp/" onMouseOver="subMenu(this,1,'menu3')" onMouseOut="subMenu(this,0,'menu3')"">google</A></DIV> <P>これ以下本文です</P> </BODY> </HTML>
