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

[Meez]

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?

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 ?>

Does anybody know how i can get this to work?

Thanks!

[AddWebSolution]

Please open topmenu.phtml file from the below path and follow the further steps:
app\design\frontend\mypackage\mytheme\template\page\html\topmenu.phtml

Step 1:- Replace your code with following coding.

<?php
$_currentUrl = Mage::helper('core/url')->getCurrentUrl();
$_homeUrl = Mage::helper('core/url')->getHomeUrl();
?>
<?php $_menu = $this->getHtml('level-top') ?>

<?php if($_menu): ?>
<nav id="nav">
<ol class="nav-primary">
<li class="home<?php if ($_currentUrl === $_homeUrl):?> active<?php endif;?>"><?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home')->toHtml(); ?> </li>
<?php echo $_menu ?>
<li class="contacts<?php if ($_currentUrl === $_homeUrl.'contacts'):?> active<?php endif;?>">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('contacts')->toHtml(); ?> /* add your static block after this if condition and change your Identifier name */
</li>
</ol>
</nav>
<?php endif ?>

Step 2:- Create CMS Page and add your Content as your requirement.

Step 3:- Create CMS Static Block and add create CMS page link using insert Widget. Further, select CMS Page Link.

Step 4:- Later, call this static block in your custom menu .phtml file.

Step 5:- For creating new menu add the li tag as given in above code. Please add static block Identifier name inside after if condition.

Let me know if you face any query/concern regarding this.

[Meez]

Hi thanks for your answer. Look at my image below. This is my structure:

Except 'SHOP', they are all CMS links. 'INTRODUCTION' is home. Currently i have two static blocks: 

• home-link (with the INTRODUCTION-link)
• main-cms-links (the rest of the CMS links)

Regarding your example. How do i integrate main-cms-links (the rest of the CMS links), with all the active functionality?

Thanks!

[AddWebSolution]

Follow the below steps for solving your purpose:

Step 1 :- Add Static Block add your custom CMS Page using "insert Widget".

Step 2 :- Apply this code
Ex:-

<li>{{widget type="cms/widget_page_link" template="cms/widget/link/link_block.phtml" page_id="YOUR CMS PAGE ID"}}</li>

Step 3 :- Goto Your app\design\frontend\mypackage\mytheme\template\page\html\topmenu.phtml 

Edit topmenu.phtml (your menu file).

Step 4 :- If you want to show only custom menu after  <ul>.

Call your Static Block like this:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('Your Identifier ')->toHtml(); ?>

Step 5 :- If you want to show dynamic menu and custom menu both, your code show look like this.

<?php if($_menu):?>
<nav class="nav-primary">
<ul>
<?php echo $_menu ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('custom_menu')->toHtml(); ?>
</ul>
</nav>
<?php endif ?>

Step 6 :- At the end of your code in the same file, paste the script provided below:

<script>
jQuery(document).ready(function(){
jQuery(function() {

var url = window.location.pathname; //sets the variable "url" to the pathname of the current window
var activePage = url.substring(url.lastIndexOf('/') + 1); //sets the variable "activePage" as the substring after the last "/" in the "url" variable
jQuery('.nav-primary span a').each(function () { //looks in each link item within the primary-nav list
var linkPage = this.href.substring(this.href.lastIndexOf('/') + 1); //sets the variable "linkPage" as the substring of the url path in each &lt;a&gt;

if (activePage == linkPage) { //compares the path of the current window to the path of the linked page in the nav item
jQuery(this).parent().addClass('active'); //if the above is true, add the "active" class to the parent of the &lt;a&gt; which is the &lt;li&gt; in the nav list
}
});

});
});
</script>

Let us know in case of any query/concern regarding this.

[Meez]

1)

I think similar to your Step 5 i have my menu structure. Here is my testsite. My topmenu.phtml looks like this now (i already added your jQuery code), but i changed:

.nav-primary span a

a to: 

.nav-primary li a

<?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>
<?php endif ?>

<script>
jQuery(document).ready(function(){
jQuery(function() {

var url = window.location.pathname; //sets the variable "url" to the pathname of the current window
var activePage = url.substring(url.lastIndexOf('/') + 1); //sets the variable "activePage" as the substring after the last "/" in the "url" variable
jQuery('.nav-primary li a').each(function () { //looks in each link item within the primary-nav list
var linkPage = this.href.substring(this.href.lastIndexOf('/') + 1); //sets the variable "linkPage" as the substring of the url path in each &lt;a&gt;

if (activePage == linkPage) { //compares the path of the current window to the path of the linked page in the nav item
jQuery(this).parent().addClass('active'); //if the above is true, add the "active" class to the parent of the &lt;a&gt; which is the &lt;li&gt; in the nav list
}
});

});
});
</script>

