秘奥義・子守蛇（さいどわいんだー）

〜自動追尾メニューの作り方〜

自動追尾メニューとは？

どのページにも常に同じメニューが表示される
これは少し前までは「フレーム」を使ったページの専売特許だった。
しかし、最新のHTMLではこのフレームが廃止されることとなった。（方尺記・段ノ弐参照）

そこでフレームを使わずに常に同じメニューが表示される方法として
このページのようにJavaScriptとスタイルシートを併用した方法が編み出された。

なお余談であるが秘奥義の名にある「サイドワインダー（sidewinder）」とは
英和辞典で調べると次のような意味がある。

    

  1. （動物）ヨコバイガラガラヘビ

  2. 米軍の（自動追尾）空対空ミサイル



秘奥義・子守蛇（さいどわいんだー）〜自動追尾メニューの作成〜

この技は次の三つのファイルから構成される

なお、実際にはフレームページのかわりにすべてのページに同じメニューを表示させる
ということを目的としているので、このページでもファイルも三つ作成する必要があるのだが、
ここでは説明のためすべてを一つのページに組み込んでいることをご了承願いたい。


外部スタイルシートファイルの作成







1、テキストエディタ（メモ帳など）を起動し次のように書き込む


#menu{
position:absolute;
left:12px;top:12px;
border-style:solid;border-color:green;
width:100px;padding:10px;
background-color:#DDFFDD;text-align:center;
}
body{padding-left:120px;}


2、ファイル名を「（任意の名前）.css」にして保存

ここでは「style.css」という名前で保存します

position:absolute;left:12px;top:12px;
初期位置：ページの左上から12ピクセルずつあけた場所
border-style:solid;border-color:green;
境界線：緑色の実線
width:100px;padding:10px;
横幅：100ピクセル、中の文字との間に10ピクセルの余白
background-color:#DDFFDD;text-align:center;
背景色：うすい緑、文字は中央揃え


body{padding-left:120px;}
ページの左側にメニューが移動するための余白120ピクセルを開ける








外部JavaScriptファイルの作成







1、テキストエディタ（メモ帳など）を起動し次のように書き込む


function Sidewinder(){
	if(!document.getElementById) return;
	obj=document.getElementById("menu");
	y=Scroll()+12;
	obj.style.top=y+"px";
	setTimeout("Sidewinder();",100);
}

function Scroll(){
    if(window.pageYOffset)
        return window.pageYOffset;
    if(document.compatMode == "CSS1Compat")
        return document.body.parentNode.scrollTop;
    if(document.body.scrollTop)
        return document.body.scrollTop;
    return 0;
}

function Contents(){
	document.write("<a href='botan.html'>奥義・牡丹</a><br><br>")
	document.write("<a href='fugetu.html'>奥義・浮月</a><br><br>")
	document.write("<a href='../../ren.html'>もどる</a>")
}


2、ファイル名を「（任意の名前）.js」にして保存

ここでは「sidewinder.js」という名前で保存します

Sidewinder()
メニュー部分を上下に動かす


Scroll()
Sidewinder()に組み込まれ、画面のスクロールを監視する


Contents()
メニュー内に表示される文字列

メニューに項目が増えるごとに「document.write()」の部分を増やしていく。
ただしHTMLではhref=の後ろは「””」だったが、今回の場合は「’’」となるので注意








メニューを表示させるHTMLファイルの作成　〜秘奥義・子守蛇（さいどわいんだー）完成〜







1、<Head>〜</Head>間に次のように書き込む


<SCRIPT language="JavaScript" src="sidewinder.js"></SCRIPT>
<Link Rel="stylesheet" Type="text/css" Href="style.css">


2、<Body>内に次のように書き込む

<Body onLoad="Sidewinder()">

3、<Body>のすぐ後に次のように書き込む


<div id="menu">
<script language="JavaScript">
<!--
Contents()
-->
</script>
</div>


4、メニューを表示させるすべてのhtmlファイルに対して1〜3を記入



<Head>〜</Head>間の最初の行が外部JavaScriptファイルを、
二行目が外部スタイルシートファイルを読み込んでいる。

戻る