|
|
03/16(Sun) 01:45
スライドインメニュー
スライドイン・アウトを応用したスライドインメニューです。メニューにマウスをのせると、画面からメニューをスライドイン・アウトします。
■設置方法
使用するCross-Browser function | changeBG、slideXaxis |
スタイルシート | ipos (JavaScript組み込み) |
■ヘッダー部に以下の関数を定義します。
あなたのページレイアウトに合わせて変更して下さい。
- xLimit = -125; はメニューのテーブルサイズより30px位(サンプルでは25px)大きく(数値は小さくなります)設定します。30px分のメニュータブが画面に表示されます。
- JavaScript内のスタイルシート
- ・#ipos の top:120px はページ上端からの表示位置になります。
- その他テーブル枠の太さ、色、枠線を重ねて表示を指定しています。
- ・td.txt はメニュー項目の文字色、サイズ、フォント、太字、位置を指定しています。
■ボディ部の文末に以下の記述をします。
- メニュー項目をTABLEタグで定義します。テーブルサイズは width="150" で指定した幅150pxになります。
- 「ホーム」の行にある rowspan=6 の 6 は、メニュー項目数です。メニューが10項目あるときはこの「6」を「10」に変更します。
- マウスがあたるとメニュー項目の背景色が「青」から「赤」に、文字色が「白」から「黒」変わります。(NN4.xでは変化しません)
- <a href="home.html">にリンク先を指定すればクリックでリンク先にジャンプします。
|