1 Replies - 1435 Views - Last Post: 12 February 2014 - 10:24 AM

#1 brianborn1968  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 76
  • Joined: 15-November 11

Using jQuery to change Active State on Dynamic Menu

Posted 12 February 2014 - 05:15 AM

My webpages are PHP and I'm using an include file for the menu. I would like to change the active state of the menu item by adding a class to the <a href=""> tag. Easy and I can do this already. The difficult part for me has been to only have the top level navigation to show being active.

For example, looking at the navigation below, when a visitor clicks on any of the links "Top Level 1", "Top Level 2", or "Top Level 3" the class is added like... <a href="" class="button th-yellow active">. However, when a visitor clicks on the links titled "Child Level", the class should change for the parent level links "Top Level 1", "Top Level 2", or "Top Level 3". To hopefully make it more clear, when someone clicks "<a href="page.php">Child Level - Link 1</a>" the active state will change for "<a href="page.php">Top Level 2</a>" as it is the parent or top level menu.

<script>
$(function(){
   var url = window.location.href;
   var page = url.substr(url.lastIndexOf('/')+1);
   $('ul#main-nav a[href*="'+page+'"]').addClass('button th-yellow active');
});
</script>

	<ul id="main-nav">
		<li><a href="index.php">Home</a></li>
		<li><a href="page.php">Top Level 1</a></li>
		<li class="has-children">
			<a href="page.php">Top Level 2</a>
			<ul>
				<li><a href="page.php">Child Level - Link 1</a></li>
				<li><a href="page.php">Child Level - Link 2</a></li>
				<li><a href="page.php">Child Level - Link 3</a></li>
			</ul>
		</li>
	</ul>
</div>



I recorded this short 40 second video to hopefully show the difference between my website and the demo website. I bought this template, but maybe the developer doesn't support their product as they have yet to respond to me.
http://youtu.be/DUTY0cCzmCg

Also I created another post in the Javascript section, but from communicating with user JMRKER, this might be a jQuery question. Here is the link to my other thread, but that might be more confusing.
http://www.dreaminco...y-on-top-level/

I appreciate any help in solving this challenge as I've been searching and trying out a lot of different things over the last 5 days without success.

Brian

Is This A Good Question/Topic? 0
  • +

Replies To: Using jQuery to change Active State on Dynamic Menu

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 436
  • View blog
  • Posts: 1,851
  • Joined: 30-April 10

Re: Using jQuery to change Active State on Dynamic Menu

Posted 12 February 2014 - 10:24 AM

Please don't create duplicate threads. If you need clarification ask on the other thread.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1