Trying to get fullPage.js implemented, but how to add data-attributes?

Question

This is such a great script called fullPage.js

I managed to load the js file and css file and even with the Void Menu Module, managed to call anchor links, but I'm struggling with the data attributes part of the implementation of this cool code! Any help is greatly appreciated! How do I get data-attributes to work in Drupal 7.25? I mean, I need to add them to the menu, so that the html looks something like this:

<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>

Just want to add it to the Main Menu in Drupal. Any idea how? Am trying to implement this on my homepage and using the Adaptive Sub-Theme with Display Suite Module installed, if that helps any.

Have added the following to template.php, but it makes no difference at all:

function MY_THEME_NAME_menu_link(&$variables) {
  $variables['element']['#attributes']['data-menuanchor'] = substr($variables['element']['href'], 1);
  return theme_menu_link($variables);
}

What am I doing wrong here?

Answer 1

Now there is contributed module that will let you add custom attributes per menu item, you can find it here: Menu Links Attributes