fullPage.js菜单不显示在示例中。

Question

我已经导入了fullPage的js和css文件。这是身体：

<ul id="menu">
    <li data-menuanchor="home"><a href="#main">Main</a></li>
    <li data-menuanchor="phonetics"><a href="#phonetics">Phonetics</a></li>
    <li data-menuanchor="search"><a href="#search">Search</a></li>
    <li data-menuanchor="about"><a href="#about">About</a></li>
</ul>
<div id="fullpage">
    <div class="section">
        a
    </div>
    <div class="section"></div>
    <div class="section">c</div>
    <div class="section">d</div>
</div>

这是一个脚本：

$(document).ready(function(){
    $("#fullpage").fullpage({
        menu: "#menu",
        anchors:["main", "phonetics", "search", "about"],
        css3: true,
        loopBottom:false,
        loopTop:false,
        keyboardScrolling: false,
        sectionSelector: ".section",
        slideSelector: ".slide",

        /* http://www.colorcombos.com/color-schemes/14/ColorCombo14.html */
        sectionsColor: ["#443266", "#C3C3E5", "#F1F0FF", "#8C489F"]
    });
});

fullPage工作得很好，但是菜单不像在示例中那样出现。菜单是这样的：

​

​

我用的东西：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="js/html-phonetics-library.js"></script>
<script type="text/javascript" src="js/script.js"></script>

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/ie.css" />
<link rel="stylesheet" href="css/jquery.fullPage.css" />
<link rel="stylesheet" href="css/style.css" />

Answer 1

fullPage工作得很好，但是菜单并没有出现在示例中。

这是因为fullpage.js没有为菜单提供样式。它只存在于示例中，因为示例使用的是另一个样式表。

您应该创建自己的菜单，而不仅仅是使用fullpage.js在示例中使用的菜单。

但是，如果您真的想使用它的菜单，请查看在示例样式表中，或者通过使用所有的例子中使用的examples.css文件将其包含到项目中。