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：

菜单：（默认为false）选择器可用于指定要与各部分链接的菜单。这样，滚动部分将使用活动类激活菜单中的相应元素。这不会生成菜单，但只会将活动类添加到给定菜单中的元素以及相应的锚链接。为了将菜单的元素与部分链接起来，需要使用HTML 5数据标记（data-menuanchor）来使用与部分中使用的相同的锚链接。例如：

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

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

要告诉插件在哪里添加active类，您需要在要添加类的元素中添加属性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响应下拉导航插件？

1 个答案: