スクロールメニュー
スクロール（スライド）するメニューです。
スクロールするノーマルメニューが欲しいとリクエストがあり作りました。
特徴
ブラウザをスクロールするとメニューが移動する為、何時でもメニューにアクセスする事が出来ます。
あなたのお好きなようにカスタマイズしてください。
サンプル＆ダウンロード
設置方法
ダウンロードしてご覧下さい。
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日 公開