分享一個超棒的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