1

I'm using fullpage.js with joomla 3.7.5. I try to put class active on my menu item, when I scroll to the specific section.

According to the docs, to let fullPage.js know about the menu, I need to link the menu items to the relevant sections.

To do this, I must add the data-menuanchor attribute to menu items with the respective links as the values. As long as those values match, the plugin appends the active class (as we scroll) to the corresponding menu item.

My menu has that 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>

I try to find a way to insert data-menuanchor="menu anchor name" to every li tag of menu. This is the menu I try to have:

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

How can I insert data-menuanchor="menu anchor name" on every li tag?

2

You need to override the output of your menu module. Assuming you are using the Joomla core mod_menu, then:

  • Copy the default.php from modules/mod_menu/tmpl/
  • Paste it to templates/YOUR_TEMPLATE/html/mod_menu/
  • Edit the override file that you just copied:

    Around line 69, change:

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

    to:

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

Overrides Useful Links:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.