如何创建fullpage.js汉堡菜单

Question

fullpage.js支持汉堡菜单吗？我最近买了fullpage.js水平滚动，我希望为我的网站创建一个汉堡菜单。我尝试了许多方法来创建，但我仍未能做到正确。 有谁可以帮我解决我的问题吗？

谢谢。

Answer 1

是的，在fullpage.js中使用汉堡菜单没问题。

$(document).ready(function () {
    $('#fullpage').fullpage({
        scrollingSpeed: 300,
        sectionsColor: ['red', 'green', 'blue']
    });
});

header {
    height: 50px;
    position: fixed;
    z-index: 50;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
    left: 15px;
    right: 15px;
    top: 0px;
}

.hamburger {
    /* menu button style on mobile */
    float: right;
    z-index: 60;
    width: 26px;
    height: 18px;
    top: 23.5px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

    .hamburger .line {
        /* each line of menu button style */
        display: block;
        position: absolute;
        z-index: 61;
        height: 2px;
        width: 100%;
        background: white;
        border-radius: 9px;
        opacity: 1;
        right: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

        .hamburger .line:nth-child(1) {
            top: 0px;
        }

        .hamburger .line:nth-child(2), .hamburger .line:nth-child(3) {
            top: 8px;
        }

        .hamburger .line:nth-child(4) {
            top: 16px;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>

<header id="header">
    <section class="header">
        <section class="hamburger">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </section>
    </section>
</header>

<div id="fullpage">
    <div class="section">section 1</div>
    <div class="section">section 2</div>
    <div class="section">section 3</div>
</div>