it-swarm-eu.dev

Le voci di menu attive nella pagina scorrono con fullpage.js

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?

1
Haral

Devi sovrascrivere l'output del tuo modulo menu. Supponendo che tu stia utilizzando il core mod_menu di Joomla, quindi:

  • Copia il default.php a partire dal modules/mod_menu/tmpl/
  • Incollalo in 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 . '">';
    

Sostituisce i collegamenti utili:

2
FFrewin