Sto usando fullpage.js con joomla 3.7.5. Provo a mettere la classe attiva sulla mia voce di menu, quando scorro fino alla sezione specifica.
Secondo i documenti, per far conoscere fullPage.js al menu, devo collegare le voci di menu alle sezioni pertinenti.
Per fare ciò, devo aggiungere l'attributo data-menuanchor alle voci di menu con i rispettivi collegamenti come valori. Finché questi valori corrispondono, il plugin aggiunge la classe attiva (mentre scorriamo) alla voce di menu corrispondente.
Il mio menu ha quella struttura:
<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>
Provo a trovare un modo per inserire data-menuanchor = "nome di ancoraggio menu" in ogni tag li del menu. Questo è il menu che provo ad avere:
<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>
Come posso inserire data-menuanchor = "menu anchor name" su ogni tag li?
Devi sovrascrivere l'output del tuo modulo menu. Supponendo che tu stia utilizzando il core mod_menu di Joomla, quindi:
default.php
a partire dal modules/mod_menu/tmpl/
templates/YOUR_TEMPLATE/html/mod_menu/
Modifica il file di override che hai appena copiato:
Intorno alla linea 69, cambia:
echo '<li class="' . $class . '">';
a:
echo '<li data-menuanchor="' . $item->alias . '" class="' . $class . '">';