Help with active_class

Sigal · July 2012

Hello,

I don't really understand how to use the active_class.
I have a top menu and a side dropdown menu.

First problem the top menu does not display the active class.
The nav file for the top menu:


$nav = array();
$nav['home'] = array('label'=>'Home');
$nav['events'] = array('label'=>'Events');
$nav['gallery'] = array('label'=>'Gallery');
$nav['feedback'] = array('label'=>'Feedback');
$nav['contact'] = array('label'=>'Contact Us');

The call to the menu:


echo fuel_nav(array('container_tag_id' => 'topmenu', 'item_id_prefix' => 'topmenu_', 'pre_render_func' => 'my_menu_func', 'active_class'=>'on'));

I click on Home, no active class is displayed.

The second problem is on the sidemenu. When I am on the home page all the sidemenu items don't have the active class besides the last one: Hungry or Thirsty? Which should not have the active class since I didn't click on it and I am not on the Huntry or Thirsty page.

Then I click on Outdoors, it gets the active_class but Hungry or Thirsty still has it.

I go back to home, now both Outdoors and Hungry or Thirsty have it.

But I am on the home page not on Outdoors or Hungry or Thristy, why do they have the active_class?
My nav file for the sidemenu code:


$nav = array();

$cats = fuel_model('categories', array('find' => 'all', 'where' => array('published' => 'yes'), 'name asc'));
$CI->load->model('sub_categories_model');
$CI->load->model('categories_to_members_model');

foreach($cats as $cat):
	$id = $cat->id;
	$title = $cat->name;
	$catUrl = $cat->url;

	$numOfSubCats = $CI->sub_categories_model->record_count(array('cat_id'=>$id));

	$total = $CI->categories_to_members_model->record_count(array('category_id'=>$id));
	
	$label = $title . ' (' . $total . ')';
	$nav['members/' . $catUrl] = array('label'=>$label, 'id'=>$title);

	if($numOfSubCats != 0):
		$subCats = fuel_model('sub_categories', array('find' => 'all', 'where' => array('cat_id' => $id), 'name asc'));

		foreach($subCats as $sub):
			$subCatId = $sub->id;
			$url = $sub->url;
			$subName = $sub->name;

			$subTotal = $CI->categories_to_members_model->record_count(array('category_id'=>$id, 'sub_cat_id'=>$subCatId));
			
			if(empty($subTotal)) $subTotal = 0;
			$subLabel = $subName . ' (' . $subTotal . ')';
		
			$nav['members/' . $title . '/' . $url] = array('label' => $subLabel, 'parent_id' => 'members/' . $catUrl, 'id'=>$subCatId);
		endforeach;
	endif;
	
endforeach;

I call it like this:


echo fuel_nav(array('file' => 'sidemenu', 'container_tag_id' => 'accordion', 'container_tag_class' => 'accordion', 'active_class' => 'on'));

The menu structure is:


<ul id="accordion" class="accordion">
	<li class="first"><a href="http://localhost/clarenssaNewFuel/members/accommodation" title="Accommodation (5)">Accommodation (5)</a>
	<ul>
	  <li class="first"><a href="http://localhost/clarenssaNewFuel/members/Accommodation/bb" title="B & B (0)">B & B (0)</a></li>
	  <li><a href="http://localhost/clarenssaNewFuel/members/Accommodation/guesthouse" title="Guesthouse (2)">Guesthouse (2)</a></li>
	  <li><a href="http://localhost/clarenssaNewFuel/members/Accommodation/selfcatering" title="Self-Catering (2)">Self-Catering (2)</a></li>
	  <li class="last"><a href="http://localhost/clarenssaNewFuel/members/Accommodation/hotel" title="Hotel (1)">Hotel (1)</a></li>
	</ul>
	</li>
	<li><a href="http://localhost/clarenssaNewFuel/members/healthbeauty" title="Health & Beauty (2)">Health & Beauty (2)</a></li>
	<li><a href="http://localhost/clarenssaNewFuel/members/outdoors" title="Outdoors (2)">Outdoors (2)</a></li>
	<li><a href="http://localhost/clarenssaNewFuel/members/food" title="Food (0)">Food (0)</a></li>
	<li class="on"><a href="http://localhost/clarenssaNewFuel/members/retail" title="Retail (2)">Retail (2)</a></li>
	<li class="last"><a href="http://localhost/clarenssaNewFuel/members/hungrythirsty" title="Hungry or Thirsty? (1)">Hungry or Thirsty? (1)</a></li>
