[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu

縦長ページにナビゲーション機能とスクロール機能を融合させた、実用性とデザイン性を兼ね備えたスクロールメニューを実装できるjQueryのプラグインを紹介します。

細かいとこまで配慮が行き届いた設計に、よく考えられてる!と思いました。
「ScrollMenu」は、スクロールバーの「バー」が「メニュー」として機能する感じです。

サイトのキャプチャ

ScrollMenu
ScrollMenu -GitHub

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

top of page

©2018 coliss