分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav

日期：2012-4-21  来源：GBin1.com

在线演示1  在线演示2  本地下载

单 页面设计最近愈来愈流行了，使用单页面的网站简单优雅而且易于维护，你不须要修改不少文件来作平常维护，并且使用超酷的动态滚动方式来展现你的我的网站或 者公司网站，的确是一个很是不错的选择，今天这里咱们将介绍给你们一款很是不错的单页面滚动式导航jQuery插件 - jQuery one page nav，但愿你们可以应用到本身的网站设计和开发中，若是你也喜欢这个插件，请给咱们留言，谢谢！！

主要特性

• 支持jQuery
• 须要scrollTo插件
• 使用简单
• 支持主流浏览器
• 使用简单

如何使用

HTML标签：

<ul id="nav">
  <li class="current"><a href="#section-1">Section 1</a></li>
  <li><a href="#section-2">Section 2</a></li>
  <li"><a href="#section-3">Section 3</a></li>
</ul>

<div id="section-1">
  <strong>Section 1</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-2">
  <strong>Section 2</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-3">
  <strong>Section 3</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua.</p>
</div>

Javascript：

<script src="jquery.js"></script>
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>

将插件应用到导航项目上：

$(document).ready(function() {$('#nav').onePageNav();});

插件主要选项

• currentClass：缺省值'current'，用来定义选定的导航项目的样式
• changeHash：缺省值false，若是你但愿hash变化，那么设定这个选项为true。
• scrollSpeed：缺省值700，定义滚动速度

插件使用很是简单，但愿你们能应该到本身的项目中。

来源：分享一个超棒的jQuery的单页面滚动导航设计插件 - jQuery one page nav