导航定位功能

最新推荐文章于 2024-09-06 22:20:29 发布

qq_42633296

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量154

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_42633296/article/details/85684779

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网友分享jQuery导航菜单悬浮置顶特效</title>
<style type="text/css">

 *{ margin:0; padding:0;}

 body{ background:#eee; text-shadow:0px 1px 0px rgba(255,255,255,0.60); color:#333;}

 a{color:#fff; text-decoration:none;}

 #header{display:block; height:200px; background:#7fcddd; line-height:100px; text-align:center; color:#fff; font-size:16px;text-shadow:0px -1px 0px rgba(30,30,30,0.60);}

 #header h3{font-size:50px; font-weight:600;height:120px; line-height:120px;}

 #header h4{ font-size:18px; font-weight:600; height:80px; line-height:80px;}

 #box{ width:980px; margin:60px auto; height:2600px; background:#eee;}

 #mynav{ width:100%; height:40px; background:#2093e0; border-bottom:1px solid #fff; position:relative; z-index:99; color:#fff; line-height:40px;}

 #mynav ul{width:1000px; padding:0; margin:0 auto; list-style-type:none;}

 #mynav ul li{ float:left; margin：0px 5px; border-right:1px solid #fff;}

 #mynav ul li a{ display:block; padding:0px 20px; height:40px; line-height:40px; color:#fff; text-shadow:0px -1px 0px rgba(30,30,30,0.60);}

</style>
</head>
<body>
<div id="header">
<h3>置顶导航菜单,随滚动条浮动定位菜单,固定菜单到顶部</h3>
</div>
<div id="mynav">
<ul>
<li><a href="#">JS代码网</a></li>
<li><a href="#/">开源框架</a></li>
<li><a href="#">jQuery教程</a></li>
<li><a href="#/">JS代码大全</a></li>
<li><a href="#">资源工具</a></li>
<li><a href="#/">用户体验</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#/">CSS3</a></li>
<li><a href="#/">开发手册</a></li>
</ul>
</div>
<div id="box">
<p>使用方式：</p>
$(document).ready(function(e) { <br />
&nbsp;&nbsp;$('#mynav').navfix(0,999); <br />
});<br />
//第一个值： 你期望导航在距离顶部多少的位置浮动<br />
//第二个值： 导航zindex<br />
</div>
<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="js/navfix.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {

 $('#mynav').navfix(0,999);    
 
});

//第一个值： 你期望导航在距离顶部多少的位置浮动

//第二个值： 导航zindex

</script>
</body>
</html>

qq_42633296

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航定位功能

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;网友分享jQuery导航菜单悬浮置顶特效&lt;/title&gt;&lt;style type="text/css"&gt; *{ margin:0; padding:0;
复制链接

扫一扫