これもPuki Wiki 1.4.7のメニューを見やすくするために設置しました
jQuery scrollFollow フローティングメニュー(エレベーターメニュー)です。

JQUERY SCROLL FOLLOW 設置

jQuery scrollFollowから「Open Source jQuery Plugin Current Version: 0.4.0」をダウンロード
jQuery UIから「jQuery UI 1.7.*」をダウンロード
jQueryはGoogleAPIから呼び出しています
ヴァージョンによっては動作しません 1.6系以降はダメっぽい
(view older versions)をクリックして古いヴァージョンを呼び出してください
サンプル

サイトに呼び出しタグ等貼り付ける

ヘッダーに
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.4");</script>
<script type="text/javascript" src="skin/js/ui.core.js"></script>
<script type="text/javascript" src="skin/js/jquery.scrollfollow.js"></script>
<script type="text/javascript">
$( function ()
{
  $( '#gomenu' ).scrollFollow();
}
);
</script>

フッター等(どこでもOK?)メニュー設置
</body>直前とかに
<div id="gomenu">
<ul>
<li><a href="">MENU</a></li>
<li><a href="">めにゅ~</a></li>
<li><a href="">MENU</a></li>
<li><a href="">めにゅ~</a></li>
<li><a href="">MENU</a></li>
<li><a href="">めにゅ~</a></li>
<li><a href="">MENU</a></li>
</ul>
</div>

スタイルシート
#gomenu {
	position : absolute;
	right : 20px;
	top : 20px;
	width : 120px;
	margin : 0px;
	padding : 0px;
	background : #fff;
	border:  1px solid #C3C6FF;
}
#gomenu ul {
	list-style: none;
}

これで完了です。
 *メニューに日本語を使用した場合文字化けする事があります
 ページファイルの保存時にサイト文字コードと同じ物で保存してください UTF-8など

2011/12/24 jQuery
2012/01/08
Comments(0)
関連記事