追いかけてくるメニュー Live Floating Menu

この付いてくるメニューを敬遠してたのですが、
よく考えると、これってかなりユーザービリティがいいのではないかなと思って、
今後、積極的に使って生きたいと思っている今日この頃

導入方法

まず、
jquery.jsjquery.dimensions.jsをダウンロードします。

Live Floating Menuのサイトのソースから下をコピーしlivefloatingmenu.jsと保存する。

var name = "#floatMenu";
var menuYloc = null;
	$(document).ready(function(){
		menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
		$(window).scroll(function () { 
			offset = menuYloc+$(document).scrollTop()+"px";
			$(name).animate({top:offset},{duration:500,queue:false});
		});
	}); 

HTML【headタグ】

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/livefloatingmenu.js"></script>

HTML【メニュー】

<div id="floatMenu">
<ul>
<li><a href="#">メニュー01</a></li>
<li><a href="#">メニュー02</a></li>
<li><a href="#">メニュー03</a></li>
<li><a href="#">メニュー04</a></li>
<li><a href="#">メニュー05</a></li>
<li><a href="#">メニュー06</a></li>
<li><a href="#">メニュー07</a></li>
</ul>
</div>

スタイルシート

#floatMenu {
	position:relative;
	top : 0px;
}
#floatMenu ul {
	line-height:normal;
	padding: 0px;
	width: 140px;
	margin: 0px 0px 0px 10px;
	list-style:none;
}
#floatMenu ul li {
	line-height:0;
	padding: 0px;
	margin: 0px 0px 1px 0px;
}
#floatMenu ul li a {
	width: 140px;
	line-height:normal;
	padding: 3px 3px 3px 10px;
	background-color: #375D81;
	color:#FFFFFF;
	display:block;
	margin: 0px 0px 1px 0px;
}
#floatMenu ul li a:hover {
	background-color: #C4D7ED;
	color:#FFFFFF;
	display:block;
	margin: 0px 0px 2px 0px;
}

コメント投稿

トラックバック

トラックバックURL

1981年12月23日 男
東京都中野区在住

rediomanってサイトの由来は・・・

自己紹介の続きこちら ≫


このページの先頭へ