cancel
Showing results for 
Search instead for 
Did you mean: 

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

SOLVED

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

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!

2 ACCEPTED SOLUTIONS

Accepted Solutions

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

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.

Query solved? Accept as Solution.Thanks
Eric Baily

View solution in original post

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

Goto your topmenu.phtml file app\design\frontend\mypackage\mytheme\template\page\html\topmenu.phtml

Replace your script with the below script:

<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
var n = url.indexOf("/blog"); 
if(n >= 0) {
activePage = 'blog';
}
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>

 

Hope this helps you surely!

Query solved? Accept as Solution.Thanks
Eric Baily

View solution in original post

14 REPLIES 14

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

 

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.

Query solved? Accept as Solution.Thanks
Eric Baily

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

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

image

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!

 

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


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.

Query solved? Accept as Solution.Thanks
Eric Baily

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

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

 

 

 

 

 

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

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

Cheers Smiley Happy

-
Magento Programmer | Was my answer helpful? You can accept it as a solution.

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

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

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

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).

Query solved? Accept as Solution.Thanks
Eric Baily

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

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.

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

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.

Query solved? Accept as Solution.Thanks
Eric Baily