• ベストアンサー

マウスオーバーしたら、メニュー帯の下に、文字のメニューを出したいです

こんにちは。 いつもお世話になっております。 今ＨＰで、ページの上の方に、メニュー文字が帯になって横に並んだ ページがあるのですが、リンクコンテンツが増えてきたので、 メニュー帯の中の文字にマウスが乗っかったら 帯の下に、コンテンツの文字が浮き出る奴をしたいと 思って、ジャバスクリプトのサンプルページなどを さすらっているのですが、見つからないのです。 参考サイトさんや、参考になりそうな書籍をご存知の 方いらっしゃいましたら、どうか教えていただけない でしょうか・・・。 よろしくお願いいたします。

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

  • ベストアンサー
  • N_A_O
  • ベストアンサー率66% (37/56)
回答No.2

ごめんね、日本語のとこは知らないいんだよね。それで、解説を書いとくから良かったらやってみて。 ReadMe.txt 1）HTMLテキストの<HEAD>～</HEAD>間に下記を記入。 //<-----------この下から------------> <style> all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: #ffff00; cursor: hand; z-index:100}//テキストフォントの種類、大きさ、色及び、マウスの形状の変更可。 #MainTable A:hover {color: #00ff00;}//リンク文字の色、変更可。 </style> <script language="JavaScript"> //Top Nav Bar I v2.1- By Constantin Kuznetsov Jr. //Modified by Dynamic Drive for various improvements //Visit http://www.dynamicdrive.com for this script var keepstatic=1 //specify whether menu should stay static (works only in IE4+) var menucolor="#000000" //specify menu colorメニューバーの色、変更可。空白の場合、透過。 var submenuwidth=150 //specify sub menus' widthサブメニューバーの幅、変更可。 </script> //<---------この上まで------------> *全部のファイルに書き込むのは大変だし管理しやすくする為に、実際は外部ファイルにして読み込んだ方が良いんだけど。 外部ファイルにした場合、HTMLテキストの<HEAD>～</HEAD>間に下記を記入。 <link rel="stylesheet" href="menutext.css" type="text/css"> <script language="JavaScript" src="menuvar.js"></script> 2）HTMLテキストの<body> tagの次に下記をコピーペースト //<---------この下から------------> <script language="JavaScript" src="menu.js"></script> <script language="JavaScript" src="menucontext.js"></script> <script language="JavaScript"> showToolbar(); </script> <script language="JavaScript"> function UpdateIt(){ if (ie&&keepstatic&&!opr6) document.all["MainTable"].style.top = document.body.scrollTop; setTimeout("UpdateIt()", 200); } UpdateIt(); </script> //<---------この上まで----------> 2-2）HTMLテキストの</body> tagの前に下記をコピーペースト //<---------この下から------------> <p>&nbsp;</p> <p>.</p><!--この個数はサブメニューの中の最大の個数分を記入。Netscape用//--> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>&nbsp;</p> //<---------この上まで------------> 3）menu.jsとmenucontext.jsを同じディレクトリーにUP。ディレクトリーを変えた場合は、2）のアドレスの変更を忘れない様に。外部ファイルにした場合、menutext.css、menuvar.jsもUP。 3-2）menu.jsは変更なしで使用。menucontext.jsの中のリンク又はテキスト名を変更して使用する。後、外部ファイルにした場合、menutext.css、menuvar.jsを作成。別紙参照。 menutext.css（ファイルの内容） all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: #ffff00; cursor: hand; z-index:100}//テキストフォントの種類、大きさ、色及び、マウスの形状の変更可。 #MainTable A:hover {color: #00ff00;}//リンク文字の色、変更可。 menuvar.js（ファイルの内容） //Top Nav Bar I v2.1- By Constantin Kuznetsov Jr. //Modified by Dynamic Drive for various improvements //Visit http://www.dynamicdrive.com for this script var keepstatic=1 //specify whether menu should stay static (works only in IE4+) var menucolor="#000000" //specify menu colorメニューテーブルの色、変更可。空白の場合、透過。 var submenuwidth=150 //specify sub menus' widthサブメニューテーブルの幅、変更可。 menucontext.js（日本語に変更後のファイル） //Top Nav bar script v2.1- http://www.dynamicdrive.com/dynamicindex1/sm/index.htm function showToolbar() { // AddItem(id, text, hint, location, alternativeLocation); // AddSubItem(idParent, text, hint, location, linktarget); //<--------メインメニュー-------------> menu = new Menu();//ウインドーの幅に合わせて個数を決定の事。 menu.addItem("A", "メニューA", "メニューA", null, null);//メニューA、2か所変更可削除不可。null削除不可。 menu.addItem("B", "メニューB", "メニューB", null, null); menu.addItem("C", "メニューC", "メニューC", null, null); menu.addItem("D", "メニューD", "メニューD", null, null); menu.addItem("E", "メニューE", "メニューE", null, null); menu.addItem("F", "メニューF", "メニューF", null, null); menu.addItem("G", "メニューG", "メニューG", null, null); menu.addItem("H", "メニューH", "メニューH", null, null); //menu.addItem("I", "メニューI", "メニューI", null, null); //menu.addItem("J", "メニューJ", "メニューJ", null, null); //<-------サブメニューA-----------> menu.addSubItem("A", "ページA-1", "ページA-1", "ジャンプ先URL", "_blank");//ページA-1、2か所変更可削除不可。ジャンプの場合_blankを削除。WindowOpenの場合は_blankを記入。 menu.addSubItem("A", "ページA-2", "ページA-2", "ジャンプ先URL/", ""); menu.addSubItem("A", "ページA-3", "ページA-3", "ジャンプ先URL", ""); menu.addSubItem("A", "ページA-4", "ページA-4", "ジャンプ先URL/", ""); menu.addSubItem("A", "ページA-5", "ページA-5", "ジャンプ先URL", ""); //<--------サブメニューB----------> menu.addSubItem("B", "ページB-1", "ページB-1", "ジャンプ先URL", ""); menu.addSubItem("B", "ページB-2", "ページB-2", "ジャンプ先URL", ""); menu.addSubItem("B", "ページB-3", "ページB-3", "ジャンプ先URL", ""); menu.addSubItem("B", "ページB-4", "ページB-4", "ジャンプ先URL", ""); menu.addSubItem("B", "ページB-5", "ページB-5", "ジャンプ先URL", ""); menu.addSubItem("B", "ページB-6", "ページB-6", "ジャンプ先URL", ""); menu.addSubItem("B", "ページB-7", "ページB-7", "ジャンプ先URL", ""); //<--------サブメニューC----------> menu.addSubItem("C", "ページC-1", "ページC-1", "ジャンプ先URL", ""); menu.addSubItem("C", "ページC-2", "ページC-2", "ジャンプ先URL", ""); menu.addSubItem("C", "ページC-3", "ページC-3", "ジャンプ先URL", ""); //<---------サブメニューD---------> menu.addSubItem("D", "ページD-1", "ページD-1", "ジャンプ先URL", ""); menu.addSubItem("D", "ページD-2", "ページD-2", "ジャンプ先URL", ""); menu.addSubItem("D", "ページD-3", "ページD-3", "ジャンプ先URL", ""); menu.addSubItem("D", "ページD-4", "ページD-4", "ジャンプ先URL", ""); //<---------サブメニューE---------> menu.addSubItem("E", "ページE-1", "ページE-1", "ジャンプ先URL", ""); menu.addSubItem("E", "ページE-2", "ページE-2", "ジャンプ先URL", ""); menu.addSubItem("E", "ページE-3", "ページE-3", "ジャンプ先URL", ""); //<----------サブメニューF--------> menu.addSubItem("F", "ページF-1", "ページF-1", "ジャンプ先URL/", ""); menu.addSubItem("F", "ページF-2", "ページF-2", "ジャンプ先URL/", ""); menu.addSubItem("F", "ページF-3", "ページF-3", "ジャンプ先URL", ""); //<---------サブメニューG---------> menu.addSubItem("G", "", "", "", ""); menu.addSubItem("G", "", "", "", ""); menu.addSubItem("G", "", "", "", ""); //<----------サブメニューH--------> menu.addSubItem("H", "", "", "", ""); menu.addSubItem("H", "", "", "", ""); menu.addSubItem("H", "", "", "", ""); //<----------サブメニューI--------> //menu.addSubItem("I", "", "", "", ""); //menu.addSubItem("I", "", "", "", ""); //menu.addSubItem("I", "", "", "/", ""); //<----------サブメニューJ--------> //menu.addSubItem("J", "t", "", "", ""); //menu.addSubItem("J", "", "", "", ""); //menu.addSubItem("J", "", "", "", ""); menu.showMenu(); } 　以上

