Flexible Nav 實際執行頁面

Flexible Nav 可用於網頁右側增加智能導航標籤，類似網頁書籤或者是檔案目錄的功能，對於比較內容比較多的頁面有導航的作用，增加網站適用者體驗。靈活的使用 jQuery 框架，它改善了網頁的導航和可視化的文件的不同部分，文章，..任何網頁。導航鏈接，按比例分配到頁面的部分。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用 Google AJAX API 取得 jQuery 1.7.2 的 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//接下來載入 Flexible Nav 的主程式碼
<script type="text/javascript" src="flexible-nav.min.js"></script>
//頁面的CSS 設計
<link rel="stylesheet" media="all" href="flexible-nav.min.css" />
//此範例的 CSS 設計
<link rel="stylesheet" media="all" href="docco.css" />

接下來在網頁設計上你需要加一些
H1 , H2 或 H3 的標籤才能讓程式搜尋並建立書籤導航
例如:
<p><strong>This page is a 3-in-one document!</strong></p>
<ul>
<li>First, it explains goals and possible usages of the library.</li>
<li>Second, it presents <strong>a library usage</strong>
<em>(see this flexible box right panel?)</em>.</li>
<li>Third, it shows the <strong>annotated JS code</strong> <em>(thanks to docco)</em></li>
</ul>
<h2>Download</h2>
<p>You can also use it in your websites.</p>
<p><a class="download" target="_blank" href="https://github.com/gre/flexible-nav">Download or fork me on github</a></p>
<h2>Usages</h2>
<h4>Generation and Flexibility</h4>
<p>The library can generate for you the nav sidebar content
providing elements to display in navigation.</p>
像這樣的範例就會出現 Download 和 Usages 兩個導航的標籤了

當然最後還是要加上 JavaScript 的啟動程式碼
$(function(){
     //網頁載入完成後建立元件
     new FlexibleNav( new FlexibleNavMaker().make().prependTo('body') );
});

作者網站：http://demo.greweb.fr/flexible-nav/
檔案大小：45.4 KB(包含範例)
檔案下載：https://github.com/gre/flexible-nav
檔案備份：下載