ベストアンサー

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

2005/03/28 15:40

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

sibazuke
お礼率90% (97/107)

JavaScript
回答数2
ありがとう数5

みんなの回答 （2）
専門家の回答

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

ベストアンサー

N_A_O
ベストアンサー率66% (37/56)

2005/03/30 20:36 回答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> </p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p> </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(); } 　以上

質問者

お礼 2005/04/14 05:19

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

その他の回答 (1)

N_A_O
ベストアンサー率66% (37/56)

2005/03/29 23:05 回答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 他にも有るから見てみたら。

質問者