Jump to content
IgorC

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

Recommended Posts

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

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

Edited by IgorC

Share this post


Link to post
Share on other sites
13 минут назад, IgorC сказал:

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

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

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

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

Share this post


Link to post
Share on other sites
3 минуты назад, wbDev сказал:

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


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

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

 

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

Edited by IgorC

Share this post


Link to post
Share on other sites

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

Спойлер

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

 

 

Share this post


Link to post
Share on other sites
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;
}

 

 

 

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

Share this post


Link to post
Share on other sites

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

 

		<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

Edited by IgorC

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

<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

 

 

Edited by IgorC

Share this post


Link to post
Share on other sites

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

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

 

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

 

 

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

 

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

Edited by IgorC

Share this post


Link to post
Share on other sites
3 часа назад, IgorC сказал:

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

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

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

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

 

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.