• ベストアンサー

Macromediaサイト風メニューを…

Macromediaサイト http://www.macromedia.com/jp/ トップのメニューをマクロメディアではFLASHで作成してますが、これをJavascriptで再現できないでしょうか? 参考になるソースがあれば教えてください、お願いします。

  • frigo
  • お礼率83% (5/6)

質問者が選んだベストアンサー

  • ベストアンサー
  • trisagion
  • ベストアンサー率68% (15/22)
回答No.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">&nbsp;<!--ダミーレイヤー:一行分の高さを確保--></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>

関連するQ&A

  • ツリーメニューについて質問です。

    ツリーメニューについて質問です。 いくつかのサイトを参考にし、コピー&ペーストでjavascriptを使ってツリーメニューを作成したのですが、ツリーメニューが展開された状態で表示されてしまいます。 閉じた状態で表示したいのですが、どうすればいいでしょうか。 ここにソースを載せようと思いましたが入りませんでしたので、載せられません。 主に参考にしたのは、このサイトです。 http://himajin.moo.jp/java/menu2.html このサイトのものに何を足せば良い、とかそのようなソースが載っているサイトがもしあれば教えてほしいです。 よろしくお願いします。 ちなみに私は超初心者です><

  • メニュー作りで困っています。

    よく見かける、マウスをクリックしなくてもカーソルをある部分に置くと、違うテキストや画像がでてくるようにするにはどうしたらいいでしょうか?あの動作の名称がせめて解ればWEBで検索できますが、それすらもわかりません。ロールオーバーではないと思うんですが。。。 どなたか助けてください。 ちなみに、Studio MX 2004 proを使ってます。 参考までに私が言いたい物が置いてある、マクロメディア社のサイトのアドレスです。 http://www.macromedia.com/jp/ 一番上の「ホーム」「製品」...etcのどれかにカーソルを合わせると下に該当するメニューが表示されます。これは簡単にできるような物ではないんでしょうか?

    • ベストアンサー
    • Flash
  • Macromedia Studio 8について

    Macromedia Studio 8は、 Dreamweaver 8 Flash Professional 8 Flash Video Encoder Fireworks 8 Contribute 3 FlashPaper 2 上記のソフトウェアがすべて入っているって事ですか? Macromedia Studio 8:http://www.macromedia.com/jp/software/studio/

  • こんなメニューを作りたいのですが

    http://www.womenjapan.com/ のトップメニューのようにカーソルを重ねると下にメニューが表示されるプルダウン形式のものを作りたいのですが、ここのソースをみてもよくわかりません。 似たような感じでもいいので、参考になるサイトやソースを教えてもらえると助かります。

  • 下記のサイトのTOPページにあるFlashを作成したいと考えています。

    下記のサイトのTOPページにあるFlashを作成したいと考えています。 http://jp.fotolia.com/ 上記のようなFlashは、Actionscriptライブラリなどで作れるものなのでしょうか? あるいは参考になるようなサイトなどありましたらご教授お願いします。

    • ベストアンサー
    • Flash
  • Macromedia Flash MX 2004 で作成したフラッシュをMacromedia Dreamweaver MX 2004で・・・

    いつもお世話になっています。kotenko です。 またまた質問なのですが、Macromedia Flash MX 2004 で作成したフラッシュをMacromedia Dreamweaver MX 2004で作成しているHPに載せたい場合にはどうすればいいのでしょうか?2,3質問です。 <1> Macromedia Flash MX 2004 で作成したファイル名を見ると「●●.fla」 と なっていたのでコレでは確か駄目だと思い、swf ファイルにしないと!と思い 何とかやったのですが、いくら保存してもflaファイルになってしまうのです。 swf ファイルにするにはどのようにしたらよろしいのでしょうか? <2> swf ファイルに保存できたとしてMacromedia Dreamweaver MX 2004で作成しているHPにその Flash を載せたい場合にはツール→メディア→Flash で希望のswfファイルを選択すればいいのでしょうか? ここ何日か色々とやっているのですがなかなかうまく出来なくて、皆様のお知恵をお借りしたいと思っております。 どうか、よろしくお願い致します。

  • 飛び出すメニューについて

    http://www.ex-yz.com/labo/flash/2007/05/2.html これのような、マウスオーバーで下位項目が出てくるというメニューをFlashで作りたいと考えています。 このサンプルでは飛び出す最大の範囲までFlashの領域として確保されていますが、 通常ヘッダーなどに置いた場合、そんなに下が開いている事はあり得ないと思うので 最初から表示されている部分(メインメニュー)のみを初期のFlashの領域とし、 飛び出たサブメニュー部分は下のhtmlに被らせるような状態で作りたいと思うのですが、 これはどうすれば実現できるのでしょうか? Flashとhtmlだけではできないのでしょうか。 あと、Flashで作られたこういうロールオーバーでサブが出てくるようなメニューで 何かかっこいいサイトや効果的な使い方をされているような 参考になるサイトがあれば教えてください。 Javascriptでも作れるような、ただ降りてくるだけのものではなく Flashならではというものを色々見てみたいので。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • こちらのサイトの様なFLASHスライド&メニューの作り方を教えてくださ

    こちらのサイトの様なFLASHスライド&メニューの作り方を教えてください! http://www.zibunzikan.com/ 当方はCS4 windows環境です。 こちらのサイト(http://www.zibunzikan.com/)のトップにあるFLASHメニューが作りたいです。 構造は全く同じで、上部で左右の矢印でスライドが動く。下のサムネールをクリックしても連動してスライドが動く。 そして、メインにきたメニュー(画像)をクリックすると該当コンテンツへリンク。 サイズはブラウザ上で横100%で作成したいです。 このtipsをお教えていただけますでしょうか? 制作環境はcs4になります。

    • ベストアンサー
    • Flash
  • CSSプルダウンメニューについて

    CSSプルダウンメニューについて asahi.comのプルダウンのような縦に表示されなく四角形のようにダウンしてくるプルダウンメニューはどう作成するのでしょうか。いろいろいじってもダメだし、ソースを確認すると文字化けするわで… かといってそのように検索しても全く引っかかりません。 http://www.asahi.com/ http://www.asahicom.jp/css08/top/topstyle.css

    • ベストアンサー
    • CSS
  • グローバルメニュー プルダウン?化及びロールオーバー化

    はじめまして。誰か助けて下さい、今困っています(><) 初めての投稿ですのでもし、わかりづらい文章で不快な思いをさせてしまいましたらすいません。ですが皆さんの知識をお借りしたく質問させて貰いました。 質問の内容ですが、今サイトを作成している最中なのですがTOPメニューの作成でつまずいてしまいました。 DREAMWEABERで作成しているのですが、その中にある機能Spryメニューバーでそれらしいものは作成できるのですが私の作りたい物が出来ません(>_<) 参考イメージは下記のトヨタのサイトです。 http://toyota.jp/ このサイトのようにメニューにマウスを乗せたらbackground-imageも切り替わりつつ下にサブメニューがでるようにしたいのですが、 サイトが複雑&Javascriptが知識が非常に薄く理解出来ませんでした。CSSはレイアウトしたりするかじった程度です。 どなたか優しく教えて貰えると嬉しいです。あとコードも添えて貰えると非常に助かります。 ご無理を言って申し訳ないですがよろしくお願い致します。