Page 1 of 1

How to hightlight active menu links in top navigation?

Posted: Thu Mar 26, 2015 9:05 pm
by SWAR
Hello,

categories works fine for me (have orange background) but pages from "informations module" don't have background.
I see, if I click on category, in source there is <li class="active_link"> but if I open some other page, there is no class for li.

http://e-polis.royalmedia.sk/epolis-a-my

Can you help me?

Re: How to hightlight active menu links in top navigation?

Posted: Fri Mar 27, 2015 11:45 pm
by SWAR
bump

Re: How to hightlight active menu links in top navigation?

Posted: Sat Mar 28, 2015 12:07 am
by chulcha

Code: Select all

href = location.pathname.substr(1)
$('#menu a[href*="'+href+'"]').parrent().addClass('active_link')

Re: How to hightlight active menu links in top navigation?

Posted: Sat Mar 28, 2015 12:09 am
by SWAR
Where do I need add this?

Re: How to hightlight active menu links in top navigation?

Posted: Sat Mar 28, 2015 12:28 am
by chulcha
SWAR wrote:Where do I need add this?
:(
header.tpl

after block

Code: Select all

<div id="menu">
.....
</div>
<script>
$(document).ready(function(){
    my code
})
</script>

Re: How to hightlight active menu links in top navigation?

Posted: Sat Mar 28, 2015 1:12 am
by SWAR
Doesn't work..

Code: Select all

 <div id="menu-holder">
<?php if ($categories) { ?>
<div id="menu">
  <ul>
    <li class="home_icon"><a href="/" alt=""></a></li>
    <?php foreach ($categories as $category) { ?>     
    
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
    <?php } ?> 
<li><a href="/epolis-a-my">E-polis a my</a></li>
<li><a href="/blog" style="font-weight: 300; font-size: 17px; font-family: 'Rock Salt', cursive;">Blog</a></li>    
<li><a href="/klienti">Klienti</a></li>
<li><a href="/index.php?route=information/poradna">Poradňa</a></li>
  </ul>
</div>
<script>
$(document).ready(function(){
href = location.pathname.substr(1)
$('#menu a[href*="'+href+'"]').parrent().addClass('active_link')
})
</script>
<?php } ?>

</div> 

Re: How to hightlight active menu links in top navigation?

Posted: Sat Mar 28, 2015 1:49 am
by chulcha
$(document).ready(function(){
my code
})
What is it?

my code:

http://forum.opencart.com/viewtopic.php ... 97#p551997

Re: How to hightlight active menu links in top navigation?

Posted: Sat Mar 28, 2015 1:52 am
by SWAR
I had your code there.. it doesn't work with your code, check it now

btw with your code sliders don't load on homepage

Re: How to hightlight active menu links in top navigation?

Posted: Sat Mar 28, 2015 2:26 am
by chulcha
Sorry

Code: Select all

href = location.pathname.substr(1);
$('#menu a[href*="'+href+'"]').parent().addClass('active_link')

Re: How to hightlight active menu links in top navigation?

Posted: Sat Mar 28, 2015 10:19 am
by SWAR
Works perfect, thank you :)

Re: How to hightlight active menu links in top navigation?

Posted: Sat May 21, 2016 4:04 am
by beebee
chulcha wrote:Sorry

Code: Select all

href = location.pathname.substr(1);
$('#menu a[href*="'+href+'"]').parent().addClass('active_link')
Hi Chulcha,

Thank you for the above script. However, I would like to know if you have any thoughts on doing the same for the links that are in the My Account page? I'm having a tough time figuring this account. The "Account" page doesn't highlight the ACTIVE link. When I hover through the buttons, it changes color, but when I click on it, though it takes me to the correct page, it doesn't show that page as active on the bar.
Image

Thanks in advance for your help!