Приветствую.
На сайте имеется меню категорий товаров, у него не было подсветки выбранного пункта. Эту проблему решил с помощью JS, на выбранный пункт меню ставлю class="active" и этому классу определенный бэкграунд.
Но, у некоторых пунктов есть подменю при выборе которого так же главному пункту меню надо добавить класс active.
Кто может помочь или подсказать в каком направлении двигаться, уже перепробовал кучу вариантов но пока без результатов.
Варианты подойдут любые, главное работоспособные.
Вот структура меню:
Вот JS с помощью которого подставляю класс главному пункту:
На сайте имеется меню категорий товаров, у него не было подсветки выбранного пункта. Эту проблему решил с помощью JS, на выбранный пункт меню ставлю class="active" и этому классу определенный бэкграунд.
Но, у некоторых пунктов есть подменю при выборе которого так же главному пункту меню надо добавить класс active.
Кто может помочь или подсказать в каком направлении двигаться, уже перепробовал кучу вариантов но пока без результатов.
Варианты подойдут любые, главное работоспособные.
Вот структура меню:
| Код |
|---|
<ul class="main_nav_ul">
<?
foreach ($arResult["TOP_MENU"] as $arItem):
$class="";
if($arItem["TITLE"]=="СКИДКИ"){
$class="red";
}
?>
<li class="mn_li <?=$class?>">
<span class="drop_arr"></span>
<a class="alink" href="<?= $arItem["LINK"] ?>"><?= $arItem["TITLE"] ?></a>
<div class="drop_box <? if ($arItem["RIGHT"]):?>dr<? endif ?>">
<ul>
<? foreach ($arItem["ITEMS"] as $index => $subMenu): ?>
<? if ($index == 0):?> <li><a class="back_menu">Вернуться назад</a></li> <? endif ?>
<li><a href="<?= $subMenu["LINK"] ?>"><?= $subMenu["TITLE"] ?></a></li>
<?= ($index+1)%6 == 0 ? "</ul><ul>" : "";?>
<? endforeach ?>
</ul>
</div>
</li>
<? endforeach ?>
</ul>
|
| Код |
|---|
<sc ript>
(function($){
//find active url in menu
var $curURL = document.location.href;
$('.mn_li').each(function() {
var $linkHref = $(this).find('.alink').attr('href');
if ($curURL.indexOf($linkHref) > -1) {
$(this).addClass('activelink');
}
});
})(jQuery);
</sc ript>
|
