[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems

Post on:2014年12月9日

最近どんどん増えてきた縦長ページ用でデザインの邪魔をせずに、使い勝手を向上させるかっこいいアニメーションを備えたナビゲーションを実装するjQueryのプラグインを紹介します。

サイトのキャプチャ

MenuItems
MenuItems -GitHub

MenuItemsのデモ

デモは4つのメインコンテンツからなる縦長ページで、左右にナビゲーションが設置されています。

デモのキャプチャ

デモページ

右サイドはメインのナビゲーションで、定位置に表示され、各コンテンツが表示されるとアニメーションでラベルがスライドします。

デモのアニメーション

デモ：右（メインコンテンツ用）のアニメーションgif

左サイドはサブコンテンツ用、その範囲を移動しながら表示されます。

デモのキャプチャ

デモ：左（サブコンテンツ用）

アニメーションgifにしたら画像サイズがすごかったので、デモページで確かめてください。

スマホなどの小さいスクリーンではハンバーガーアイコンが表示され、ナビゲーションがスライド表示されます。

デモのキャプチャ

通常時はハンバーガーアイコン。

デモのキャプチャ

タップするとナビゲーションがスライド。

MenuItemsの使い方

Step 1: 外部ファイル

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

<head>
  ...
  <link rel="stylesheet" href="menuitems/menuitems.min.css" />
</head>
<body>
  ...
  コンテンツ
  ...
  <script src="jquery.min.js"></script>
  <script src="menuitems/menuitems.min.js"></script>
</body>

Step 2: HTML

各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。

<body>
    <section|div class="menuItem" data-mi-title="First Content">
      <div class="content">
        My Content!
      </div>
    </section|div>
    <section|div class="menuItem" data-mi-title="Second Content">
      <div class="content">
        My Content Too!
      </div>
    </section|div>
</body>

Step 3: JavaScript

適用する範囲をjQueryのセレクタで指定し、スクリプトを実行します。

<script>
$(document).ready(function(){
  $('body').menuItems({});
});
</script>

sponsors

top of page

©2024 coliss