スクロールメニュー
スクロール(スライド)するメニューです。
スクロールするノーマルメニューが欲しいとリクエストがあり作りました。
特徴
ブラウザをスクロールするとメニューが移動する為、何時でもメニューにアクセスする事が出来ます。
あなたのお好きなようにカスタマイズしてください。
サンプル&ダウンロード
設置方法
ダウンロードしてご覧下さい。
HTMLヘッダに以下を記述します。
スタイルシート(IE6.0以下用含む)の記述、
wrapscroll.jsファイルのロード、wrapscrollオブジェクトの作成
wrapscroll.jsファイルのロード、wrapscrollオブジェクトの作成
<link rel="index" href="./index.html" /> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_ie6.css" /> <![endif]--> <script type="text/javascript" src="wrapscroll.js"></script> <script type="text/javascript"><!-- //wrapScroll var mov = new wrapScroll('menubox','wrapper','counter'); //上からのマージンを指定(px) mov.marginTop = 10; //--></script>
メニューのHTMLを記述します。
メニューを記述してください。
<div id="menubox"> <ul> <li><a href="http://sawa-s.com/">HOME</a></li> <li><a href="#">MENU 1</a></li> <li><a href="#">MENU 2</a></li> <li><a href="#">MENU 3</a></li> <li><a href="#">MENU 4</a></li> <li><a href="#">MENU 5</a></li> <li><a href="#">MENU 6</a></li> </ul> <!-- / #menubox --></div>
StyleSheetです。
IE7.0 Firefox2.0 など サンプルでは角丸透過PNGを使用しています。
/*▼ wrapScroll ナビゲーションメニュー用▼ */ /*▼ メニューブロック ▼*/ #menubox { position: relative; width: 190px; /* メニューの横幅+10 */ height: 280px; /* (メニューの高さ+メニューとメニューの間隔)×メニュー項目数 */ margin: 0 5px; padding:20px 0 10px 0; /* 15px:上部余白 5px:下部余白(15-メニュー間隔) */ font-size: 12px; background: url(image/bg_menubox.png) no-repeat; /* 190 x 310(280 + 上部余白 + 下部余白)pxの角丸透過PNGファイルを指定 */ } #menubox ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 5px; } #menubox ul li{ margin-bottom:10px; /* メニューとメニューの間隔 */ } #menubox ul li a{ display: block; width: 180px; /* メニューの横幅 */ height: 30px; /* メニューの高さ */ margin: 0 5px; color: #FFF; background: url(image/bg_menu.png) no-repeat; padding: 0; font-size: 16px; font-weight: bold; text-decoration: none; line-height:30px; /* メニューの高さ(縦位置のセンタリング) */ text-indent:1.5em; } #menubox ul li a:visited{ color: #FFF; } #menubox ul li a:hover{ color: #FFF; background: url(image/bg_menu.png) no-repeat 0 -30px; } /*▲ ナビゲーションメニュー 終了▲ */
IE6.0以下用 サンプルでは角丸透過GIFを使用しています。
#menubox { background: url(image/bg_menubox.gif) no-repeat; /* IE6.0以下用 190 x 310(280 + 上部余白 + 下部余白)pxの角丸透過GIFファイルを指定 */ }
参考サイト
動作確認
Win/IE7.0 Firefox2.0 Safari3.1 で動作確認しています。
ライセンス
wrapScroll:個人利用(非営利)の場合無償でご利用いただけます。
その他の場合はwrapScroll JavaScript Library - youmosのライセンスをご覧下さい。
このスクロールメニューを利用した方は、使用報告掲示板に利用報告、Sawa's Factoryへのリンクを張って頂けると幸いです。
カスタマイズ
有償にてカスタマイズもお受けいたします。
お問い合わせから詳しいカスタマイズ方法など送信してください。
更新履歴
2008年3月20日 公開