
この付いてくるメニューを敬遠してたのですが、
よく考えると、これってかなりユーザービリティがいいのではないかなと思って、
今後、積極的に使って生きたいと思っている今日この頃
導入方法
まず、
jquery.jsとjquery.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













