This guide will help you get the Scrollshow module installed and configured.

Step 1: Install the Scrollshow module

First, you must install the Scrollshow module in the normal Drupal way.

Step 2: Create Content

Scrollshow will work with any Drupal node content. In this example, we will simply create nodes using the built-in page content type:

  1. Go to Create Content -> Page (node/add/page) on your Drupal Site.
  2. Give this content a title of your choosing (e.g. "Test 1")
  3. Give this content a body of your choosing (e.g. "Today is a great day to use Drupal!")
  4. Click the Save button at the bottom of the page.
  5. Give this content a title of your choosing (e.g. "Test 2")
  6. Give this content a body of your choosing (e.g. "Tomorrow will be an even better day to use Drupal!")
  7. Click the Save button at the bottom of the page.

Step 3: Add Your Content to a Drupal Menu

Scrollshow will work with any Drupal menu. In this example, we will simply add our pages to the built-in Main Menu:

  1. Go to: Administration -> Structure -> Menus
  2. Add your first page to the Main Menu by clicking "add link" ( /admin/structure/menu/manage/main-menu/add )
  3. Give your link a Title and use the path of your Page (e.g. /content/test-1)
  4. Give your link an optional description (for mouse hover and SEO) and click Save.
  5. Add your second page to the Main Menu by clicking "add link" ( /admin/structure/menu/manage/main-menu/add )
  6. Give your link a Title and use the path of your Page (e.g. /content/test-2)
  7. Give your link an optional description (for mouse hover and SEO) and click Save.

Step 4: Test Your Scrollshow!

  1. Note: You will want to disable any "admin" menu modules (e.g. navbar, toolbar, etc.) on your website or logout of admin. Currently, the Admin module is the only compatible one. The reason for this is that your Scrollshow menu will be obscured at the top of the page by most of the various "admin" menus. There is an open issue to fix this: #2182175: Add padding for admin_menu
  2. To test out our set-up of the Scrollshow, go to /scrollshow/main-menu on your website!

Advanced Features of Scrollshow

You can access the advanced features for your Scrollshow by going to the menu admin for your particular menu (e.g. /admin/structure/menu/manage/navigation/edit)

Some of the advanced features are:

Smoothscroll easing function
The easing function for the scrolling animation used when the user clicks on an item in the menu.
Smoothscroll duration
The length of the scroll animation in milliseconds
Slide position
Where on the screen to place the slide from 0-100. 0 is the top of the slide, 50 is the middle and 100 is the bottom.
Slide spacing
The number "screen heights" to place between each slide. Can be fractional, for example: 0.5, 1.5, etc.
Fallback text
The message shown to users, letting them fallback on a non-Javascript view. !url will be replaced with the URL.

Finally, there are effects plug-ins that can be enabled with the appropriate libraries installed. The current stock plug-ins are:

Intended Use

The intended use of this module is to create a page that has one or more "Scrollshow pages". One use of this could be to create a single page website by setting your Scrollshow menu page to your "<front>" page.