滚动菜单上有下划线的滑动链接处于活动状态

Question

I have a one page scroll menu with an underline sliding in from left to right when hovering a link. I need help on how to make a link active (meaning the line full) when in specific section such as "About".

Heres a picture that might help to show what I'm talking about (notice the link "Run" being highlighted):

I've seen many examples of a link being active online but its very confusing cause I haven't found one with my specific problem.

The closest example I found online was this http://jsfiddle.net/mdesdev/zkrh7/ but i still can't figure out how to fix the underline active.

I have created a js fiddle to show what I have so far: https://jsfiddle.net/rsrsrs/36rtdboh/

HTML:

<div id="nav_Wrapper_dk">
<nav id="dk_Nav" role="navigation" class="cf">

    <div><a href="#home" class="link_Button sliding-u-l-r scroll">Home</a>      </div>
    <div><a href="#about" class="link_Button sliding-u-l-r scroll">About us</a></div>
    <div><a href="#link3" class="link_Button sliding-u-l-r">Gallery</a></div>
    <div><a href="#link4" class="link_Button sliding-u-l-r">Find Us</a></div>
    <div><a href="#link5" class="link_Button sliding-u-l-r">Contact</a></div>
    <div><a href="#link6" class="link_Button sliding-u-l-r">Catering</a></div>
    <div><a href="#link7" class="link_Button sliding-u-l-r">Blog</a></div>

</nav>

</div>


<div id="home"></div>

<div id="about"></div>

CSS:

#nav_Wrapper_dk {
  position: fixed;
  width: 100%;
  height: 50px;
  background: white;
  border-bottom: 1px solid #f1f1f1;
}

#dk_Nav {
    width: 742.6167px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2001;
    background: white;
}

    #dk_Nav div {
        margin-top: 11px;   
    }

    .link_Button {
        display: block;
        float: left;
        height: 40px;
        font-family: 'Open Sans', sans-serif;
        font-size: .7em;
        color: black;
        line-height: 3.3em;
        text-transform: uppercase;
        letter-spacing: .2em;
        margin-right: 44.8px;
    }

#dk_Nav div a {
  text-decoration: none
}

    /* LEFT TO RIGHT */
    .sliding-u-l-r {
        display: inline-block;
    }

    .sliding-u-l-r:after {
        content: '';
        display: block;
        height: 3px;
        width: 0;
        background: transparent;
        transition: width .3s ease, background-color .3s ease;
    }

    .sliding-u-l-r:hover:after {
        width: 100%;
        background: black;
    }


#home {
  width: 100%;
  height: 1000px;
  background: #ccc;
}

#about {
  width: 100%;
  height: 1000px;
  background: white;
}

Javascript:

// Scroll Menu
jQuery(document).ready(function($) {
  $(".scroll").click(function(event) {
  event.preventDefault();
  $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
  });
});

Any sort of help would be highly appreciated, thanks!

Answer 1

make a .active class that displays the bar as it looks at the end of the animation.

Toggle it on click between the elements like this:

$(document).on('click','.scroll',function(e){
    $('.scroll').removeClass('active');
    $(e.target).addClass('active');
});

JSFIDDLE Example

https://jsfiddle.net/Panomosh/yu530bpf/

Answer 2

Modify your css class like this

.sliding-u-l-r:hover:after, .sliding-u-l-r.active:after {
    width: 100%;
    background: black;
}

and your javascript to something like this

jQuery(document).ready(function($) {
  $(".scroll").click(function(event) {
    event.preventDefault();
    $( ".scroll" ).removeClass("active");
    $( this ).addClass("active");
    $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
  });
});

Answer 3

Here is the working example of what you want :

Basically on click of menu 2 interactions are happening-

1. The elements scroll smoothly to the given id definite point.( The scroll is smoother now. )

if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }

2. The current menu item gets the active class .

JS-

$(this).addClass('active').parent().siblings().children().removeClass('active');

Css-

.sliding-u-l-r.active:after {
  width: 100%;
  background: black;
}

