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

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

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

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

<!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>

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

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

回复

我来回复
  • 暂无回复内容