Active Links for UL Navbar and JQuery

Permalink July 26, 2013 at 3:19 PM

I am still having trouble crafting a scrolling navbar that uses active links at the top level of a drop down menu. My current code for the navbar is:

<script language="javascript" type="text/javascript">
jQuery(document).ready(function($) {

$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});

</script>

<ul class="navbar2"><li id="imglink">
<a id="imglink" class="scroll" href="#TopAnchor">
<img src="http://bmpbuild.com/concrete/files/4413/7476/2680/Logo.png" height="100%" width="100%" title="Top">
</a>
</li>
</ul>
<ul class="navbar">
<li><a class="scroll" href="#ProductsAnchor">Our Products</a></li><li><a class="scroll" href="#CapabilitiesAnchor">Capabilities</a></li>
<li><a class="scroll" href="#AboutAnchor">About Benchmark</a><ul><li> <a class="scroll" href="#PeopleAnchor">Our People</a></li>
<li><a class="scroll" href="#PressResearchAnchor">Press / Research</a>
</li></ul>
</li></ul>

My site is located at:
http://bmpbuild.com/concrete

What code(jQuery and CSS) can I add to not interrupt the scroll function and add active links?

Thanks,
Jared

Also if someone could identify why there is a random white bar between some #Fittings (I have tried to clean up my code to no avail) that would be great.

webpresso replied on Jul 29, 2013 at 2:59 am Permalink Best Answer Reply

Hi

Active Class, untested:

<script language="javascript" type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){   
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
// Remove all active_scroll classes
$('.scroll').removeClass('active_scroll');
// Add active_scroll class to this             
$(this).addClass('active_scroll');
});
});
</script>

Your structure of the code is incorrect. All scripts and meta-tags must within the head-tag.

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" media="all" type="text/css" href="/concrete/files/cache/css/BPTheme/main.css" />
<head>
</head>
<body>
<div class="partial1" id="header">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />