|
|
|
03/16(Sun) 03:08
 スライドインメニュー
スライドイン・アウトを応用したスライドインメニューです。メニューにマウスをのせると、画面からメニューをスライドイン・アウトします。
■設置方法
| 使用するCross-Browser function | changeBG、slideXaxis |
| スタイルシート | ipos (JavaScript組み込み) |
■ヘッダー部に以下の関数を定義します。
あなたのページレイアウトに合わせて変更して下さい。
- xLimit = -125; はメニューのテーブルサイズより30px位(サンプルでは25px)大きく(数値は小さくなります)設定します。30px分のメニュータブが画面に表示されます。
- JavaScript内のスタイルシート
- ・#ipos の top:120px はページ上端からの表示位置になります。
- その他テーブル枠の太さ、色、枠線を重ねて表示を指定しています。
- ・td.txt はメニュー項目の文字色、サイズ、フォント、太字、位置を指定しています。
|
<![CDATA[
<script language=javascript>
<!--
/*--------------------------------------------------------------------
Dynamic HTML cross-browser for NC and IE (2003.12)
by「菊池さん」<http://kikuchisan.net/>
--------------------------------------------------------------------*/
// 背景色
function changeBG(obj,color){
if(document.all) obj.style.backgroundColor=color //IE4,5,6,Opera6用
if(document.getElementById) obj.style.backgroundColor=color //NN6,7用
if(document.layers) obj.bgColor=color //NN4用
}
//レイヤ−X軸移動
function slideXaxis(layName,x){
if(document.all) document.all(layName).style.pixelLeft=x //IE4,5,6,Opera6用
if(document.getElementById) document.getElementById(layName).style.left=x //NN6,7用
if(document.layers) document.layers[layName].left=x //NN4用
}
var timeIDin, timeIDout;
var xLimit = -125; //左端座標初期値
var xStep = 50; //移動量
var xAxis = xLimit;
if(document.all || document.getElementById || document.layers){ //スタイル定義
document.write('<style type="text/css">\n');
document.write('#ipos { position:absolute; top:120px; left:'
+xLimit+'px; border:1px solid black; border-collapse:collapse; }\n');
document.write('td.txt { color:white; font-size:12px; font-family:MS UI Gothic;');
document.write(' font-weight:bold; text-align:center; }\n');
document.write('td.txt a{ color:white; text-decoration:none; }\n');
document.write('td.txt a:hover{ color:black; }\n');
document.write('</style>\n');
}
function slideIn(){
clearTimeout(timeIDout);
if(xAxis < 0){
xAxis += xStep; if(xAxis > 0) xAxis = 0;
slideXaxis("ipos",xAxis)
timeIDin = setTimeout("slideIn()",25);
}
else clearTimeout(timeIDin);
}
function slideOut(){
clearTimeout(timeIDin);
if(xAxis > xLimit){
xAxis -= xStep; if(xAxis < xLimit) xAxis = xLimit;
slideXaxis("ipos",xAxis)
timeIDout = setTimeout("slideOut()",25);
}
else clearTimeout(timeIDout);
}
//-->
</script>
]]>
|
■ボディ部の文末に以下の記述をします。
- メニュー項目をTABLEタグで定義します。テーブルサイズは width="150" で指定した幅150pxになります。
- 「ホーム」の行にある rowspan=6 の 6 は、メニュー項目数です。メニューが10項目あるときはこの「6」を「10」に変更します。
- マウスがあたるとメニュー項目の背景色が「青」から「赤」に、文字色が「白」から「黒」変わります。（NN4.xでは変化しません）
- <a href="home.html">にリンク先を指定すればクリックでリンク先にジャンプします。
|
<![CDATA[
<script language="javascript">
<!--
if(document.all || document.getElementById){ //IE4,5,6,Opera6,NN6,7の場合
document.write('<table id="ipos" width="150" border="1" cellpadding="3"');
document.write(' cellspacing="0" bgcolor="blue" bordercolor="black"');
document.write(' onMouseOver="slideIn()" onMouseOut="slideOut()">');
} else if(document.layers){ //NN4の場合
document.write('<div id="ipos">');
document.write('<layer name="ipos" onMouseOver="slideIn()" onMouseOut="slideOut()">');
document.write('<table width="150" border="1" cellpadding="3"');
document.write(' cellspacing="0" bgcolor="blue">');
}
// -->
</script>
<tr><td class="txt" onMouseOver="changeBG(this,'red')" onMouseOut="changeBG(this,'blue')">
<a href="home.html">ホーム</a></td><td rowspan=6 class="txt">M<br>E<br>N<br>U</td></tr>
<tr><td class="txt" onMouseOver="changeBG(this,'red')" onMouseOut="changeBG(this,'blue')">
<a href="sintyaku.html">新着情報</a></td></tr>
<tr><td class="txt" onMouseOver="changeBG(this,'red')" onMouseOut="changeBG(this,'blue')">
<a href="kousaku.html">ソフト工作室</a></td></tr>
<tr><td class="txt" onMouseOver="changeBG(this,'red')" onMouseOut="changeBG(this,'blue')">
<a href="okozukai.html">お小遣工房</a></td></tr>
<tr><td class="txt" onMouseOver="changeBG(this,'red')" onMouseOut="changeBG(this,'blue')">
<a href="game.html">ゲームセンター</a></td></tr>
<tr><td class="txt" onMouseOver="changeBG(this,'red')" onMouseOut="changeBG(this,'blue')">
<a href="gestbook.html">ゲストブック</a></td></tr>
</table>
<script language="javascript">
<!--
if(document.layers){ document.write('</layer></div>'); } //NN4の場合
// -->
</script>
]]>
|
|
