質問: マウスオーバーしたら、メニュー帯の下に、文字のメニューを出したいです こんにちは。 いつもお世話になっております。 今hpで、ページの上の方に、メニュー文字が帯になって横に並んだ ページがあるのですが、リンクコンテンツが増えてきたので、 メニュー帯の中の文字にマウスが乗っかったら 帯の下に、コンテンツの文字が浮き出る奴をしたいと 思って、ジャバスクリプトのサンプルページなどを さすらっているのですが、見つからないのです。 参考サイトさんや、参考になりそうな書籍をご存知の 方いらっしゃいましたら、どうか教えていただけない でしょうか・・・。 よろしくお願いいたします。
回答: ごめんね、日本語のとこは知らないいんだよね。それで、解説を書いとくから良かったらやってみて。 readme.txt 1)htmlテキストの~間に下記を記入。 //<-----------この下から------------> all.clsmenuitemns, .clsmenuitemie{text-decoration: none; font: bold 12px arial; color: #ffff00; cursor: hand; z-index:100}//テキストフォントの種類、大きさ、色及び、マウスの形状の変更可。 #maintable a:hover {color: #00ff00;}//リンク文字の色、変更可。 //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サブメニューバーの幅、変更可。 //<---------この上まで------------> *全部のファイルに書き込むのは大変だし管理しやすくする為に、実際は外部ファイルにして読み込んだ方が良いんだけど。 外部ファイルにした場合、htmlテキストの~間に下記を記入。 2)htmlテキストの tagの次に下記をコピーペースト //<---------この下から------------> showtoolbar(); function updateit(){ if (ie&&keepstatic&&!opr6) document.all["maintable"].style.top = document.body.scrolltop; settimeout("updateit()", 200); } updateit(); //<---------この上まで----------> 2-2)htmlテキストの tagの前に下記をコピーペースト //<---------この下から------------> . . . . . . . . //<---------この上まで------------> 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(); } 以上