how to use responsive dropdown navigation plugin with fullPage.js?

I want to add a responsive dropdown menu with FullPage.js, but the markup is confusing me...

currently I have this in my html for the menu

    <ul id="menu">
    <li id="contact" data-menuanchor="thirdPage"><a href="#thirdPage">contact</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">II</a></li>
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">I</a></li>
     </ul>

the plugin for slimmenu.js is like this:

<ul class="slimmenu">
<li>
    <a href="#">Slim Menu 1</a>
    <ul>
        <li>
            <a href="#">Slim Menu 1.1</a>
            <ul>
                <li><a href="#">Slim Menu 1.1.1</a></li>
                <li>
                    <a href="#">Slim Menu 1.1.2</a>
                    <ul>
                        <li><a href="#">Slim Menu 1.1.2.1</a></li>
                        <li><a href="#">Slim Menu 1.1.2.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Slim Menu 1.2</a></li>
    </ul>
</li>
<li><a href="#">Slim Menu 2</a></li>
<li>
    <a href="#">Slim Menu 3</a>
    <ul>
        <li>
            <a href="#">Slim Menu 3.1</a>
            <ul>
                <li><a href="#">Slim Menu 3.1.1</a></li>
                <li><a href="#">Slim Menu 3.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Slim Menu 3.2</a></li>
    </ul>
</li>
<li><a href="#">Slim Menu 4</a></li>

How do I combine the two to make it work with Fullpage.js?

Thank you!

Solution

From fullPage.js docs:

menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. Example:

In your case, you would only need to add .slimmenu to your menu option in fullPage.js:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '.slimmenu'
});

And to tell the plugin where to add the active class, you would need to add the attributes data-menuanchor in the element you want the class to be added.

It depends on where you want it in your menu.

Take into account that the menu works only for sections (vertical) and not for slides (horizontal).

I guess you could add the attribute data-menuanchor like this:

<ul class="slimmenu">
<li data-menuanchor="firstPage">
    <a href="#">Slim Menu 1</a>
    <ul>
        <li>
            <a href="#">Slim Menu 1.1</a>
            <ul>
                <li><a href="#">Slim Menu 1.1.1</a></li>
                <li>
                    <a href="#">Slim Menu 1.1.2</a>
                    <ul>
                        <li><a href="#">Slim Menu 1.1.2.1</a></li>
                        <li><a href="#">Slim Menu 1.1.2.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Slim Menu 1.2</a></li>
    </ul>
</li>
<li data-menuanchor="secondPage"><a href="#">Slim Menu 2</a></li>
<li data-menuanchor="thirdPage">
    <a href="#">Slim Menu 3</a>
    <ul>
        <li>
            <a href="#">Slim Menu 3.1</a>
            <ul>
                <li><a href="#">Slim Menu 3.1.1</a></li>
                <li><a href="#">Slim Menu 3.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Slim Menu 3.2</a></li>
    </ul>
</li>
<li data-menuanchor="fourthPage"><a href="#">Slim Menu 4</a></li>
<ul>

And don't forget to check the available examples, they might help you to understand how the menu works.