CODEWITHSUNDEEP
htmldrupaldrupal-7fullpage.jscustom-data-attribute
Solomon Closson
Solomon Closson

Reputation: 6217

How to add data-attributes to <li> items of a <ul> menu in Drupal

This is such a great script called fullPage.js located here: https://github.com/alvarotrigo/fullPage.js

I managed to load the JavaScript 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 code.

How do I get data-attributes to work in Drupal 7.25? 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?

You can download the sitemaniacs theme here: http://dream-portal.net/dpdowns/MyProblem.zip You can just download Adaptive Theme from Drupal here and than copy sitemaniacs to your sites/all/themes folder and than just enable the theme and go to your homepage.

There is also a folder called fullPage that is the example of it working perfectly fine without Drupal.

Files to take note of:

/sites/all/themes/sitemaniacs/scripts/custom.js
/sites/all/themes/sitemaniacs/template.php
/sites/all/themes/sitemaniacs/css/example2.css
/sites/all/themes/sitemaniacs/sitemaniacs.info

Let me know if you need anything else, k?

And Thank YOU!!! What I've done is create 4 Basic Pages, and using the Field Formatter Class Module to give the body field a class (when managing the Display) defined as section, than promoted to front page. Than I used HTML within another Node Type and used NodeBlock Module to output it as a menu item within the Menu Bar section of the blocks, with url <front>. Let me know if you need anything else for this, but I can't get it to work using this simple approach. I've tried tons of ways of doing it also, but no go for me. If you find a method that works, or perhaps something is wrong somewhere else, please please let me know.... I'm pulling out my hair on this one.

Have tried straight HTML, and now getting this:

Uncaught TypeError: Cannot read property 'top' of undefined    jquery.fullPage.js?mzf0rp:506
scrollPage       jquery.fullPage.js?mzf0rp:506
doneResizing       jquery.fullPage.js?mzf0rp:889

The first error seems to occur in the scrollPage function on this line here:

var dtop = dest !== null ? dest.top : null;

Looks like dest.top is not defined on .top. Any idea why?

Upvotes: 2

Views: 2775

Answers (2)

nasrin.mkh
nasrin.mkh

Reputation: 91

for "href" you can use <'front'>#4thpage(front without any “cotation”) in the path in menu that you create in Structure > Menus and use the Menu Link Attributes module for other attributes

Upvotes: 0

Nicolas Borda
Nicolas Borda

Reputation: 134

Use the Menu Link Attributes module that will let you add custom attributes per menu item.

Upvotes: 0

Related Questions