如何在 fullpage.js 的导航菜单上添加水平线

Question

如何在导航菜单顶部添加水平线，线应该像一个进度条，从导航 1 开始并根据当前部分穿过最后一个导航。

http://codepen.io/anon/pen/LRjpmb

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

**更新*

在这个例子中尝试做同样的事情https://codepen.io/genievn/pen/Bwlnj

Answer 1

.navigation {
    position: relative;
}

.navigation:after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0%;
    width: 5%;
  border-bottom: 1px solid #0000CC

根据视口上显示的部分调整导航的宽度：之后