[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems
Post on:2014年12月9日
sponsorsr
最近どんどん増えてきた縦長ページ用でデザインの邪魔をせずに、使い勝手を向上させるかっこいいアニメーションを備えたナビゲーションを実装するjQueryのプラグインを紹介します。
MenuItemsのデモ
デモは4つのメインコンテンツからなる縦長ページで、左右にナビゲーションが設置されています。
右サイドはメインのナビゲーションで、定位置に表示され、各コンテンツが表示されるとアニメーションでラベルがスライドします。
デモ：右（メインコンテンツ用）のアニメーションgif
左サイドはサブコンテンツ用、その範囲を移動しながら表示されます。
デモ：左（サブコンテンツ用）
アニメーションgifにしたら画像サイズがすごかったので、デモページで確かめてください。
スマホなどの小さいスクリーンではハンバーガーアイコンが表示され、ナビゲーションがスライド表示されます。
通常時はハンバーガーアイコン。
タップするとナビゲーションがスライド。
MenuItemsの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。
[html]
...
...
コンテンツ
...
[/html]
Step 2: HTML
各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。
[html]
My Content!
My Content Too!
[/html]
Step 3: JavaScript
適用する範囲をjQueryのセレクタで指定し、スクリプトを実行します。
[javascript]
[/javascript]
sponsors
