web-dev-qa-db-ja.com

fullpage.jsを使用したページスクロールのアクティブメニュー項目

Joomla 3.7.5でfullpage.jsを使用しています。特定のセクションにスクロールするときに、メニュー項目でクラスをアクティブにしようとしています。

ドキュメントによると、fullPage.jsにメニューを知らせるには、メニュー項目を関連するセクションにリンクする必要があります。

これを行うには、それぞれのリンクを値として持つメニュー項目にdata-menuanchor属性を追加する必要があります。これらの値が一致する限り、プラグインは（スクロールするときに）アクティブなクラスを対応するメニュー項目に追加します。

私のメニューにはその構造があります：

<ul class="menu navbar-nav">
<li class="nav-item item-103 current active"><a class="active nav-link" href="/example/index.php/">Αρχική</a></li>
<li class="nav-item item-104"><a href="#profile" class="nav-link">profile</a></li>
<li class="nav-item item-105"><a href="#about" class="nav-link">about</a></li>
<li class="nav-item item-106"><a href="#skills" class="nav-link">skills</a></li>
<li class="nav-item item-107"><a href="#experience" class="nav-link">experience</a></li>
<li class="nav-item item-108"><a href="#education" class="nav-link">education</a></li>
<li class="nav-item item-109"><a href="#projects" class="nav-link">projects</a></li>
<li class="nav-item item-110"><a href="#testimonials" class="nav-link">testimonials</a></li>
<li class="nav-item item-118"><a href="#contact" class="nav-link">contact</a></li>
</ul>

メニューのすべてのliタグにdata-menuanchor = "menu anchor name"を挿入する方法を探しています。これは私がしようとするメニューです：

    <ul class="menu navbar-nav">
    <li data-menuanchor="profile" class="nav-item item-104"><a href="#profile" class="nav-link">profile</a></li>
    <li data-menuanchor="about" class="nav-item item-105"><a href="#about" class="nav-link">about</a></li>
    <li data-menuanchor="skills" class="nav-item item-106"><a href="#skills" class="nav-link">skills</a></li>
    <li data-menuanchor="experience" class="nav-item item-107"><a href="#experience" class="nav-link">experience</a></li>
    <li data-menuanchor="education" class="nav-item item-108"><a href="#education" class="nav-link">education</a></li>
     .........
     .....
    </ul>

すべてのliタグにdata-menuanchor = "menu anchor name"を挿入するにはどうすればよいですか？

jquerymenumenu-itemoverridestemplate-override
1
Haral

メニューモジュールの出力をオーバーライドする必要があります。 Joomlaコアのmod_menuを使用していると仮定すると、次のようになります。

  • default.phpをmodules/mod_menu/tmpl/からコピー
  • templates/YOUR_TEMPLATE/html/mod_menu/に貼り付けます

  • コピーしたオーバーライドファイルを編集します。

    69行目あたりで、次のように変更します。

    echo '<li class="' . $class . '">';

    に：

    echo '<li data-menuanchor="' . $item->alias . '" class="' . $class . '">';

便利なリンクを上書き：

2
FFrewin