侧栏能够定位的导航菜单代码实例
分类:实例代码
本章节分享一段代码实例,它实现了侧栏能够跟随定位的导航菜单效果。
不知道怎么描述这个导航的功能,直接看代码:
<!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>
侧栏能够定位的导航菜单代码实例,这样的场景在实际项目中还是用的比较多的,关于侧栏能够定位的导航菜单代码实例就介绍到这了。
侧栏能够定位的导航菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看。