Подсветка активного пункта меню.

IgorC · 25 жовтня 2018

Добрый вечер!

Помогите, пожалуйста, решить 2 задачи!

1. Для подсветки активного пункта меню добавили в header.tpl скрипт и прописали стили подсветки в stylesheet.css, работает, но когда url заканчивается слешем /, то подсветку перекидывает на главную.

Вот скрипт:

<script type="text/javascript">
			$(function () {
				var location = window.location.href;
				var cur_url = '/' + location.split('/').pop();
				
				$('.topcaca li').each(function () {
					var link = $(this).find('a').attr('href');
					
					if (cur_url == link)
					{
						$(this).addClass('current');
					}
				});
			});
		</script>

2. Еще момент, как выделить количество товаров в категории другим цветом?

Заранее благодарен за помощь!

P.S. Сайт https://igro.by/

Змінено 25 жовтня 2018 користувачем IgorC

wbDev · 25 жовтня 2018

13 минут назад, IgorC сказал:

Как выделить количество товаров в категории другим цветом?

В контроллере категории скобки прописаны

'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),

С этой строкой работайте чтобы задать цвет

IgorC · 25 жовтня 2018

3 минуты назад, wbDev сказал:
В контроллере категории скобки прописаны
'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
С этой строкой работайте чтобы задать цвет

Спасибо, буду разбираться.

Змінено 25 жовтня 2018 користувачем IgorC

anboza · 25 жовтня 2018

пример подчеркивания пунктов меню.

Спойлер


<ul id="menu">
    <li><a href="javascript:;">Главная</a>
    </li>
    <li><a href="javascript:;">Категории</a>
    </li>
    <li class="active"><a href="javascript:;">О нас</a>
    </li>
    <li><a href="javascript:;">Контакты</a>
    </li>
    <li><a href="javascript:;">Выйти</a>
    </li>
    <li id="line"></li>
</ul>



<script>
$(function () {
    var $menu = $("#menu");
    $line = $("#line"),
    $indicator = true,
    $active = $menu.find(".active"),
    default_pos = $active.offset().left - $menu.offset().left,
    default_width = $active.outerWidth();

    $line.css({left: default_pos,width: default_width});    

    $("#menu li").hover(function () {
        if (this===$active.get(0)) return;
        var self = $(this);                
        var diff = self.offset().left - $menu.offset().left;
        $line.stop().animate({
            width: self.outerWidth(),
            left: diff
        }, 400);
    }, function () {
        if (this===$active.get(0)) return;
        $line.stop().animate({
            width: default_width,
            left: default_pos
        },400);
    });

});
</script>


CSS

#menu {
    padding: 0;
    margin: 0;
    position: relative;
    list-style: none;
    height: 40px;
    background: #000;
    font: 12px/14px Tahoma, Helvetica, sans-serif;
}
#menu li {
    margin: 0 0 0 0;
    position: relative;
    display: inline-block;
    height: 14px;
    padding: 12px 15px 14px;
}
#menu li a {
    color: #fff;
    text-decoration: none;
    margin: 0;
}
#menu li#line {
    display: block;
    position: absolute;
    content:'';
    bottom: 0;
    left: 0;
    text-indent: -10000px;
    /* Шизофрения :) */
    height: 3px;
    width: 0;
    padding: 0;
    background: #fc0;
}

IgorC · 25 жовтня 2018

9 минут назад, anboza сказал:

пример подчеркивания пунктов меню.

Показать контент



<ul id="menu">
    <li><a href="javascript:;">Главная</a>
    </li>
    <li><a href="javascript:;">Категории</a>
    </li>
    <li class="active"><a href="javascript:;">О нас</a>
    </li>
    <li><a href="javascript:;">Контакты</a>
    </li>
    <li><a href="javascript:;">Выйти</a>
    </li>
    <li id="line"></li>
</ul>



<script>
$(function () {
    var $menu = $("#menu");
    $line = $("#line"),
    $indicator = true,
    $active = $menu.find(".active"),
    default_pos = $active.offset().left - $menu.offset().left,
    default_width = $active.outerWidth();

    $line.css({left: default_pos,width: default_width});    

    $("#menu li").hover(function () {
        if (this===$active.get(0)) return;
        var self = $(this);                
        var diff = self.offset().left - $menu.offset().left;
        $line.stop().animate({
            width: self.outerWidth(),
            left: diff
        }, 400);
    }, function () {
        if (this===$active.get(0)) return;
        $line.stop().animate({
            width: default_width,
            left: default_pos
        },400);
    });

});
</script>


CSS

#menu {
    padding: 0;
    margin: 0;
    position: relative;
    list-style: none;
    height: 40px;
    background: #000;
    font: 12px/14px Tahoma, Helvetica, sans-serif;
}
#menu li {
    margin: 0 0 0 0;
    position: relative;
    display: inline-block;
    height: 14px;
    padding: 12px 15px 14px;
}
#menu li a {
    color: #fff;
    text-decoration: none;
    margin: 0;
}
#menu li#line {
    display: block;
    position: absolute;
    content:'';
    bottom: 0;
    left: 0;
    text-indent: -10000px;
    /* Шизофрения :) */
    height: 3px;
    width: 0;
    padding: 0;
    background: #fc0;
}

Спасибо за пример, буду пробовать.

IgorC · 25 жовтня 2018

Пробую разобраться еще с текущим скриптом, поменял на такой вид:

		<script type="text/javascript">
$(function () {
    var location = window.location.href;
  
    $('.topcaca li').each(function () {
        var link = $(this).find('a').attr('href');
  
        if (location.indexOf(link) !== -1)
        {
            $(this).addClass('current');
        }
    });
});
</script>

теперь выделяется текущий пункт меню с / и без в url и главная...

что в этом скрипте можно еще подправить?

Спасибо.

Змінено 25 жовтня 2018 користувачем IgorC

anboza · 25 жовтня 2018

включите меню, его нет у меня

IgorC · 25 жовтня 2018

По первому пункту разобрался сам, в текущем скрипте (изменил и добавил строку), сработал вот такой:

<script type="text/javascript">
        $(function () {
				var location = window.location.href;
				var cur_url = '/' + location.split('/').pop();
			
				$('.topcaca li').each(function () {
					var link = $(this).find('a').attr('href');
					
					
				 if (location.indexOf(link) !== -1)
					{
					    $(".current").removeClass("current");
						$(this).addClass('current');
					}
				});
			});
</script>

Змінено 25 жовтня 2018 користувачем IgorC

IgorC · 25 жовтня 2018

Мне вот интересно, на сайте столько профи, а дать наводку на изменение одной строки по текущему скрипту никто не захотел.

Я понимаю, что никто никому ничего не должен, но я бы помог человеку в такой 5 минутной (для профи) ситуации разобраться за спасибо! Это же профильный форум.

Все за бабло в этом мире)

P.S. Спасибо ребятам, кто писал свои варианты помощи.

P.P.S. Не халявщик, если что!

Змінено 25 жовтня 2018 користувачем IgorC

anboza · 26 жовтня 2018

3 часа назад, IgorC сказал:

Все за бабло в этом мире)

вы очень не правы. чтобы выискивать логику в "чужих" скриптах, нужно вникнуть в суть вопроса. Так вышло, что ни у кого, времени не нашлось.

Думаю, если бы вопрос до завтра не решился,вы бы отписали и вам бы подсказали, в том числе и я.

как-то вы зря на всех обиделись

Вхід

Подсветка активного пункта меню.

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information