Drupal - 如何将数据属性添加到 <ul> 菜单的 <li> 项答案

【问题标题】：Drupal - How to add data-attributes to <li> items of a <ul> MenuDrupal - 如何将数据属性添加到 <ul> 菜单的 <li> 项
【发布时间】：2014-02-02 15:59:23
【问题描述】：

这是一个非常棒的脚本，名为 fullPage.js，位于：https://github.com/alvarotrigo/fullPage.js

我设法加载了 js 文件和 css 文件，甚至使用 Void 菜单模块，也设法调用了锚链接，但我正在努力处理这个酷代码实现的数据属性部分！任何帮助是极大的赞赏！如何让数据属性在 Drupal 7.25 中工作？我的意思是，我需要将它们添加到菜单中，以便 html 看起来像这样：

<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>

只想将它添加到 Drupal 的主菜单中。知道怎么做吗？我正在尝试在我的主页上实现这一点，并使用安装了显示套件模块的自适应子主题，如果有帮助的话。

在template.php中添加了以下内容，但没有任何区别：

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

我在这里做错了什么？

编辑

您可以在这里下载 sitemaniacs 主题：http://dream-portal.net/dpdowns/MyProblem.zip 您可以从 Drupal here 下载 Adaptive Theme，然后将 sitemaniacs 复制到您的 sites/all/themes 文件夹，然后启用主题并转到您的主页。

还有一个名为 fullPage 的文件夹，它是在没有 Drupal 的情况下完美运行的示例。

需要注意的文件：

/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

如果你还需要什么，请告诉我，k？

谢谢你！！！我所做的是创建 4 个基本页面，并使用 Field Formatter Class Module 为 body 字段提供一个定义为 section 的类（在管理显示时），然后提升到首页。比我在另一个节点类型中使用 HTML 并使用NodeBlock Module 将其作为块的Menu Bar 部分中的菜单项输出，URL 为<front>。如果您需要其他任何东西，请告诉我，但我无法使用这种简单的方法使其工作。我也尝试了很多方法，但不适合我。如果您找到一种有效的方法，或者其他地方可能有问题，请告诉我....我正在为这个方法拔头发。

尝试过直接的 HTML，现在得到了这个：

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

第一个错误似乎出现在这一行的scrollPage函数中：

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

看起来dest.top 没有在.top 上定义。知道为什么吗？

【问题讨论】：

你不能只写原始的 HTML 代码吗？
好吧，好主意...假设我会这样做！太棒了，你摇滚！！！
我无法让这该死的东西工作，即使使用 HTML。似乎我现在在jQuery.fullPage.js 文件本身中得到了一个未定义的.top 索引。
您可以发布您的网址吗？如果没有，请在此处粘贴生成的 HTML 标记和插件初始化。
不确定你想要那个，因为它只是一个在drupal中尝试和做的简单事情的一大堆代码！我尝试了不同的模块和大量的方法，我比开始使用它时更加迷茫。阿格！但如果你坚持，我会为你整理一个 URL，现在我正在 XAMMP 中构建它

标签： drupal-7 fullpage.js html5-data

【解决方案1】：

使用Menu Link Attributes 模块可以让您为每个菜单项添加自定义属性。

【讨论】：

【解决方案2】：

对于“href”，您可以在结构 > 菜单中创建的菜单路径中使用 #4thpage(front without any “cotation”)，并将 Menu Link Attributes 模块用于其他属性

【讨论】：