こんにちは。
いつもお世話になっております。
今HPで、ページの上の方に、メニュー文字が帯になって横に並んだ
ページがあるのですが、リンクコンテンツが増えてきたので、
メニュー帯の中の文字にマウスが乗っかったら
帯の下に、コンテンツの文字が浮き出る奴をしたいと
思って、ジャバスクリプトのサンプルページなどを
さすらっているのですが、見つからないのです。
参考サイトさんや、参考になりそうな書籍をご存知の
方いらっしゃいましたら、どうか教えていただけない
でしょうか・・・。
よろしくお願いいたします。
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><!--この個数はサブメニューの中の最大の個数分を記入。Netscape用//-->
<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/ind …
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();
}
以上
お礼が遅くなってしまって申し訳
ありません。
無事形にする事ができました。
とても丁寧なご指導、ほんとうに
ありがとうございました。
No.1
- 回答日時:
下記参照
http://www.dynamicdrive.com/dynamicindex1/index. … の中の
http://www.dynamicdrive.com/dynamicindex1/sm/ind …
following file をクリックで TOPMENU.ZIP をダウンロード
解凍される書類、menu.js、menucontext.js、sample.htm、参考書類、readme.txt
他にも有るから見てみたら。
NAO様。
レスありがとうございます。
すみません、出来れば日本語のところって
ないでしょうか・・・。
readme.txtを、ウェブの翻訳機能を使って
翻訳してみたのですが、うまくいかなくて・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでの文字位置の上下センタリング 3 2023/03/08 18:42
- SEO 関係ないページを検索エンジンが拾ってしまう 1 2022/05/14 11:16
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- iPad iPadのメモアプリ 文字が突然大きくなってしまった 3 2022/12/23 23:06
- その他(ブラウザ) Webサイトのフォントサイズを統一できないか 1 2023/06/28 11:11
- 大学・短大 大学のレポート課題 2 2023/05/20 19:40
- JavaScript ブックマークレットについて 2 2022/10/09 11:48
- Chrome(クローム) HPの様子が変わった 2 2022/03/25 05:37
- Word(ワード) ワードで,特定の文字だけ,字体を一括変換する方法は? 1 2023/04/26 10:11
- iPhone(アイフォーン) 文字起こしのアプリ 5 2022/07/14 20:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
processing
-
javascript内で外部ファイルを...
-
javascriptファイルは1つに統...
-
ひとつの外部ファイルに複数の...
-
外部ファイルを実行
-
メールフォーム、受信メールの...
-
ホームディレクトリを示すチル...
-
Dreamweaver で 外部JSを読み込...
-
複数のJavascriptを1つのscrip...
-
【Google Apps Script】「ライ...
-
Smarty(tplファイル)でJavaScri...
-
javascriptのalertで文字化けが...
-
JavascriptとJqueryを混在し記述
-
初心者です。あまりに初歩的な...
-
ScriptがTABLEタグの中に表示さ...
-
javascriptとApacheの設定
-
<a href="#" …>の意味を教えて...
-
javascriptでalertの文字列をコ...
-
bodyにidをつける理由は何ですか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
複数のJavascriptを1つのscrip...
-
Dreamweaver で 外部JSを読み込...
-
javascriptとApacheの設定
-
【Google Apps Script】「ライ...
-
cssにjavascriptを入れる?呼び...
-
JavaScriptのエラー ( 関数の...
-
ひとつの外部ファイルに複数の...
-
javascriptファイルは1つに統...
-
JavascriptとJqueryを混在し記述
-
<script src="">読み込まない
-
javascriptのalertで文字化けが...
-
レンタルサーバーでjavascript...
-
javascript内で外部ファイルを...
-
外部読み込みで動かないときの...
-
外部ファイルを実行
-
プルダウンメニューを別ファイ...
-
ホームディレクトリを示すチル...
-
外部.jsの内容を一部置き換えて...
-
xmlHttpRequest.send( EncodeHT...
おすすめ情報