Jquery 如何在fullpage.js的导航菜单上添加水平线
如何在导航菜单顶部添加水平线,这条线应该像一个进度条,从导航1开始,并根据当前部分穿过最后一个导航Jquery 如何在fullpage.js的导航菜单上添加水平线,jquery,html,css,fullpage.js,Jquery,Html,Css,Fullpage.js,如何在导航菜单顶部添加水平线,这条线应该像一个进度条,从导航1开始,并根据当前部分穿过最后一个导航 fullPage.js 这是第一部分 跳到最后一张幻灯片 fullPage.js 这是第二部分 fullPage.js 这是第三部分 fullPage.js 这是第四部分 fullPage.js 这是第五部分,它包含第一张幻灯片(实际上是第==第一张幻灯片) fullPage.js 这是第二张幻灯片 谢谢 **更新* 尝试在本例中执行相同的操作 根据视口中显示的部
-
-
-
-
-
-
fullPage.js
这是第一部分
跳到最后一张幻灯片
fullPage.js
这是第二部分
fullPage.js
这是第三部分
fullPage.js
这是第四部分
fullPage.js
这是第五部分,它包含第一张幻灯片(实际上是第==第一张幻灯片)
fullPage.js
这是第二张幻灯片
谢谢
**更新*
尝试在本例中执行相同的操作
根据视口中显示的部分调整导航:后的宽度
<header>
<div class="header-top clearfix">
<h1 class="l-left"><a href="#firstSection">Your Logo</a></h1>
<a class="l-right toggle-menu" href="#">
<i></i>
<i></i>
<i></i>
</a>
</div>
<nav class="hide">
<ul id="menu">
<li data-menuanchor="firstSection">
<a href="#firstSection" title="First Section">First Section</a>
</li>
<li data-menuanchor="secondSection">
<a href="#secondSection" title="Second Section">Second Section</a>
</li>
<li data-menuanchor="thirdSection">
<a href="#thirdSection" title="Second Section">Third Section</a>
</li>
<li data-menuanchor="fourthSection">
<a href="#fourthSection" title="Fourth Section">Fourth Section</a>
</li>
<li data-menuanchor="fifthSection">
<a href="#fifthSection" title="First Slide">First Slide</a>
</li>
<li data-menuanchor="fifthSection/1">
<a href="#fifthSection/1" title="Second Slide">Second Slide</a>
</li>
</ul>
</nav>
</header>
<div id="fullpage">
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>This is the first section</h3>
<div class="scroll-icon">
<p>Jump into the last slide</p>
<a href="#fifthSection/1" class="icon-up-open-big"></a>
</div>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>This is the second section</h3>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>This is the third section</h3>
</section>
<section class="vertical-scrolling">
<h2>fullPage.js</h2>
<h3>This is the fourth section</h3>
</section>
<section class="vertical-scrolling">
<div class="horizontal-scrolling">
<h2>fullPage.js</h2>
<h3>This is the fifth section and it contains the first slide (actually section == first slide)</h3>
</div>
<div class="horizontal-scrolling">
<h2>fullPage.js</h2>
<h3>This is the second slide</h3>
<p class="end">Thank you!</p>
</div>
</section>
</div>
.navigation {
position: relative;
}
.navigation:after {
content: '';
position: absolute;
bottom: 0px;
left: 0%;
width: 5%;
border-bottom: 1px solid #0000CC