But now they get all .active class...?

2) Why do i have to add cms-links with a widget? Is it neccesary to make it work? Step 1 :- Add Static Block add your custom CMS Page using "insert Widget". 

Because for example, my 'main-cms-links' -static block code looks like this:

<li class="level0 nav-3"><a class="level0" title="Giftcard" href="{{store url="giftcard"}}">Giftcard</a></li>
<li class="level0 nav-4"><a class="level0" title="Ambassadors" href="{{store url="about-magento-demo-store"}}">Ambassadors</a></li>
<li class="level0 nav-5"><a class="level0" title="Blog" href="{{store url="about-magento-demo-store"}}">Blog</a></li>
<li class="level0 nav-6"><a class="level0" title="#Social" href="{{store url="about-magento-demo-store"}}">#Social</a></li>
<li class="level0 nav-7"><a class="level0" title="About" href="{{store url="about-magento-demo-store"}}">About</a></li>

What do i have to change to make it work?

Thanks!!!

[GauravMehta04]

Are you finding silimmar like this. Show CMS pages into Navigation menu Or footer areas.

Cheers

[Meez]

no thats not the solution because you don't have that option by default.. I am alomost there with the answer of AddWeb Solution! I wait for their reply, to tackle the last struggles. Thanks

[AddWebSolution]

2) Why do i have to add cms-links with a widget? Is it neccesary to make it work? Step 1 :- Add Static Block add your custom CMS Page using "insert Widget".

Yes, this is necessary to make it work. The way you are following is correct, but it would provide static results.

Your Code:

<li class="level0 nav-3"><a class="level0" title="Giftcard" href="{{store url="giftcard"}}">Giftcard</a></li>

Replace with the below code:

<li class="level0 nav-3"><a class="level0" title="Giftcard" href="http://domain.com/giftcard">Giftcard</a></li>

NOTE: If you make the above changes than it would provide you static results.

For Dynamic results you need to follow the method I have already provided you before. i.e "Insert widget" (This is the better way to implement CMS page link in Magento).

[Meez]

Hi thanks a lot i am almost there! See here the progress.

I am facing 2 issues:

1) If i insert my Homepage link via Insert Widget, i really have to navigatie to [ /home ]. But my homepage is [ / ] (/nothing). So if i go to my homepage, it goes to [ / ] (/nothing) and the .active class is not added with this solution.

>> Is there a workaround for this?

2) I have a Wordpress blog connextion with Fishpig extension. My Blog-link [ /blog ] is not a CMS-link. How can i make a Dynamic 'custom' link which will work the same as the CMS links for the Blog-link?

Thanks a lot for your support.

[AddWebSolution · Accepted solution]

1) If i insert my Homepage link via Insert Widget, i really have to navigatie to [ /home ]. But my homepage is [ / ] (/nothing). So if i go to my homepage, it goes to [ / ] (/nothing) and the .active class is not added with this solution.

>>  I have one solution for this problem.

Goto your topmenu.phtml add home link look like:

<li><a href="<?php echo Mage::getBaseUrl();?>">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home')->toHtml(); ?>   // add your home Page Static Block
</a></li>

Goto your Home Static Block, edit your content and add only menu name you want to dispaly on frontend menu (e.g "Introduction") then save configration.

This would solve your home link [ / ] (/nothing) problem.

2) I have a wordpress blog connection with Fishpig extension. My Blog-link [ /blog ] is not a CMS-link. How can i make a Dynamic 'custom' link which will work the same as the CMS links for the Blog-link?

>> Please follow the below steps to find solution:

Step1:- Add New CMS Page and fill all the fields. 

For E.g: Page Title "Blog", URL Key "blog".
After Goto Content Tab, Show/Hide Editor >> Insert Widget Button.

Step2:- Select Widget Type "WordPress > Recent Posts", fill other fields which you want to display on frontend. 

Further, click on "Insert Widget" button. 

Step3:- Your CMS Page content Looks like this: 

{{widget type="wordpress/sidebar_widget_posts" title="Recent Posts" number="5" template="wordpress/sidebar/widget/posts.phtml"}}

Then save your configration.

Step4:- Goto Your Custom Menu Static Block and open it. Add CMS Page using "Insert Widget" as you want to display on frontend.

Hope this solves your problem.