TOPメニュー

ホーム > DHTML > TOPメニュー

■説明

　メニューが常にページの上に表示されるようになります。メニューにはリンクをはっています。一応クロスブラウザー(IE/Nに対応しているという意味)となっています。DHTMLの機能です。動的なページを作ることが出来ます。

■ソース

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>TOPメニュー</TITLE>
</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
//――――――――――――――――――――――――――――――――――――――
// 作成者:るび～  ACCESS R  http://www5e.biglobe.ne.jp/~access_r/
//――――――――――――――――――――――――――――――――――――――
function Menu(){
	if(document.all){
		document.all("m1").style.top = document.body.scrollTop;
		document.all("m1").style.left = document.body.scrollLeft;
	}else if(document.layers){
		document.layers["m1"].top = window.pageYOffset;
		document.layers["m1"].left = window.pageXOffset;
	}else if(document.getElementById){
		document.getElementById("m1").style.top = window.pageYOffset;
		document.getElementById("m1").style.left = window.pageXOffset;
	}
}

if(document.all || document.layers || document.getElementById){
		//以下の行を修正し、メニューを変更して下さい。
	document.write('<DIV STYLE="position:absolute;z-index:2;width:150px;top:0px;left:0px;" ID="m1">');
	document.write('<TABLE WIDTH="150" HEIGHT="30px" BORDER="1"><TR><TD BGCOLOR="#FFFFFF">');
	document.write('<A HREF="../../">TOP</A><BR>');
	document.write('<A HREF="../html/">HTML</A><BR> ');
	document.write('<A HREF="../javascript/">JavaScript</A><BR>');
	document.write('<A HREF="../dhtml/">DHTML</A><BR>');
	document.write('<A HREF="../css/">CSS</A><BR>');
	document.write('</TD></TR></TABLE></DIV> ');
}
window.onscroll = Menu;
//-->
</SCRIPT>

</BODY>
</HTML>

■ソースの説明

ユーザが設定する部分はコメントに記述してある部分をよく読んで設定してください。
JavaScriptを外部ファイルも設置出来るようにしました。設定する際には<BODY>～</BODY>内に以下の分を記述して下さい。尚、ここからダウンロード（dhtml_107.js）して下さい。設定を変える際には、ダウンロードしたdhtml_107.jsファイルを直接修正して下さい。
使用しているものは、「document.all」と「document.layers」と「document.getElementById」の3つ使用することによって両ブラウザに対応しています。対応していないブラウザに関しては何も表示しないようになっています。
IEは、「document.all("m1").style.top」に常に「document.body.scrollTop」を設定する事で常にページにTOPにメニューを表示しています。
N4は、「document.layers["m1"].top」に常に「window.pageYOffset」を設定する事で常にページにTOPにメニューを表示しています。
N6以降は、「document.getElementById("m1").style.top」に常に「window.pageYOffset」を設定する事で常にページにTOPにメニューを表示しています。
IEは、「document.all("m1").style.left」に常に「document.body.scrollLeft」を設定する事で常にページにTOPにメニューを表示しています。
N4は、「document.layers["m1"].left」に常に「window.pageXOffset」を設定する事で常にページにTOPにメニューを表示しています。
N6以降は、「document.getElementById("m1").style.left」に常に「window.pageXOffset」を設定する事で常にページにTOPにメニューを表示しています。

■対応ブラウザ

TOPメニュー
IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6
×	●	●	●	●	×	●	●	●	×

[ホーム] [DHTML] [↑ページ最上部へ戻る]

Webデザイナーになれる！
HTML、FLASH、CSS等様々なWeb技術やデザインに関することを学ぶことが出来ます。Webデザイナーなら、是非どうぞ！資料請求は無料！です。