本日  昨日
 
03/16(Sun) 01:45

o スライドインメニュー
スライドイン・アウトを応用したスライドインメニューです。メニューにマウスをのせると、画面からメニューをスライドイン・アウトします。

設置方法
使用するCross-Browser functionchangeBG、slideXaxis
スタイルシートipos (JavaScript組み込み)

ヘッダー部に以下の関数を定義します。
あなたのページレイアウトに合わせて変更して下さい。

  1. xLimit = -125; はメニューのテーブルサイズより30px位(サンプルでは25px)大きく(数値は小さくなります)設定します。30px分のメニュータブが画面に表示されます。
  2. JavaScript内のスタイルシート
    ・#ipos の top:120px はページ上端からの表示位置になります。
     その他テーブル枠の太さ、色、枠線を重ねて表示を指定しています。
    ・td.txt はメニュー項目の文字色、サイズ、フォント、太字、位置を指定しています。
<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>


ボディ部の文末に以下の記述をします。
  1. メニュー項目をTABLEタグで定義します。テーブルサイズは width="150" で指定した幅150pxになります。
  2. 「ホーム」の行にある rowspan=6 6 は、メニュー項目数です。メニューが10項目あるときはこの「6」を「10」に変更します。
  3. マウスがあたるとメニュー項目の背景色が「青」から「赤」に、文字色が「白」から「黒」変わります。(NN4.xでは変化しません)
  4. <a href="home.html">にリンク先を指定すればクリックでリンク先にジャンプします。
<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>
ホームM
E
N
U
新着情報
ソフト工作室
お小遣工房
ゲストブック

   
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