[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu
Post on:2015年5月29日
sponsorsr
縦長ページにナビゲーション機能とスクロール機能を融合させた、実用性とデザイン性を兼ね備えたスクロールメニューを実装できるjQueryのプラグインを紹介します。
細かいとこまで配慮が行き届いた設計に、よく考えられてる！と思いました。
「ScrollMenu」は、スクロールバーの「バー」が「メニュー」として機能する感じです。
ScrollMenuのデモ
デモでは縦長ページで、そのページがどのくらいの長さなのか、セクションがいくつあるのか、今どこにいるのか、といった実用的な機能だけでなく、メニューのデザインやインタラクションを楽しむことができます。
ページ左に配置されたスクロールメニューは、ページ内のセクションに応じてナビゲーションとして機能します。このメニュー自体をスクロールすることも可能で、もちろん通常のスクロール操作、ブラウザデフォルトのスクロールバーを表示させることも可能です。
各メニューは、カスタマイズも可能
垂直のほかに、水平のメニュー、ヘッダ兼メニューなど、さまざまなタイプが簡単に実装できます。
各アイテムをホバーすると、垂直方向に広がります。
各アイテムにさまざまなエフェクトが仕込まれています。
ブラウザのデフォルトのスクロールバーを併用することも可能です。
ScrollMenuの使い方
Step 1: 外部ファイル
当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。
[html]
...
...
コンテンツ
...
[/html]
Step 2: HTML
各コンテンツは、section要素で実装します。
[html]
[/html]
Step 3: JavaScript
メニューのHTMLと各メニューの背景やラベルを指定し、スクリプトを実行します。
[javascript]
[/javascript]
オプションでは、ブラウザのスクロールバーを表示、スペースなどを設定できます。
[javascript]
scrollbarVisible : true,
scrollAnchorSpacing : 0,
[/javascript]
sponsors
