Help with active_class

edited July 2012 in News & Announcements
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?

Comments

  • edited 6:13AM
    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.
  • edited 6:13AM
    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.
  • edited 6:13AM
    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.
  • edited 6:13AM
    Opps, sorry I mixed it up with fuel_nav()
  • edited 6:13AM
    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?
  • edited 6:13AM
    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).
  • edited 6:13AM
    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.
  • edited 6:13AM
    If you navigate to home, does it highlight or at least at the active class to the li element?
  • edited 6:13AM
    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; }
  • edited 6:13AM
    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.
  • edited 6:13AM
    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?
  • edited 6:13AM
    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; }
  • edited 6:13AM
    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; }
  • edited 6:13AM
    But that was hardcoding the whole thing, now how do I add the
    tag to the li?
  • edited 6:13AM
    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
  • edited 6:13AM
    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.
Sign In or Register to comment.