views:

375

answers:

2

I have a global menu and local menu for the products. I would like to highlight 'our products' link when I am showing the products and also highlight the name of the product and its subpages in the local menu so the highlighted links will work as the breadcrumbs. How can I do this with jquery and codeigniter or just jquery. Here is the code of the local menu:

<ul id="accordion">
<li class="pm"><h2><?php echo anchor('/products/thassos_wonder', 'Thassos Wonder+');?></h2>
<ul class="product_menu">
    <h2><?php echo anchor('/products/thassos_wonder', 'Thassos Wonder+');?></h2>
    <h2><?php echo anchor('/products/thassos_wonder_advantages', 'Thassos Wonder+ Advantages');?></h2>
    <h2><?php echo anchor('products/thassos_wonder_associated_products', 'Associated Products');?></h2>
    <h2><?php echo anchor('/products/thassos_wonder_brochure', 'Download TW+ Brochure');?></h2>
</ul>
</li>


<li class="pm"><h2><?php echo anchor('/products/marble_wonder', 'Marble Wonder+');?></h2>
<ul class="product_menu" id="mwmenu">
    <h2><?php echo anchor('/products/marble_wonder', 'Marble Wonder+');?></h2>
    <h2><?php echo anchor('/products/marble_wonder_advantages', 'Marble Wonder+ Advantages');?></h2>
    <h2><?php echo anchor('products/marble_wonder_associated_products', 'Associated Products');?></h2>
    <h2><?php echo anchor('/products/marble_wonder_brochure', 'Download MW+ Brochure');?></h2>
</ul>
</li>

<li class="pm"><h2><?php echo anchor('/products/polybond', 'Poly Bond+');?></h2>
<ul class="product_menu" id="pbmenu">
    <h2><?php echo anchor('/products/polybond', 'Poly Bond+');?></h2>
    <h2><?php echo anchor('/products/polybond_advantages', 'PolyBond+ Advantages');?></h2>
    <h2><?php echo anchor('products/polybond_areas_of_applications', 'Areas of Applications');?></h2>
    <h2><?php echo anchor('/products/polybond_brochure', 'Download Polybond+ Brochure');?></h2>
</ul>
</li>

Here is the jquery code for the local menu:

$(function() {
var pathname = location.pathname;
var highlight;
//highlight home
if(pathname == "/"){
    highlight = $('ul#accordion > li:first > a:first');
    $('a.active').parents('li').addClass('active');
}
else {
    var path = pathname.substring(1);
    if (path)
       highlight = $('ul#accordion a[href$="' + path + '"]');
}
highlight.attr('class', 'active');

// hide 2nd, 3rd, ... level menus
$('ul#accordion ul').hide();

// show child menu on click
$('ul#accordion > li > a.product_menu').click(function() {
    //minor improvement
    $(this).siblings('ul').toggle("slow");
    return false;
});

//open to current group (highlighted link) by show all parent ul's
$('a.active').parents('ul').show();

//if you only have a 2 level deep navigation you could
//use this instead
//$('a.selected').parents("ul").eq(0).show();

});

Still learning jquery so type of help would be appreciated. Thanks - G

+1  A: 

You can do this a couple different ways, one way is to always ID your body tag and anchor tags and use CSS selectors to do the job.

I like to ID my body tags with the name of the controller, it comes in very handy.

In this case your body tag would have the ID set to 'products', combine this with IDs on your anchors and you can use CSS like this

#products #productLink {
    color: #ff8833;
}

Another way to do it would be a helper function in CI which would check the link against the current URI and add an 'active' class to the anchor, something like below.

function menu_anchor($uri = '', $title = '', $attributes = array()) 
{
    if ( $uri == uri_string() )
    {
        $attributes['class'] = ( isset($attributes['class']) ) ? ' active' : 'active';
    }

    return anchor($uri, $title, $attributes);
}
Dyllon
Would I have to do this manually for each link then?
strangeloops
Use the menu_anchor function in your view in place of the anchor function.
Dyllon
hey Dyllon, could you point me to more detailed instructions on how to implement any one of the above. Bit unsuccessful.
strangeloops
create a file called `MY_url_helper.php` in your helpers directory and add the menu_achor function to it. Then in your view change all references to the anchor() function to the menu_anchor() function where you want the active class to be applied. Lastly make sure you have an active class in your CSS
Dyllon
Ohhh thankyou Dyllan, I had my file named completely different. Although would you happen to know why am I getting this error on this page: http://www.obsia.com/products/thassos_wonder_advantages/I do have my applications folder name changed.
strangeloops
That's one of the pitfalls of posting untested code, I fixed the function above and it should work error free now but is still untested.
Dyllon
Thanks Dyllan, the code is error free but it does not do anything. I will see if I can get the other method to work :)
strangeloops
Would anyone know how to make this work with jquery?
strangeloops
A: 

I have created a helper function that helps create breadcrumbs automatically from URL in codeigniter framework.

for details please check out the following post -

http://www.thephpx.com/2010/05/12/codeigniter-helper-create-breadcrumb-from-url/

thanks,

faisal ahmed http://www.thephpx.com/

thephpx