CODEWITHSUNDEEP
magento
Prince Kumar
Prince Kumar

Reputation: 498

How to make a toplink active when clicked on it in magento?

I want to make my topmenu link active when clicked on it.It contains Home, Specials(category name),About Us(cms page),FAQ(cms page) and Contact us.I want that when i clicked on any of the upper link,that link will be active.I used one class "active-1" for that.I want any condition to make the toplink active when clicked on it. the code used in topmenu.phtml page whick make you easy to understand.

<style>
.nav-container ul.somelink li.active-1 a{ background:#fa9c04;}
</style>
<?php $_menu = $this->getHtml('level-top') ?>
<?php $page_route=Mage::app()->getRequest()->getRouteName(); ?>
<?php $pageID = Mage::getBlockSingleton('cms/page')->getPage()->getIdentifier();?>
<div class="nav-container">
<ul class="somelink">
<li <?php if($pageID=="home") echo 'class="active-1"';?> ><a href="
<?php echo Mage::getBaseUrl();?>">Home</a></li>
<li <?php if($pageID=="specials.html") echo 'class="active-1"';?>><a href="
<?php echo $this->getUrl('specials.html') ?>">Specials</a></li>
<li <?php if($pageID=="about-us") echo 'class="active-1"';?>><a href="
<?php echo $this->getUrl('about-us') ?>">About Us</a></li>
<li <?php if($pageID=="faq") echo 'class="active-1"';?>><a href="
<?php echo $this->getUrl('faq') ?>">FAQ</a></li>
<li <?php if($page_route=="contacts") echo 'class="active-1"';?>><a href="
<?php echo Mage::getBaseUrl();?>contacts">contact Us</a></li>

</ul>
</div>

the above code works but when i am clearing the cache,then the menu will be active,it is not active at that time i have to clear the cache again and again for making the menu active

Upvotes: 1

Views: 1129

Answers (2)

Marius
Marius

Reputation: 15206

I usually do it from css.
So have the menu like you have it, but add some classes to each item:

<?php $_menu = $this->getHtml('level-top') ?>
<div class="nav-container">
    <ul class="somelink"> 
       <li><a class="home-link" href="<?php echo $this->getUrl('') ?>">Home</a></li>
       <li><a class="specials-link" href="<?php echo $this->getUrl('specials.html') ?>">Specials</a></li>
        <li><a class="about-link"  href="<?php echo $this->getUrl('about-us') ?>">About Us</a></li>
         <li><a class="faq-link" href="<?php echo $this->getUrl('faq') ?>">FAQ</a></li>
         <li><a class="contact-link" href="<?php echo $this->getUrl('contacts') ?>">Contact Us</a></li>   

    </ul>
</div>

Since every magento page has a different class on the <body> element you can use that.

Add the following to your css file. (replace color:red with the properties that highlight your menu item)

.cms-index-index .home-link { /* for homepage*/
    color:red; 
}
.cms-specials .specials-link { /*for specials page */
    color:red
}
....

As a general rule, visit every page in your menu, get the specific class from the body and add a line like this to the css

.[body-class-here] .[link-to-be-selected-class-here] {
    color:red
}

An alternative for the 1.7+ version would be to add the menu items directly in the top menu using the page_block_html_topmenu_gethtml_before event. When adding a menu item, the item supports an 'active' property, where you can put the code to make the link active.

See this for more info

Upvotes: 3

am_skp
am_skp

Reputation: 317

Hi I think this will help's u, try this,

<?php $_menu = $this->getHtml('level-top') ?>
<?php $page_route=Mage::app()->getRequest()->getRouteName(); ?>
<?php $pageID = Mage::getBlockSingleton('cms/page')->getPage()->getIdentifier();?>
<div class="nav-container">
<ul class="somelink"> 
   <li <?php if($pageID=="home") echo 'class="active"';?> ><a href="
<?php echo    Mage::getBaseUrl();?>">Home</a></li>
   <li <?php if($pageID=="specials.html") echo 'class="active"';?>><a href="
<?php echo   $this->getUrl('specials.html') ?>">Specials</a></li>
    <li <?php if($pageID=="about-us") echo 'class="active"';?>><a  href="
<?php echo $this->getUrl('about-us') ?>">About Us</a></li>
     <li <?php if($pageID=="faq") echo 'class="active"';?>><a href="
<?php echo    $this->getUrl('faq') ?>">FAQ</a></li>
     <li <?php if($page_route=="contacts") echo 'class="active"';?>><a href="
<?php echo  Mage::getBaseUrl();?>contacts">contact Us</a></li>

</ul>
</div>

And add active class like this .nav-container ul li.active(color:red);

Upvotes: 0

Related Questions