Reputation: 157

One page menu on scroll with underline sliding links as active

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!

Upvotes: 1

Answers (4)

Sahil Dhir

Reputation: 4250

Here is the working example of what you want :

Basically on click of menu 2 interactions are happening-

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

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

.sliding-u-l-r.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-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>

Upvotes: 1

Dhiraj

Reputation: 1462

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-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 ,.sliding-u-l-r.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-u-l-r scroll active">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>

Upvotes: 1

Zakawa

Reputation: 131

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);
  });
});

Upvotes: 1

Panomosh

Reputation: 892

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/

Upvotes: 1

One page menu on scroll with underline sliding links as active

Answers (4)

Related Questions