如何在導航菜單上添加水平線fullpage.js

如何在導航菜單頂部添加水平線，線應該像導航條一樣從導航開始1 &根據當前部分穿過最後一個導航。如何在導航菜單上添加水平線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>

** UPDATE *

試圖做同樣在該示例中https://codepen.io/genievn/pen/Bwlnj

來源

2016-09-29 Learning

.navigation { 
    position: relative; 
} 

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

調整導航的寬度：根據正被後段在視口上顯示

來源

2016-09-29 10:50:21

如何在導航菜單上添加水平線fullpage.js

回答

相關問題