NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

1ページサイト用のナビゲーション機能を補助する「jQuery One Page Navigation Plugin」

2013年4月5日jQueryプラグイン活用

1ページサイト用のナビゲーション機能を補助する「jQuery One Page Navigation Plugin」

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>

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 1ページサイト用のナビゲーション機能を補助する「jQuery One Page Navigation Plugin」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com