showing the breadcrumb trail in the menu
- by strangeloops
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
