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"を挿入するにはどうすればよいですか?
メニューモジュールの出力をオーバーライドする必要があります。 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 . '">';