Learning Learning - 14 days ago 5
jQuery Question

jQuery Fullpage - Show current section position with horizontal line on menu

I am trying to show line as an indicator for active section in fullpage.js based page.

This page has several section & subsection and active section should show as a horizontal red line upto active nav.

for example if i am on section one then line should be of teh width of first section and if i am on section section the line width should be upto end of section section and so.

Link for codepen
enter image description here

<div id="fullpage">
<div class="section" data-anchor="one">Section One</div>
<div class="section" data-anchor="two">Section Two</div>
<div class="section">Section Two sub page one</div>
<div class="section">Section Two sub page two</div>
<div class="section" data-anchor="three">Section Three</div>
<div class="section" data-anchor="four">Section Four</div>
</div>

<div class="nav-wrapper">
<hr>
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#one">First section</a></li>
<li data-menuanchor="secondPage"><a href="#two">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#three">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#four">Fourth section</a></li>
</ul>
</div>



.section {
text-align:center;
font-size: 3em;
}
.content{
margin:50px
}
#myMenu{position:absolute; background-color:#eee; top:0; width:100%; margin:0px !important; padding:0px !important;}

.active{font-size:15px; background-color:purple; }
.nav-wrapper{position:absolute; height:20px; bottom:0;width:100%; z-index:999999999; background:blue;}
.nav-wrapper > ul li {list-style:none; display:inline-block; padding:0px !important; margin:0px ; margin-left:-4px; text-align:center;}
.nav-wrapper ul li{width:calc(100% / 4);}
hr {
background: #f00 none repeat scroll 0 0;
height: 5px;
position: relative;
width: 100%;
z-index: 999999999;
margin:-5px
}


how can i do this using jquery

Answer

Since some of your pages are subpages that don't exists in your menu you will have to extract the pages and save them in a different variable:

var visibleMenuSections = $('#myMenu a').map(function() {
    return $(this).attr('href').substr(1);
}).get()

Now this variable contains an Array of the links:

["one", "two", "three", "four"]

Once you have this array you can use the callback afterLoad of the fullpage to set the with of the hr after each page change:

afterLoad: function(anchorLink, index) {
    p = visibleMenuSections.indexOf(anchorLink);
    if (p > -1) {
        $('.nav-wrapper hr').width((p+1) * (100/visibleMenuSections.length) + '%');
    }
}

Here is a working jsfiddle:
http://codepen.io/anon/pen/PGOYmA

Note - you had a problem in your html - the values of the data-menuanchor in the menu should be the exact values of the data-anchor of the section.

Here is an updated version of the jsfiddle (with a bit of css changes):
http://codepen.io/anon/pen/WGXZaG

Comments