Below is the compiled snippet of the above explanations :)

 // Scroll Menu $(function() { $("nav a").click(function() { //**Add class active to current clicked menu item and remove class active from other menu item**// $(this).addClass('active').parent().siblings().children().removeClass('active'); //** Smooth scroll Logic **? if (location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); 

 #nav_Wrapper_dk { position: fixed; width: 100%; height: 50px; background: white; border-bottom: 1px solid #f1f1f1; } body { margin: 0px; } #dk_Nav { width: 742.6167px; height: 50px; margin-left: auto; margin-right: auto; top: 0; right: 0; left: 0; z-index: 2001; background: white; } #dk_Nav div { margin-top: 11px; } .link_Button { display: block; float: left; height: 40px; font-family: 'Open Sans', sans-serif; font-size: .7em; color: black; line-height: 3.3em; text-transform: uppercase; letter-spacing: .2em; margin-right: 44.8px; } #dk_Nav div a { text-decoration: none } /* LEFT TO RIGHT */ .sliding-ulr { display: inline-block; } .sliding-ulr:after { content: ''; display: block; height: 3px; width: 0; background: transparent; transition: width .3s ease, background-color .3s ease; } .sliding-ulr:hover:after { width: 100%; background: black; } .sliding-ulr.active:after { width: 100%; background: black; } #home { width: 100%; height: 1000px; background: #ccc; } #about { width: 100%; height: 1000px; background: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav_Wrapper_dk"> <nav id="dk_Nav" role="navigation" class="cf"> <div><a href="#home" class="link_Button sliding-ulr scroll">Home</a></div> <div><a href="#about" class="link_Button sliding-ulr scroll">About us</a></div> <div><a href="#link3" class="link_Button sliding-ulr">Gallery</a></div> <div><a href="#link4" class="link_Button sliding-ulr">Find Us</a></div> <div><a href="#link5" class="link_Button sliding-ulr">Contact</a></div> <div><a href="#link6" class="link_Button sliding-ulr">Catering</a></div> <div><a href="#link7" class="link_Button sliding-ulr">Blog</a></div> </nav> </div> <div id="home"></div> <div id="about"></div> 

Answer 4

You jsfiddle example in this snippet with your requirement. Hope this will help.

 // Scroll Menu jQuery(document).ready(function($) { $("div a").click(function(event) { event.preventDefault(); 1 $( "nav" ).find( ".active" ).removeClass('active'); $(this).addClass('active'); $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000,'linear'); }); }); 

 #nav_Wrapper_dk { position: fixed; width: 100%; height: 50px; background: white; border-bottom: 1px solid #f1f1f1; } #dk_Nav { width: 742.6167px; height: 50px; margin-left: auto; margin-right: auto; top: 0; right: 0; left: 0; z-index: 2001; background: white; } #dk_Nav div { margin-top: 11px; } .link_Button { display: block; float: left; height: 40px; font-family: 'Open Sans', sans-serif; font-size: .7em; color: black; line-height: 3.3em; text-transform: uppercase; letter-spacing: .2em; margin-right: 44.8px; } #dk_Nav div a { text-decoration: none } /* LEFT TO RIGHT */ .sliding-ulr { display: inline-block; } .sliding-ulr:after { content: ''; display: block; height: 3px; width: 0; background: transparent; transition: width .3s ease, background-color .3s ease; } .sliding-ulr:hover:after ,.sliding-ulr.active:after{ width: 100%; background: black; } #home { width: 100%; height: 1000px; background: #ccc; } #about { width: 100%; height: 1000px; background: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav_Wrapper_dk"> <nav id="dk_Nav" role="navigation" class="cf"> <div><a href="#home" class="link_Button sliding-ulr scroll active">Home</a></div> <div><a href="#about" class="link_Button sliding-ulr scroll">About us</a></div> <div><a href="#link3" class="link_Button sliding-ulr">Gallery</a></div> <div><a href="#link4" class="link_Button sliding-ulr">Find Us</a></div> <div><a href="#link5" class="link_Button sliding-ulr">Contact</a></div> <div><a href="#link6" class="link_Button sliding-ulr">Catering</a></div> <div><a href="#link7" class="link_Button sliding-ulr">Blog</a></div> </nav> </div> <div id="home"></div> <div id="about"></div>