
1ページサイト用のナビゲーション機能を補助する「jQuery One Page Navigation Plugin」
2013年4月5日jQueryプラグイン活用
1ページ完結のサイトを作る際、現在見ている要素と応じてナビゲーションにcurrentをつけたりすることが可能なプラグインです。
更にjquery.easing等のプラグインを利用することで要素の間をスムーズに移動させることも可能です。
JavaScript
(function($){ $(function() { $('.nav').onePageNav(); }); })(jQuery);
HTML
<nav class="nav"> <span class="current"><a href="#section01">section01</a></span> <span><a href="#section02">section02</a></span> <span><a href="#section03">section03</a></span> </nav> <div id="contents"> <section id="section01" class="section"> <h2>section01</h2> </section> <section id="section02" class="section"> <h2>section02</h2> </section> <section id="section03" class="section"> <h2>section03</h2> </section> </div>