</ul>

I thought the id will do it:


$nav['members/' . $title . '/' . $url] = array('label' => $subLabel, 'parent_id' => 'members/' . $catUrl, 'id'=>$subCatId);
$nav['members/' . $title . '/' . $url] = array('label' => $subLabel, 'parent_id' => 'members/' . $catUrl, 'id'=>$subCatId);

but I don't see it adds an id anywhere in the menu?

Lance · July 2012

The first snippet, do none of the pages add an active class or just home isn't working?

For your last snippet, It's just 'parent' not 'parent_id'.

I've not had a problem losing the active class before, don't suppose your browser is caching the page? Try a force refresh just to be sure.

Sigal · July 2012

In the topmenu, none of the pages add an active class.

In the sidemenu, I think the problem is in the jquery I am using, investigating.

admin · July 2012

It's tough to tell what the problem is without knowing the entire $nav array value. However, for the top menu to display, you need to be on a page with a URI location that starts with or is the key value (e.g. home, events, gallery, feedback, contact etc).

And you actually do want 'parent_id' for the last snippet.

Lance · July 2012

Opps, sorry I mixed it up with fuel_nav()

Sigal · July 2012

Thanks, here is the $nav array value:


Array
(
    [home] => Array
        (
            [label] => Home
        )

    [events] => Array
        (
            [label] => Events
        )

    [gallery] => Array
        (
            [label] => Gallery
        )

    [tourismforum] => Array
        (
            [label] => Tourism Forum
        )

    [feedback] => Array
        (
            [label] => Feedback
        )

    [contact] => Array
        (
            [label] => Contact Us
        )

)

The URI location is: http://localhost/clarenssaNewFuel/home unless URI location is something different than the url?

admin · July 2012

Isn't there a sidenav too? Also, what happens if you pass in 'active' => uri_segment(1) into the fuel_nav function to tell it which array key to highlight (assuming the uri_segment matches the key value of the menu item you want).

Sigal · July 2012

Yes there is a sidenav too, why?

I have added in the header_block view:


echo fuel_nav(array('container_tag_id' => 'topmenu', 'item_id_prefix' => 'topmenu_', 'pre_render_func' => 'my_menu_func', 'active_class'=>'on', 'active' => uri_segment(1)));

My url:
http://localhost/clarenssaNewFuel/home

No active class.

admin · July 2012

If you navigate to home, does it highlight or at least at the active class to the li element?

Sigal · July 2012

I checked the css with hardcoding the menu and adding the active class and it works.

The active class is not being added to the menu when I browse to:

http://localhost/clarenssaNewFuel/home

<ul id="topmenu">
	<li id="topmenu_home" class="first on"><a href="http://localhost/clarenssaNewFuel/home" title="Home"><span>Home</span></a></li>

My css:


ul#topmenu li a:hover, ul#topmenu li a.active {
	background-position:0% -50px;
}

admin · July 2012

Aren't you specifying the 'active_class'=>'on'? If so, it appears to be working based on the output you've displayed above. Change to 'active_class'=>'active' or simply remove that parameter (since it's the default), and your menu should look active.

Sigal · July 2012

Ok, that helped 'active_class'=>'active' but the problem is the active class is being added to the list item, I need it to be added to the link item.
Is there a way to add the class to the link and not the list item in the call to the fuel_nav?

Lance · July 2012

Not without hacking the code.

Could you not just change your css?


ul#topmenu li a:hover, 
ul#topmenu li.active a{
background-position:0% -50px;
}

Sigal · July 2012

Thank you Lance, had to do a few changes in the html and css to make it work.

If anybody is interested in the solution.

My old html looked like this:


<ul id="topmenu">
 <li><a href="#" class="active"><span>Home</span></a></li>
 <li><a href="#"><span>About</span></a></li>
...
</ul>

That chaned to:


<ul id="topmenu">
 <li class="active"><div><a href="#">Home</a></div></li>
 <li><div><a href="#">About</a></div></li>
...
</ul>

The old css:


ul#topmenu li {
	display: inline;
  margin: 0;
  padding: 0;
}

