如何使用 fullPage.js 的响应式下拉导航插件？

Question

我想用 FullPage.js 添加响应式下拉菜单，但标记让我感到困惑...

目前我的 html 菜单中有这个

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

slimmenu.js的插件是这样的：

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

如何将两者结合使用 Fullpage.js？

谢谢！

Answer 1

来自 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:

在您的情况下，您只需要将 .slimmenu 添加到 fullPage.js 中的 menu 选项：

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

并告诉插件在哪里添加 active class，您需要在您想要 class 的元素中添加属性 data-menuanchor已添加。

这取决于您希望它在菜单中的什么位置。

请注意该菜单仅适用于 sections（垂直）而不适用于 slides（水平）。

我想您可以像这样添加属性 data-menuanchor：

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

别忘了查看 available examples，它们可能会帮助您了解菜单的工作原理。

如何使用 fullPage.js 的响应式下拉导航插件？

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

jquery

css

response

fullpage.js