Add active class to CMS page links in Top menu (static block links)

Question

In this Topmenu i have a custom home-link and some other CMS-links i insert through a Static Block.

How can i give those CMS-page menu items an active class?

--- Update 1 ---

I found this answer, but i can't get it to work?

I adjust app\design\frontend\mypackage\mytheme\template\page\html\topmenu.phtml like this:

<?php $_menu = $this->getHtml('level-top') ?>

<?php if($_menu): ?>
    <nav id="nav">
        <ol class="nav-primary">
            <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home-link')->toHtml(); ?>
            <?php echo $_menu ?>
            <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('main-cms-links')->toHtml(); ?>
        </ol>
    </nav>

    <script>
        var currentPageId = '';
        <?php if (Mage::getSingleton('cms/page')): ?>
        currentPageId = '<?php echo Mage::getSingleton('cms/page')->getIdentifier(); ?>'
        <?php endif; ?>
        if (jQuery('#'+currentPageId).is('li')) {
           jQuery('#'+currentPageId).addClass('active');
        }
    </script>

<?php endif ?>

Answer 1

the best way would be to add some logic to the navigation to handle your additonal links.

However, easiest way would be to just give the links unique classes or ids and then activate them based on the body class:

body.cms-page-view.cms-about .about-us-button {color:red;}

body.cms-index-index.cms-home .introduction-button {color:red;}

Answer 2

Is your link inside the static block just a regular hyperlink

//other hyperlinks...
<a href="#">About Us</a>

If so, a nasty hack would be to add a class/id (ie class="about-us-active") to your CMS "About Us" link and on the content of the about us cms page add

<style>
.about-us-active {color:#e76909;}
</style>

so the class style is only added when about us page.

Answer 3

You can add active class also with jquery

/***********For Active li Class************/    
    $(".maintabsindex ul li").click(function(){
    $(".maintabsindex ul li").removeClass("active");
    $(this).addClass("active");
    });

Answer 4

Generally you always want to do conditional checking on the server side if possible and in turn add an 'active' class to the navigation link when you are on that page / view.

It's not just cms pages though, sometimes you'll also want to check if you are on the contacts page, or some other view like a blog.

I've written a Helper class for managing active states in a Magento custom nav bar: https://www.tenpixelsleft.com/add-active-class-contacts-cms-page-link-magento-custom-navigation-menu/

Essentially you can then have something like this in the template:

<?php $navigationHelper = Mage::helper('utils/navigation'); ?>

<nav id="nav">
    <ul class="nav-menu">

        <!-- About Us CMS menu item start -->
        <li class="nav-item <?php echo $navigationHelper->isCmsPageActive('about-us') ? 'active' : '';?>">
            <a class="nav-link" href="<?php echo $this->getUrl('about-us') ?>">
                About Us
            </a>
        </li>
        <!-- About Us CMS menu item end -->

        <!-- Contacts menu item start -->
        <li class="nav-item <?php echo $navigationHelper->isContactsActive() ? 'active' : '';?>">
            <a class="nav-link" href="<?php echo $this->getUrl('contacts') ?>">
                Contact Us
            </a>
        </li>
        <!-- Contacts menu item end -->

        <!-- Blog menu item start -->
        <?php if(Mage::helper('blog')->isEnabled()):?>
            <li class="nav-item <?php echo $navigationHelper->isBlogActive() ? 'active' : '';?>">
                <a class="nav-link" href="<?php echo $this->getUrl(Mage::helper('blog')->getRoute());?>">
                    <?php echo Mage::getStoreConfig('blog/blog/title');?>
                </a>
            </li>
        <?php endif;?>
        <!-- Blog menu item end -->

    </ul>
</nav>

Hope you find it useful.

Answer 5

We can add CMS-page menu items to active class.

In this Topmenu i have added CMS-links Block and it display with Static Block.

I have to create jQuery for add active claas in url

<?php if ($block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block-name')->toHtml()) { ?>
    <div class="top-menu-nav">
        <ul>
            <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block-name')->toHtml(); ?>
        </ul>
    </div>
<?php } ?>

<!-- Add custom block Active urls -->

<script type="text/javascript">
require(['jquery', 'jquery/ui'], function($){
  $(document).ready( function() {
    var url = window.location.href; //sets the variable "url" to the pathname of the current window
    var lastChar = url.substr(url.length - 1); 
    if(lastChar == "/") {url = url.substring(0, url.length-1);}
    //console.log(url);
    $('.top-menu-nav a.active').removeClass('active');
    $('.top-menu-nav a').each(function () { 
        url2 = $(this).attr('href');
        if(url2.substr(url2.length - 1) == "/"){ url2 = url2.substring(0, url2.length-1);  } 
        //console.log(url2);
        if(url2 == url){
            $(this).addClass('active');
        }
    });
  });
});
</script>

Answer 6

 $currentPageId = "";
                if (Mage::getSingleton('cms/page'))
                     $currentPageId =  Mage::getSingleton('cms/page')->getIdentifier();

                $service_active =  ($currentPageId == "our-services")?"active":"";
                $html1 =  '<li id="our-services" class="'. $service_active.' level0"><a href="'.$this->getUrl('our-services').'">'.$this->__('Our Services') .'</a></li>';
                //$this->getUrl('our-services') our-services this is the cms page slug ,You can give your own link. if you want to replace it with static url replace $this->getUrl('our-services') with eg http://localhost:8080/magento/index.php/our-services/;

Here is the solution for this question. http://subodhdhukuchhu.com.np/customizing-the-magento-top-menu/