ul#topmenu li a {
	float: left;
  background: url("../images/template/nav/navleft.gif") no-repeat left top;
  margin: 0;
  padding: 0 0 0 4px;
  text-decoration: none;
}

ul#topmenu li a span {
	float: left;
  display: block;
  background: url("../images/template/nav/navright.gif") no-repeat right top;
  padding: 10px 15px 6px 6px;
  color: #597882;
}

ul#topmenu li a span {float:none; font-weight: bold;}

ul#topmenu li a:hover span, ul#topmenu li.active a {
	color:#FFF;
}

ul#topmenu li a:hover, ul#topmenu li.active {
	background-position:0% -50px;
}

ul#topmenu li a:hover span, ul#topmenu li.active a span {
	background-position:100% -50px;
}

The new css:


ul#topmenu li {
	float: left;
  margin:0;
  padding: 0 0 0 4px;
  height: 32px;
	background:url("../images/template/nav/navleft.gif") no-repeat left top;
}

ul#topmenu li div {
	background: url("../images/template/nav/navright.gif") no-repeat right top;
  padding: 10px 15px 6px 6px;
	height: 16px;
}

ul#topmenu li div a {
	float: left;
  display: block;
  color: #597882;
	text-decoration: none;
	font-weight: bold;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
ul#topmenu li div {float:none; font-weight: bold;}
/* End IE5-Mac hack */

ul#topmenu li.active div a, ul#topmenu li:hover div a {
	color:#FFF;
}

ul#topmenu li:hover, ul#topmenu li.active {
	background-position:0% -50px;
}

ul#topmenu li:hover div, ul#topmenu li.active div {
	background-position:100% -50px;
}

Sigal · July 2012

But that was hardcoding the whole thing, now how do I add the

tag to the li?

Sigal · July 2012

Ok, this code works in hardcoding but when I call fuel_nav the active class again, is not added to the li.

Css:


ul#topmenu li {
display: inline;
margin: 0;
padding: 0;
}

ul#topmenu li a {
float: left;
background: url("../images/template/nav/navleft.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 4px;
text-decoration: none;
}

ul#topmenu li a span {
float: left;
display: block;
background: url("../images/template/nav/navright.gif") no-repeat right top;
padding: 10px 15px 6px 6px;
color: #597882;
}

ul#topmenu li a span {float:none; font-weight: bold;}

ul#topmenu li a:hover span, ul#topmenu li.active a span {
color:#FFF;
}

ul#topmenu li a:hover, ul#topmenu li.active a {
background-position:0% -50px;
}

ul#topmenu li a:hover span, ul#topmenu li.active a span {
background-position:100% -50px;
}

Calling to fuel_nav:

First try:


echo fuel_nav(array('container_tag_id' => 'topmenu', 'item_id_prefix' => 'topmenu_', 'pre_render_func' => 'my_menu_func'));

Second try:


echo fuel_nav(array('container_tag_id' => 'topmenu', 'item_id_prefix' => 'topmenu_', 'pre_render_func' => 'my_menu_func', 'active_class' => 'active'));

The menu that is being rendered:


<ul id="topmenu">
	<li id="topmenu_home" class="first"><a href="http://localhost/clarenssaNewFuel/home" title="Home"><span>Home</span></a></li>
	<li id="topmenu_events"><a href="http://localhost/clarenssaNewFuel/events" title="Events"><span>Events</span></a></li>
	<li id="topmenu_gallery"><a href="http://localhost/clarenssaNewFuel/gallery" title="Gallery"><span>Gallery</span></a></li>
	<li id="topmenu_clarenstourismforum"><a href="http://localhost/clarenssaNewFuel/clarenstourismforum" title="Tourism Forum"><span>Tourism Forum</span></a></li>
	<li id="topmenu_feedback"><a href="http://localhost/clarenssaNewFuel/feedback" title="Feedback"><span>Feedback</span></a></li>
	<li id="topmenu_contact" class="last"><a href="http://localhost/clarenssaNewFuel/contact" title="Contact Us"><span>Contact Us</span></a></li>
</ul>

Where is the active class on the home item? Why is it not there? the url:
http://localhost/clarenssa/home

Sigal · July 2012

Ok, found the problem !!!

The nav array was:
$nav['home'] and not $nav['Home']

Changed that, now at last everything works.

Thank you very much for all the help.

Howdy, Stranger!

Categories

Help with active_class

Comments