Je nach dem wie ein Menü aufgebaut ist, lässt sich nicht direkt sagen zu welchem Hauptmenüpunkt die aktuelle Unterseite gehört. Mit folgendem kleinen Script lässt sich das Problem lösen:
jQuery(document).ready(function($)
{
$('#hauptmenue .sub-menu a').each(function()
{
var nav_item_link=$(this);
var nav_item_url=nav_item_link.attr('href');
if(nav_item_url==window.location.href)
{
var top_parent=nav_item_link.parents('.menu-item');
top_parent.addClass('active');
}
});
});
Zunächst prüfen wir alle Links der Unternavigation und gleichen diese mit der aktuellen URL ab. Sind die URLs gleich, markieren wir den Hauptmenüpunkt mit der CSS-Klasse active
. Die Selektoren müssen natürlich entsprechend dem jeweiligen Aufbau der Website angepasst werden.