プロが教えるわが家の防犯対策術!

こんにちは。
いつもお世話になっております。
今HPで、ページの上の方に、メニュー文字が帯になって横に並んだ
ページがあるのですが、リンクコンテンツが増えてきたので、
メニュー帯の中の文字にマウスが乗っかったら
帯の下に、コンテンツの文字が浮き出る奴をしたいと
思って、ジャバスクリプトのサンプルページなどを
さすらっているのですが、見つからないのです。

参考サイトさんや、参考になりそうな書籍をご存知の
方いらっしゃいましたら、どうか教えていただけない
でしょうか・・・。
よろしくお願いいたします。

A 回答 (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();
}

 以上
    • good
    • 0
この回答へのお礼

お礼が遅くなってしまって申し訳
ありません。

無事形にする事ができました。

とても丁寧なご指導、ほんとうに
ありがとうございました。

お礼日時:2005/04/14 05:19

下記参照


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
他にも有るから見てみたら。
    • good
    • 0
この回答へのお礼

NAO様。

レスありがとうございます。

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

お礼日時:2005/03/30 04:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!