我正在我的项目中使用fullpage.js。我将div id菜单用于导航和菜单,但是我想自定义屏幕右侧的导航点,以便最后一个点导航到第一页,而第一个点导航到最后一页。
我想按降序排列导航点。有可能吗?
new fullpage('#fullpage',{
autoScrolling: true,
navigation: true,
anchors: ['part1','part2','part3','part4','part5'],
navigationTooltips:['5','4','3','2','1'],
showActiveTooltip: true,
})
<ul id='menu' style="list-style: none; padding-left: 0;">
<li data-menuanchor="part1"><a href="#part1" style="display: none;"></a></li>
<li data-menuanchor="part2"><a href="#part2" style="padding-top: 0px;"><span>OUR SERVICES</span></a></li>
<li data-menuanchor="part3"><a href="#part3" ><span>OUR COMPANY</span></a></li>
<li data-menuanchor="part4"><a href="#part4" ><span>SWIFT CONSERVATION</span></a></li>
<li data-menuanchor="part5"><a href="#part5" ><span>BLOGS</span></a></li>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</ul>
您基本上可以用自己的默认CSS覆盖。例如,使用红色子弹:
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
background: red;
}
您可以看到默认情况下在css文件上应用的样式:https://github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.css
您还可以在fullpage.js extensions页面上找到几十个预定义的导航项目要购买。