30. August 2022

jQuery:
Aktiven Hauptmenüpunkt erkennen

Je nach dem wie ein Menü in WordPress 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.