web-dev-qa-db-fra.com

Les éléments de menu actifs sur la page défilent avec fullpage.js

J'utilise fullpage.js avec joomla 3.7.5. J'essaie de mettre la classe active sur mon élément de menu lorsque je fais défiler jusqu'à la section spécifique.

Selon la documentation, pour que fullPage.js soit informé du menu, je dois relier les éléments de menu aux sections correspondantes.

Pour ce faire, je dois ajouter l'attribut data-menuanchor aux éléments de menu avec les liens respectifs comme valeurs. Tant que ces valeurs correspondent, le plugin ajoute la classe active (comme nous le faisons défiler) à l'élément de menu correspondant.

Mon menu a cette stracture:

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

J'essaie de trouver un moyen d'insérer data-menuanchor = "nom de l'ancre de menu" dans chaque balise li du menu. C'est le menu que j'essaie d'avoir:

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

Comment puis-je insérer data-menuanchor = "nom de l'ancre de menu" sur chaque balise li?

jquerymenumenu-itemoverridestemplate-override
1
Haral

Vous devez remplacer la sortie de votre module de menu. En supposant que vous utilisez le mod_menu de Joomla, alors:

  • Copiez le default.php de modules/mod_menu/tmpl/
  • Collez-le à templates/YOUR_TEMPLATE/html/mod_menu/

  • Editez le fichier de substitution que vous venez de copier:

    Autour de la ligne 69, changer:

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

    à:

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

Remplace les liens utiles:

2
FFrewin