[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js

複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。

これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。

サイトのキャプチャ

Navi.js
Navi.js -GitHub

Navi.jsの特徴

Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。

  • タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート
  • コンテンツにあったページタイトルを表示
  • 戻る・次へボタンのサポート
  • コンテンツのネストをサポート
  • スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意
  • AJAXサポート
  • Google Analyticsサポート
  • 対応ブラウザはIE9/10、モダンブラウザ

Navi.jsのデモ

デモはIE9+をはじめ、モダンブラウザでご覧ください。

デモのキャプチャ

デモページ

デモは4つのカテゴリがあり、いくつか未のものもあります。
まずは、基本となる複数のページを表示するデモから。

デモのキャプチャ

2 menus different hashes

左右で異なるハッシュを設定したデモ

デモのキャプチャ

2 menus same hash

同じハッシュを設定したデモ

デモのキャプチャ

Nested Content 1

コンテンツをネストで配置したデモ
上のナビ+左サイドバーのナビでも遷移します。

デモのキャプチャ

SlideUp

ページの表示アニメーション:スライドアップ
レフトやアップ・レフトのスライドにも対応しています。

デモのキャプチャ

Fade

スライドだけでなく、フェードでの表示

Navi.jsの使い方

Step 1: 外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。

  <script src="jquery.js"></script>
  <script src="navi-1.8.js"></script>

Step 2: HTML

HTMLの基本構造は、ナビゲーションとコンテンツです。
まずはナビゲーション、リスト要素で実装します。

<nav id='naviMenu'>
  <ul>
    <li class="active"> <a href='#!/page1'>Page1</a> </li>
    <li> <a href='#!/page2'>Page2</a> </li>
    <li> <a href='#!/page3'>Page3</a> </li>
  </ul>
</nav>
[/htmnl]

<p class="mT2em">各コンテンツもページごとにリスト要素で実装します。</p>
[html]
<section id='naviContent'>
  <ul>
    <li id='page1'> Content for page 1 here </li>
    <li id='page2'> Content for page 2 here </li>
    <li id='page3'> Content for page 3 here </li>
  </ul>
</section>

Step 3: JavaScript

ナビゲーションをjQueryのセレクタで指定し、リンクに使用するハッシュとコンテンツのラッパーを指定しスクリプトを実行します。

$("#naviMenu").navi({
  hash: "#!/",
  content: $("#naviContent")
});

スクリプトのオプション

jQuery.navi({
  hash: "#!/", //使用するハッシュ
  content: $("#content"), //コンテンツの指定
  defaultPage: true, //デフォルトのページ
  useAnimation: true, //アニメーションの有無
  animationSpeed: 100, //アニメーションのスピード
  animationType: "slideUp", //アニメーションのエフェクト
  usePageTitle: true, //ページタイトル変更の有無
  defaultPageTitle: "Navi.js", //デフォルトのページタイトル
  useBreadCrumbs: true, // パンくずの有無
  breadCrumbsContent: $("#breadcrumbs"), // パンくずの指定
  useAjax: true, // AJAXの有無
  ajaxExtension: ".html", // AJAXページの拡張子
})

top of page

©2017 coliss