fullPage.js菜单未显示为示例

Question

I already imported js and css files of fullPage. This is the body:

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

This is the script:

$(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 works great, but menu does not appear as in example . This is how menu looks like:

The things I use:

<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 works great, but menu does not appear as in example.

That's because fullpage.js doesn't provide the styles for the menu . It is only there in the examples because the examples are using another stylesheet.

You are suppose to create your own menus and not just use the ones fullpage.js is using for the examples.

But if you really want to use its menu, take a look at the examples stylesheet or include it in your project by using the examples.css file used in all the examples .