Hi all,

 

I'm trying to use JavaScript to automatically apply an active class to the active page in the menu. The site in question is http://www.sunseedorganics.co.uk/index1.php

 

Code is below... I'm not sure where I'm going wrong so any help would be appreciated:

 

Menu HTML:

 

<div id="top_nav" class="cms-navigation"> <ul class="top-nav">

<li><a href="/index1.php" class="top-nav-link">Home</a></li>

<li><a href="/about-us.php" class="top-nav-link">About us</a></li>

</ul>

</div>

 

Menu CSS:

 

#top_nav {

}

 

.top-nav {

list-style-type:none;

margin:0;

padding:0;

font-family:Annifont, Arial, Helvetica, sans-serif;

}

 

.top-nav li {

font-size:15px;

display:block;

height:22px;

padding:9px 0 0 23px;

}

 

.top-nav li a:link, .top-nav li a:visited{

font-size:16px;

color:#111010;

text-decoration:none;

}

 

.top-nav li a:hover {

color:#315024;

text-decoration:none;

}

 

 

.activenav {

color:#F0F;

}

 

Menu JS:

 

function setActive() {

aObj = document.getElementById('top_nav').getElementsByTagName('a');

for(i=0;i<aObj.length;i++) {

if(document.location.href.indexOf(aObj.href)>=0) {

aObj.className='activenav';

}

}

}

You don't need JS for that. Set a class on the body element for each page, and for the links, then test for it in the CSS. For example:

 

body.home .top-nav a.home {
  /* Current styles here */
}

You don't need JS for that. Set a class on the body element for each page, and for the links, then test for it in the CSS. For example:

 

body.home .top-nav a.home {
  /* Current styles here */
}

 

 

Thanks Renaissance-Design. I do need JS, as it's going to be a CMS, so I need to give the client the ability to add menu items, with active classes, without accessing the CSS.

 

Any ideas?

Thanks Renaissance-Design. I do need JS, as it's going to be a CMS, so I need to give the client the ability to add menu items, with active classes, without accessing the CSS.

 

Any ideas?

 

Then the CMS should be adding a current class to the menu item. What CMS is it?

Then the CMS should be adding a current class to the menu item. What CMS is it?

 

It doesn't work like that unfortunately. I use PageLime, so I need a javascript function to get the active links working.

Edited July 25, 201115 yr by Trillo Digital

This should do it:

 

http://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/

 

I see your using Jquery and this page has some decent Jquery which *should* work for your purposes.

It is, to be honest, overkill, as you need a jquery plugin too.

You could do this without that plugin, by splitting your URL into an array, but the above method will be quicker to implement

I should note, your probably better off using this as a CMS:

 

http://mojomotor.com/

This should do it:

 

http://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/

 

I see your using Jquery and this page has some decent Jquery which *should* work for your purposes.

It is, to be honest, overkill, as you need a jquery plugin too.

You could do this without that plugin, by splitting your URL into an array, but the above method will be quicker to implement

 

Hi bb_matt,

 

Thanks for your post.

 

I've tried this approach on one of my pages, but still no success. Any ideas? Check out the source code on this page - http://www.sunseedorganics.co.uk/about-us.php. CSS can be accessed here - http://www.sunseedorganics.co.uk/master.css