Перейти к содержанию
IgorC

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

Рекомендуемые сообщения

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

Помогите, пожалуйста, решить 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/

 

слеш не работает.jpg

без слеш.jpg

цвет в категории.jpg

Изменено пользователем IgorC

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
13 минут назад, IgorC сказал:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, wbDev сказал:

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


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

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

 

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

Изменено пользователем IgorC

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Спойлер

<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;
}

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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;
}

 

 

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

		<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 и главная...

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

 

Спасибо.

слеш и 2 подсветки.jpg

Изменено пользователем IgorC

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<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>

 

подсветка слеш работает.jpg

 

 

Изменено пользователем IgorC

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

 

 

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

 

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

Изменено пользователем IgorC

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 часа назад, IgorC сказал:

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

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

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

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

 

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.