[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu
Post on:2015年5月29日
sponsors
縦長ページにナビゲーション機能とスクロール機能を融合させた、実用性とデザイン性を兼ね備えたスクロールメニューを実装できるjQueryのプラグインを紹介します。
細かいとこまで配慮が行き届いた設計に、よく考えられてる！と思いました。
「ScrollMenu」は、スクロールバーの「バー」が「メニュー」として機能する感じです。
ScrollMenuのデモ
デモでは縦長ページで、そのページがどのくらいの長さなのか、セクションがいくつあるのか、今どこにいるのか、といった実用的な機能だけでなく、メニューのデザインやインタラクションを楽しむことができます。
ページ左に配置されたスクロールメニューは、ページ内のセクションに応じてナビゲーションとして機能します。このメニュー自体をスクロールすることも可能で、もちろん通常のスクロール操作、ブラウザデフォルトのスクロールバーを表示させることも可能です。
各メニューは、カスタマイズも可能
垂直のほかに、水平のメニュー、ヘッダ兼メニューなど、さまざまなタイプが簡単に実装できます。
各アイテムをホバーすると、垂直方向に広がります。
各アイテムにさまざまなエフェクトが仕込まれています。
ブラウザのデフォルトのスクロールバーを併用することも可能です。
ScrollMenuの使い方
Step 1: 外部ファイル
当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。
<head>
...
<link rel="stylesheet" type="text/css" href="scrollmenu.css">
</head>
<body>
...
コンテンツ
...
<script src="jquery.js"></script>
<script src="scrollmenu.js"></script>
</body>
Step 2: HTML
各コンテンツは、section要素で実装します。
<section class="section" id="section1"> <div class="content">Section 1</div> </section> <section class="section" id="section2"> <div class="content">Section 2</div> </section> <section class="section" id="section3"> <div class="content">Section 3</div> </section>
Step 3: JavaScript
メニューのHTMLと各メニューの背景やラベルを指定し、スクリプトを実行します。
<script>
//base setup
var setupOption = {
template: '<div class="menu-wrap"><div class="menu"><%= label %></div></div>',
anchorSetup: [
{
backgroundColor: "#dc767d",
label: "Section 1"
},
{
backgroundColor: "#36d278",
label: "Section 2"
},
{
backgroundColor: "#22cfc6",
label: "Section 3"
}]
};
var scrollMenu = ScrollMenu(setupOption);
</script>
オプションでは、ブラウザのスクロールバーを表示、スペースなどを設定できます。
scrollbarVisible : true, scrollAnchorSpacing : 0,
sponsors
