Page 1 of 1

Top menu bar highlight selected category and stay selected

Posted: Fri May 29, 2015 9:40 am
by sunsys
I have made some cosmetic changes in the top menu bar and now I would somebody to please help me out with a small problem that I face. Please see the image below.
selectandstay-1.jpg

selectandstay-1.jpg (22.33 KiB) Viewed 1720 times


I want that, after the user selects a "category"(shown in red box above) that selected "category" should remain highlighted even after the mouse has been moved away so that the user comes to know what "category" he has selected.
I hope I have explained it clearly. Can someone please show or guide me how to do this.

Thank You for your time.

Re: Top menu bar highlight selected category and stay select

Posted: Sun Jun 28, 2015 8:23 am
by sunsys
BUMP...
Really, nobody even after a month ?

Re: Top menu bar highlight selected category and stay select

Posted: Sun Jun 28, 2015 1:58 pm
by deepvision
I can offer you only quick & dirty solution :)

1. in the /catalog/view/theme/default/stylesheet/stylesheet.css add:

Code: Select all

#menu .nav > li.active {
    background:#349ECA;
}
2. In the /catalog/view/theme/default/template/common/header.tpl
after

Code: Select all

<?php foreach ($categories as $category) { ?>
add

Code: Select all

          <?php
          $is_active = false;
          if(isset($_GET['path'])){
              list($category_id) = explode('_',$_GET['path']);
              if(preg_match('~&path='.$category_id.'(&|_|$)~',$category['href'])){
                  $is_active = true;
              }
          }
          ?>
change

Code: Select all

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
to

Code: Select all

<li class="dropdown<?php if($is_active):?> active<?php endif;?>"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
and change

Code: Select all

<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
to

Code: Select all

<li<?php if($is_active):?> class="active"<?php endif;?>><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>

Re: Top menu bar highlight selected category and stay select

Posted: Sun Jun 28, 2015 3:20 pm
by deepvision
The javascript solution might be better:

1. Add the following code to the /catalog/view/javascript/common.js

Code: Select all

<script>
$(document).ready(function() {
    if(document.URL.match(/&path=(\d+)(_|&|$)/)){
        $('a[href$="path='+RegExp.$1+'"]').each(function(){
            $(this).parent().addClass('active');
        })
    }else if(document.URL.match(/[^/]+\/([^/]+)(\/|$)/)){
        $('a[href$="/'+RegExp.$1+'"]').each(function(){
            $(this).parent().addClass('active');
        })
    }
});    
</script>
2. Add the same styles as before to the /catalog/view/theme/default/stylesheet/stylesheet.css

Code: Select all

#menu li.active {
    background:#349ECA ;
}

Re: Top menu bar highlight selected category and stay select

Posted: Sun Jun 28, 2015 10:33 pm
by sunsys
@deepvision: Thank for your reply.

BTW the example is of OC-1564, and not of OC-20xx, I hope you got that. Now if I use your 2nd solution(java script) then I believe that 1st solution is not required. Well I have as you have posted but there is no effect, the blue box does not stay fixed when I choose category and move the mouse away.

PS: Please can you also give me a solution for the same for OC-2031.

Re: Top menu bar highlight selected category and stay select

Posted: Sun Jun 28, 2015 11:50 pm
by deepvision
Yes, the 1st solution is not required.
The 2nd one works fine with the OC-2031. Just make sure the menu background color is different from the active menu background in the new css.

P.S. Updated the javascript to work with SEO enabled URLs as well.

Re: Top menu bar highlight selected category and stay select

Posted: Mon Jun 29, 2015 12:03 am
by deepvision
The same javascript works for me in the latest 1.5.6.4
And here is the css code for the default 1.5.6.4 theme:

Code: Select all

#menu li.active >a{
    background:black;
    border-radius:5px;
}

Re: Top menu bar highlight selected category and stay select

Posted: Mon Jun 29, 2015 11:18 am
by sunsys
deepvision wrote:The same javascript works for me in the latest 1.5.6.4
And here is the css code for the default 1.5.6.4 theme:

Code: Select all

#menu li.active >a{
    background:black;
    border-radius:5px;
}
Thanks a ton deepvision, it is working 100% perfect in both versions of OC, no issues till now.

Re: Top menu bar highlight selected category and stay select

Posted: Fri Oct 02, 2015 9:27 am
by sunsys
@Deepvision: This worked fine for 3 months and I feel that I must have added some ext that has stopped this highlight and stay function from working and I don't know what I have done to cause this, I have PM'd my site url to you, please can you kindly just have a look as to what could have stop working.

Thank you for your time.

Re: Top menu bar highlight selected category and stay select

Posted: Sat Oct 03, 2015 1:00 pm
by deepvision
I don't see any PM

Re: Top menu bar highlight selected category and stay select

Posted: Sun Oct 04, 2015 2:04 am
by sunsys
deepvision wrote:I don't see any PM
You must have received a mail from opencart forums that you have a new PM also you can login to your pm box and you will see it. I have just checked and seen that you have not yet retrieved my PM.

Re: Top menu bar highlight selected category and stay select

Posted: Thu Oct 15, 2015 12:10 pm
by deepvision
sunsys wrote:
deepvision wrote:I don't see any PM
You must have received a mail from opencart forums that you have a new PM also you can login to your pm box and you will see it. I have just checked and seen that you have not yet retrieved my PM.
No, there is no unread emails in my PM. Every time I get a notification, then login and read one.
None from you. Are you sure it is for me? :) Or maybe there is a forum bug.