CODEWITHSUNDEEP
javascriptjqueryfullpage.js
pinkp
pinkp

Reputation: 455

Adding active class to two / split menu with fullPage.js

I'm using fullPage.JS and have the section Menu working fine (scrolls up and down) apart from I want half my menu in the header and half in the footer. This works fine for navigation but is not adding the class "active" to the li in the footer only to the header. I'm assuming its because both menu's have the same ID as removing the header menu id makes the footer menu work with the active class. How do I get both to work? callbacks perhaps?

Similar to this answer: FullPage.js - add active class to menu anchor when on a nonematching section

$('#fullpage').fullpage({
    anchors: ['PAGE1','PAGE2','PAGE3','PAGE4','PAGE5','PAGE6',],
    menu:'#menu',
});

<div id="headermenu">
    <ul id="menu">
        <li data-menuanchor="PAGE1"><a href="#PAGE1">PAGE1</a></li>
        <li data-menuanchor="PAGE2"><a href="#PAGE2">PAGE2</a></li>
        <li data-menuanchor="PAGE3"><a href="#PAGE3">PAGE3</a></li>
    </ul>
</div>

<div id="footermenu">
    <ul id="menu">
        <li data-menuanchor="PAGE4"><a href="#PAGE4">PAGE4</a></li>
        <li data-menuanchor="PAGE5"><a href="#PAGE5">PAGE5</a></li>
        <li data-menuanchor="PAGE6"><a href="#PAGE6">PAGE6</a></li>
    </ul>
</div>

Upvotes: 0

Views: 1437

Answers (1)

Lachezar Balev
Lachezar Balev

Reputation: 12021

In HTML the id attribute must be unique. If you want a selector to apply to more than one element use CSS classes, e.g.:

<ul class="my-menu">
</ul>

...
<ul class="my-menu">
</ul>

Then your selector would look like:

menu:'.my-menu'

Upvotes: 4

Related Questions