sibazuke
質問者

お礼

お礼が遅くなってしまって申し訳 ありません。 無事形にする事ができました。 とても丁寧なご指導、ほんとうに ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • N_A_O
  • ベストアンサー率66% (37/56)
回答No.1

下記参照 http://www.dynamicdrive.com/dynamicindex1/index.html の中の http://www.dynamicdrive.com/dynamicindex1/sm/index.htm following file　をクリックで　TOPMENU.ZIP　をダウンロード 解凍される書類、menu.js、menucontext.js、sample.htm、参考書類、readme.txt 他にも有るから見てみたら。

sibazuke
質問者

お礼

NAO様。 レスありがとうございます。 すみません、出来れば日本語のところって ないでしょうか・・・。 readme.txtを、ウェブの翻訳機能を使って 翻訳してみたのですが、うまくいかなくて・・・。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 階層化されたメニューの作り方

    いつも助けていただきありがとうございます。 あまりに抽象的過ぎるのですが、こんな感じのメニューを作りたいのですが、どのような記述になるのでしょうか？？ (1)まず、横５行、縦５列の表があるとします。 横をA～E、縦を１～５として、最初にA1の部分に「START」のような文字があり、マウスが乗っかっていないときには透明度２０％ぐらいで存在します。 (2)ここにマウスを乗せると（on mouse）透明度が０％になり、１列目にB～Eまでメニューが現れます。 (3)この現れたメニューは透明度５０％ぐらいで、マウスを乗せると（たとえばB1のメニューに乗せると）これも透明度が０％になり、B2～B5までコンテンツメニューが開き、これらも透明化されています。 (4)この透明化されたものにマウスを乗せると、それぞれマウスを乗せたものが乗せたときに透明度０％に戻り、クリックをすることでそれぞれのリンク先に飛ぶことができます。 ただの縦方向への展開・階層化されたメニューの作り方はなんとなくわかるのですが（某HPで使ってる方がいたのでサンプルを頂きました）、今回のように、一度横に展開し、それぞれがまた縦方向に展開、リンクが出現するというメニューの作り方がまったくわかりませんでした。 ちなみに、参考にしたサイトはこちらです。 http://www.calm-web.com/lecture/script/h_script/index.html ここでは、いわゆるツリー型っていうものだと思うのですが、私の望む形にするにはどのようにすればよいでしょうか？？ どうぞ、ご教授のほどよろしくお願いします。

  • マウスを当てたらメニューが出るスクリプト

    マウスを当てたときに下にメニューが出てきて、メニューがリンクになっている場合のスクリプトなどを勉強したいのですが教えていただけないでしょうか？ また、サンプルのホームページなどを探しているのですが見つかりません。 どうか教えていただけないでしょうか？ お願いします。

  • Javascriptのマウスオーバーについて

    Javascriptでマウスオーバーというものがあります。 画像の上にマウスを持っていくと、画像が切り替わるものです。参考：http://www14.plala.or.jp/sugachuu/JavaScript/k06.html そこで、質問なのですが、マウスオーバーのスクリプトを　同じページ内で　いくつも表示させるのは可能ですか？？（上記参考ＵＲＬでたとえると、大きな画像１つと小さな画像４つを一まとめにして、一まとめしたものをいくつも同じページ内で表示することは可能ですか？？） もし可能なら、そのやり方を教えてください。サンプルソースみたいなのをつけていただくと、うれしいです。 よろしくお願いします。

  • マウスオーバーでリンク

    ・フレームページ.html ・メニューページ.html ・メインページ.html ・リンク先ページ.html 上記のようにページを用意しメニューページには画像を設置。 画像はイメージマップを使用し、マウスオーバーでメインページをリンク先ページにリンクし、マウスアウトでメインページに戻る、クリックでリンク先ページ。 というふうにしたいのです。 可能かどうかもわかりませんが、よろしくお願いします。

  • Java Scriptのプルダウンメニューについて

    WindowｓのInternet Explorer 4.0、 Netscape Navigator 4.7以上、を対象としたホームページを作成しています。 この中でプルダウンメニューを使うことを考えていますが、Java Scriptをオフにしても全サイトきちんと見れるようにしたいです。 つまりオフにしてもメニューが出る、もしくはメインのメニューからリンクが張られていてプルダウンからはリンクできなくてもプルダウンメニューと同じ項目のあるインデックスのページに飛べるような。 そんなことは出来るのでしょうか？ 例えば、http://www.omron.co.jp/ir/index.html のサイトでJava Scriptをオフにした時はプルダウンが無い状態になり少なくともメインメニューからは目的のコンテンツにたどり着けるような。 ちなみに、http://www.omron.co.jp/ir/index.htmlのサイトをJava Scriptをオフにした状態で閲覧してもきちんと見ることが出来たのは何でだろ～？？？ どうかよろしくお願い致します。

  • マウスオーバーのプルダウンメニューについて

    すみません。まったくのしろうとです。教えてください。 会社のWebサイトをリニューアルしようとしていますが、メニューを折りたたみにしたいと考えています。ネットでmouseoverというJavaスクリプトでできるということまでは突き止めました。そしてサンプルも見つけたのですが、やりたいことと合致しなくて困っています。 <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <IMG src="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <div id="Menu1" style="visibility:hidden" onMouseout="pdMenu('Menu1')"> <a href="http://www.openspc2.org/" >わっ！</a><br> <a href="http://www.impress.co.jp/">ぎゃっ！</a><br> <a href="http://game.gr.jp/" >しょえ～！</a><br> </div> </body> このスクリプトでは、newimg/AdAge.gifという画像の上にマウスをかざすと、言葉がプルダウンで出てきます。わたしがやりたいのは、この画像を単なるテキストに変えることです。HTMLエディタ上でイロイロやってみましたが、うまくいきません。この部分をテキストに変える方法を教えていただけないでしょうか？ どうかよろしくお願いします。

  • マウスオーバーで画像を切り替えたい！

    みなさん，よろしくお願いします。 リンク文字にマウスを持ってきたときに， 画像を切り替えたいと思っています。 でも，リンク文字にマウスを持ってきたときに， 指の形に変わり”ピコピコ”動いてしまいます。 とても気になるので，”ピコピコ”動かないようにしたいのですが， どのようにすればよろしいのでしょうか？ よろしくお願いします。 方法にはこだわりません，画像が切り替えれれば・・。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>Sample</title> <script language="JavaScript"><!-- function changeIframe(changeURL) { myFrame.location.href = jumpURL; } // --></script> </head> <body> <a href="No1.htm" onmousemove="changeIframe('Sample1.JPG')">こっちへ</a> <a href="No2.htm" onmousemove="changeIframe('Sample2.JPG')">あっちへ</a> <a href="No2.htm" onmousemove="changeIframe('Sample2.JPG')">そっちへ</a> <iframe src="First.html" name="myIFrame" width="320" height="240" scrolling="no" frameborder="0"></iframe> </body> </html>

  • マウスが乗ったときに

    マウスを乗せたときに、いろいろなメニューが出てくるようなスクリプトが欲しいのですが、サンプル探しても見つからなくて困っています。 どなたか教えてください。またよいサンプルがあれば 教えてください。

  • マウスを置くと出るメニュー

    マウスをメニューの上に置くとサブメニューを出すようにしたいのですが、 イマイチ方法がわかりません。 どこかに参考になるページはありませんでしょうか？ BIGLOBEのトップメニューの様なのを想像しています。 （「ニュース・天気・占い」の上にマウスを置くと関連メニューが出てきます） http://www.biglobe.ne.jp/

    • ベストアンサー
    • HTML
  • 　ホームページのメニューなどで、文字にマウスが触れると、文字が変化する

    　ホームページのメニューなどで、文字にマウスが触れると、文字が変化するようにしたいのですが、どのようにすればよいでしょうか？（例えば「LINK」→「リンク」） 　JavaScriptやCSSなどでを使ってもかまいません。 　ホームページに詳しい方、返答お願いします。 ↓　のホームページではflashを使用していますが、出来ればflashをさけたいです。 http://www.johnnys-net.jp/j/artists/arashi/

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する