<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,菜单,竖向菜单,导航菜单,浮动菜单,jQuery菜单,JS图片特效,JS广告代码，JS常用代码" />
<meta name="description" content="jQuery+CSS实现的浮动html菜单效果，更多菜单,竖向菜单,导航菜单,浮动菜单,jQuery菜单代码请访问JS代码频道。" />
<title>jQuery+CSS实现的浮动html菜单效果_</title>
<script language="javascript" src="jquery_mini.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript">
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});
});
});
</script>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="page.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color:#000;
height:2000px;
color:#ccc;
font:10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;
}
#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}
a{ color: #FF0099;}
</style>
</head>
<body>
<div id="page-wrap">
<div id="header">
<h2>Floating menu</h2>
<h1>jQuery&CSS</h1>
</div>
<div id="content">
<h1>Live Demo</h1>
<p class="first">The page is longer than it would really need to be to allow you to notice how the menu behave when it crosses content or graphics.</p>
<p>Nulla imperdiet, enim non pellentesque imperdiet, nisl lacus condimentum metus, et gravida erat nisl ac nulla. Aliquam semper eleifend massa. Maecenas et eros. Donec nibh sem, laoreet et, consequat vel, vestibulum sit amet, orci. Curabitur semper bibendum neque. Suspendisse potenti. Cras lacinia diam in orci. Nullam orci lacus, placerat et, gravida at, iaculis sit amet, augue. Morbi faucibus. Morbi bibendum. Donec massa. Vivamus ut purus. Nunc nec urna nec diam rutrum lacinia. Ut eu nunc non enim consectetuer hendrerit. Nullam suscipit molestie enim. Proin et felis. Praesent vestibulum interdum est.</p>
<p>In pulvinar. Aenean at mauris. Maecenas volutpat, leo elementum ultrices laoreet, augue purus euismod arcu, vitae tempor urna lectus vitae nisi. Nam aliquet, pede ac fermentum aliquam, libero mauris elementum tellus, a malesuada arcu diam a eros. Aenean ligula. Nunc pharetra. Donec ultrices ultricies quam. Sed fringilla, mi nec gravida rutrum, tortor erat volutpat odio, pharetra egestas neque purus a est. Sed lobortis purus. Nunc in diam in velit consectetuer pellentesque. Nullam facilisis semper augue. Sed ullamcorper magna nec massa. Sed blandit commodo magna. Sed purus dui, cursus nec, interdum at, ullamcorper at, felis. Etiam tempor porta eros.</p>
<p class="longer">Donec tempor, ante ac iaculis euismod, enim enim vulputate magna, sed vulputate turpis enim vitae mi. Nam elementum rutrum augue. Sed pretium, urna sit amet dictum scelerisque, lectus nunc euismod dui, vitae molestie magna ante ornare augue. Vestibulum non augue dignissim nisl vestibulum adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ultrices leo ultricies nisi. Duis sed nibh. Phasellus in metus a nibh lobortis interdum. In nisi eros, cursus quis, tempor et, pellentesque ut, erat. Vivamus scelerisque nisl eget lectus. Nunc a mi. Nullam ut felis. Nunc convallis, lacus eget facilisis condimentum, ante justo viverra sapien, ac rutrum felis metus in nibh. Fusce bibendum. Curabitur euismod, leo quis blandit feugiat, risus enim tempus elit, eget ultricies odio nisi id purus. Aliquam dapibus hendrerit arcu. Praesent bibendum, turpis sit amet viverra luctus, nulla magna imperdiet leo, et accumsan eros elit eu lacus.</p>
<p>Maecenas facilisis congue libero. Maecenas ac risus. Donec sagittis sodales enim. Nam accumsan feugiat augue. Donec orci elit, elementum vitae, condimentum ut, iaculis a, magna. Vivamus at mauris et augue iaculis auctor. Suspendisse in ligula. Aenean malesuada, eros et porttitor eleifend, lacus nunc feugiat mauris, eu tristique leo mauris at velit. Nulla vulputate purus at dui. Ut porta accumsan mauris. Curabitur sed dolor non augue cursus consectetuer. Fusce felis. Nulla consequat, justo non pretium congue, urna sapien faucibus tortor, tristique faucibus mi metus imperdiet dui. Curabitur venenatis scelerisque purus. Curabitur nisi. Nam vehicula odio in leo convallis tristique. Vestibulum quis massa vel lacus laoreet egestas. Etiam nisi. Aenean non lacus. </p>
</div>
</div>
<div id="floatMenu">
<ul class="menu1">
<li><a href="#" onclick="return false;"> Home </a></li>
</ul>
<ul class="menu2">
<li><a href="#" onclick="return false;"> Table of content </a></li>
<li><a href="#" onclick="return false;"> Exam </a></li>
<li><a href="#" onclick="return false;"> Wiki </a></li>
</ul>
<ul class="menu3">
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>
<div style="text-align:center; clear:both; margin:5px auto">
<p>代码整理：<a href="http://www.jb51.net/" target="_blank">脚本之家</a> 更多相关效果，请到脚本之家 <a href="http://www.jb51.net/jiaoben/guanggao1.html" target="_blank">脚本下载</a>栏目</p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p><a href="http://sc.jb51.net" target="_blank">脚本之家素材中心</a>整理。</p>
<p><script src="/js/js-preview-728x90.js"></script><br /><br /><br /><center><script src="/js/tj.js"></script></center></p>
</div>
</body>
</html>
基于jQuery+CSS实现的浮动html菜单效果分享代码.zip （8个子文件） 
132692087014715455 likecs.com_132692087020140656 images 
content_bg.jpg 12KB
index.html 6KB
page.css 1KB jquery.dimensions.js 3KB jb.bat 217B jquery_mini.js 53KB about.html 2KB index.html.bak 6KB资源评论
