Vasyl Yaremchuk

Anchors Panels Navigation Module as an Excellent Alternative to Single Page Website Module

June 19th, 2015

Background

Several years ago I was working on my personal Web site. Even in that time One Page solutions were very popular for some presentation, personal or CV pages.

The main idea of such approach to put all information on one long page with several link anchors corresponding some separate sub-sections of this page.

In 2011 Single Page Website module was created. Initially my home page was done on the base of this module.

Single Page Website module is good out of box solution for Drupal beginners but it has a lot of weak points connected with it's architectural solution. Some more information about this module you can see in my report on Kiev Drupal Camp 2011.

Frustration due to Single Page Website module

It was my fault to build single page on the base of my custom solution without some prepared and ready to use approaches (Views or Panels for example) that can put several nodes or other content entities together on one page. And according incorrect architecture Single Page Website module has a lot of restrictions. The most significant one is theme restriction. Module works with limited number of themes. Also on the module there is out of box ability to have only one page with anchor navigation from menu.

So we should have only one language One Page Website. And the last frustrated feature of the module we should have anchors links in menu only without links to some internal or external pages.

New Approach based on Panels

I'm start working on the other solution about one year ago, see my post Anchors Panels Navigation Module. And now I have some stable version of Anchors Panels Navigation Module with no theme restriction and with manual anchor name management.

Of course, new approach is Panel based and it require several modules to be installed. Also to set One page website driven on Anchors Panels Navigation module takes more time than on the base Of Single Page Website one. But this solution more flexible. You can use several menus, and links in blocks and content for one page navigation. Also you can use this module to set on your site several Landing Pages and the number of such pages is not limited!

If you would like to set Landing Page solution on the base of Anchors Panels Navigation module you should do a lot of manual work in Drupal admin area.

  1. In addition to setup this module you should create node with type Panel and put several pieces of content in the panes.
  2. Set CSS IDs to each pane that should have #anchors. The name of #anchors will be equal to the names of CSS IDs.
  3. To set links in menu with #hashes. You can use absolute links to your site (like I use on my personal site) or use Void Menu Module (I think it is overkill approach).
  4. To make this menu fixed in the browser window. You can use Code per Node module or Floating Block module or, of course, put required CSS code directly in your theme.

After this steps Anchors Panels Navigation module module will take care about scroll to you anchors when visitors will click to the links and about #hash changing in browser address string. By the fact this new approach less complex than Single Page Website module. It has less PHP and JS code and cause less problems to the site developers I hope :-)

What will be the next step?

After one year of developing and using this module I find out that "Anchors Panels Navigation" is not good name for this module according marketing view. It reflects some architectural semantic core of the module but there is no any ideas about module applying in the name of the module. So I would like to ask Drupal community about better name for this module.

Other solutions

It is fair to mention some other solutions belong to the other developers.

There is Drupal Distribution One Page CV created by Ukrainian Drupal Developer Artem Shymko.

There is Single Page Site module developed by Belgium Drupal Developer Robin Ingelbrecht. This module has no theme restriction such as Single Page Website module but there is no ability do more than one Landing Page into one Drupal site also there is no anchors in address line that does not allow to send link on separate block in the One Page site. But in this module there is beautiful Next Page submodule, and it works perfect, see http://www.starfisk.com.

Please let me know is there are some other Drupal based solutions that I should mention here.