fullPage.js 菜单没有像示例中那样出现
fullPage.js Menu Does Not Appear As In Example
我已经导入了全页的 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 效果很好,但菜单不像 example 那样显示。这是菜单的样子:
我用的东西:
<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" />
fullPage works great, but menu does not appear as in example.
那是因为fullpage.js 没有提供菜单的样式。
它只出现在示例中,因为示例使用了另一个样式表。
您应该创建自己的菜单,而不仅仅是使用 fullpage.js 用于示例的菜单。
但如果你真的想使用它的菜单,请看一看at the examples stylesheet or include it in your project by using the examples.css
file used in all the examples。
我已经导入了全页的 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 效果很好,但菜单不像 example 那样显示。这是菜单的样子:
我用的东西:
<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" />
fullPage works great, but menu does not appear as in example.
那是因为fullpage.js 没有提供菜单的样式。 它只出现在示例中,因为示例使用了另一个样式表。
您应该创建自己的菜单,而不仅仅是使用 fullpage.js 用于示例的菜单。
但如果你真的想使用它的菜单,请看一看at the examples stylesheet or include it in your project by using the examples.css
file used in all the examples。