侧栏能够定位的导航菜单代码实例

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了侧栏能够跟随定位的导航菜单效果。

不知道怎么描述这个导航的功能,直接看代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
div#ksLeftNav {
position: fixed;
width: 220px;
float: left;
top: 0;
font-size: 14px;
}
div#ksLeftNav * {
margin: 0;
padding: 0;
}
div#ksLeftNav div#nav-con {
position: relative;
}
div#ksLeftNav div#nav-con ul.nav {
margin: 15px;
position: relative;
z-index: 2;
}
div#ksLeftNav div#nav-con ul.nav li {
list-style: none;
}
div#ksLeftNav div#nav-con ul.nav li a.nav-title {
display: inline-block;
text-decoration: none;
color: #333;
height: 36px;
line-height: 36px;
padding-left: 26px;
font-weight: bold;
}
div#ksLeftNav div#nav-con ul.nav li a.nav-title.active {
color: #00bfe9;
}
div#ksLeftNav div#nav-con div.nav-detail {
}
div#ksLeftNav div#nav-con div.nav-detail a {
display: block;
color: #666;
padding: 5px 15px 5px 40px;
text-decoration: none;
}
div#ksLeftNav div#nav-con div.nav-detail a.active {
color: #00bfe9;
}
div#ksLeftNav div#nav-con div.nav-detail a:hover {
text-decoration: none;
}
div#ksLeftNav div#nav-con div.line {
position: absolute;
top: 0;
left: 23px;
height: 100%;
width: 1px;
border-left: 1px solid #ccc;
}
div#ksLeftNav div#nav-con div.circle-top {
position: absolute;
top: -17px;
left: 17px;
}
div#ksLeftNav div#nav-con div.circle-bottom {
position: absolute;
bottom: -17px;
left: 17px;
}
div.right-con {
margin-left: 220px;
}
div.right-con div.item {
padding: 15px;
}
div.right-con div.item h5 {
font-size: 30px;
}
div.right-con div.item p {
padding: 15px 0;
line-height: 25px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var scrollTagEvent = (function() {
$(function(){
var arr = [];
init();
function init() {
$('div#ksLeftNav a.nav-title').each(function(){
arr.push(parseInt($($(this).attr("href")).offset().top));
});
$(document).on('click', 'div#ksLeftNav a', function (e) {
e.preventDefault();
unbindScroll();
$('div#ksLeftNav a').removeClass('active');
if ($(this).parent().hasClass('nav-detail')) {
$(this).addClass('active').parent().siblings('a').addClass('active');
} else {
$(this).addClass('active');
}
$("html,body").animate({
scrollTop: $($(this).attr("href")).offset().top
}, 1000, function () {
bindScroll();
});
});
$('div#ksLeftNav a.nav-title').first().trigger('click');
}
function bindScroll() {
$(window).on('scroll.tag', function (e) {
var scrollT = $(this).scrollTop();
for (var index = 0; index < arr.length; index++) {
if (scrollT >= arr[index]) {
$('a.active').removeClass('active');
$('div#ksLeftNav a.nav-title:eq(' + index + ')').addClass('active');
}
}
});
}
function unbindScroll() {
$(window).off('scroll.tag');
}
});
})();
</script>
</head>
<body>
<div id="ksLeftNav">
<div id="nav-con">
<div class="line"></div>
<ul class="nav" id="list">
<li>
<a href="#item1" class="nav-title">1 发展简史</a>
<div class="nav-detail">
<a href="#item11">1.1 UGC时期</a>
<a href="#item12">1.2 平台化</a>
</div>
</li>
<li>
<a href="#item2" class="nav-title">2 产品功能</a>
<div class="nav-detail">
<a href="#item21">2.1 基础功能</a>
<a href="#item22">2.2 特色功能</a>
<a href="#item23">2.3 用户功能</a>
</div>
</li>
<li>
<a href="#item3" class="nav-title">3 用户体系</a>
<div class="nav-detail">
<a href="#item31">3.1 积分体系</a>
<a href="#item32">3.2 用户团队</a>
</div>
</li>
<li>
<a href="#item4" class="nav-title">4 外界评价</a>
</li>
</ul>
</div>
</div>
<div class="right-con">
<div class="item" id="item1">
<h5>发展简史</h5>
<div id="item11">
<h3>UGC时期</h3>
<p>犀牛前端部落欢迎您。</p>
<p>只有努力奋斗才会有美好未来。</p>
<p>没有人一开始就是高手,必须要通过自己的努力。</p>
<p>每一天都是新的,要好好的把握。</p>
</div>
<div id="item12">
<h3>平台化</h3>
<p>没有人一开始就是高手,必须要通过自己的努力。</p>
<p>本站的url地址是pipipi.net。</p>
</div>
</div>
<div class="item" id="item2">
<h5>产品功能</h5>
<div id="item21">
<h3>基础功能</h3>
<p>没有人一开始就是高手,必须要通过自己的努力。</p>
<p>每一天都是新的,要好好的把握。</p>      </div>
<div id="item22">
<h3>特色功能</h3>
<p>没有人一开始就是高手,必须要通过自己的努力。</p>
<p>每一天都是新的,要好好的把握。</p>      </div>
<div id="item23">
<h3>用户功能</h3>
<p>没有人一开始就是高手,必须要通过自己的努力。</p>
<p>每一天都是新的,要好好的把握。</p>      </div>
</div>
<div class="item" id="item3">
<h5>用户体系</h5>
<div id="item31">
<h3>积分体系</h3>
<p>没有人一开始就是高手,必须要通过自己的努力。</p>
<p>每一天都是新的,要好好的把握。</p>      </div>
<div id="item32">
<h3>用户团队</h3>
<p>没有人一开始就是高手,必须要通过自己的努力。</p>
<p>每一天都是新的,要好好的把握。</p>      </div>
</div>
<div class="item" id="item4">
<h5>外界评价</h5>
<p>没有人一开始就是高手,必须要通过自己的努力。</p>
<p>每一天都是新的,要好好的把握。</p>    </div>
</div>
</body>
</html>

侧栏能够定位的导航菜单代码实例,这样的场景在实际项目中还是用的比较多的,关于侧栏能够定位的导航菜单代码实例就介绍到这了。

侧栏能够定位的导航菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容