@All Couchies,

Greetings!!!

I have a menu with the following structure:

|- Home
|- About
|-- Concept
|-- FAQ
|- Services
|-- How We Work
|-- Help
|- Search
|- Contact

The class="active" is implemented to select the desired page.

I have templates for Home, Search and Contact and hence implementing the class="active" is not an issue and can be implemented easily by:

Code: Select all

<cms:if k_template_name=='working.php'>class="active"</cms:if>

But what I want to achieve is that, When i select Concept or FAQ, the About menu item should be set to "active"

I tried doing this:

Code: Select all

<li <cms:if k_template_name=='index.php'>class="active"</cms:if> ><a href="<cms:link 'index.php' />">Home</a></li>

<li class="<cms:if k_template_name=='concept.php'>active</cms:if> dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="<cms:link 'concept.php' />">Concept</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="<cms:link 'faq.php' />">FAQ</a></li>
    </ul>
</li>

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li <cms:if k_template_name=='working.php'>class="active"</cms:if> ><a href="<cms:link 'working.php' />">How We Work</a></li>
        <li role="separator" class="divider"></li>
        <li <cms:if k_template_name=='help.php'>class="active"</cms:if> ><a href="<cms:link 'help.php' />">Help</a></li>
    </ul>
</li>

<li <cms:if k_template_name=='search.php'>class="active"</cms:if> ><a href="<cms:link 'search.php' />">Sevak Shoodh</a></li>

<li <cms:if k_template_name=='contact.php'>class="active"</cms:if> ><a href="<cms:link 'contact.php' />">Contact</a></li>

When i click on concept.php, the About menu-item has the active class applied. Also, I want the same to happen when I select faq.php.

I tried something like:

Code: Select all

class="<cms:if k_template_name=='concept.php || faq.php'>active</cms:if>

but then the class="active" doesn't implement on any.

What to do???

Regards,
GenXCoders

Well i got it to work... That was really dumb of me...

Code: Select all

class="<cms:if k_template_name=='concept.php' || 'faq.php'>active</cms:if>

But now another problem has cropped up...
When i visit any other menu-item, or the concept/faq/working/help menu items, the active class remains implemented on the About and the Services menu-items.

How can I remove it???

My current code for the menu-snippet is:

Code: Select all

<li <cms:if k_template_name=='index.php'>class="active"</cms:if> ><a href="<cms:link 'index.php' />">Home</a></li>

<li class="<cms:if k_template_name=='concept.php' || 'faq.php'>active</cms:if> dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="<cms:link 'concept.php' />">Concept</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="<cms:link 'faq.php' />">FAQ</a></li>
    </ul>
</li>

<li class="<cms:if k_template_name=='working.php' || 'help.php'>active</cms:if> dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="<cms:link 'working.php' />">How We Work</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="<cms:link 'help.php' />">Help</a></li>
    </ul>
</li>

<li <cms:if k_template_name=='search.php'>class="active"</cms:if> ><a href="<cms:link 'search.php' />">Sevak Shoodh</a></li>

<li <cms:if k_template_name=='contact.php'>class="active"</cms:if> ><a href="<cms:link 'contact.php' />">Contact</a></li>

Regards,
GenXCoders

[KK]

Hi,

I think the correct way of doing the check would be as follows -

Code: Select all

class="<cms:if k_template_name=='concept.php || k_template_name=='faq.php'>active</cms:if>"

As an aside, I believe it'd be easier to use a separate nested-pages template (e.g. named menu.php) and create the menu out of it by making its cloned pages point to the real pages - http://docs.couchcms.com/concepts/neste ... maker.html

That way you'll be spared all the hassle of trying to figure out which template is active etc.

Hope it helps.

As an aside, I believe it'd be easier to use a separate nested-pages template (e.g. named menu.php) and create the menu out of it by making its cloned pages point to the real pages - http://docs.couchcms.com/concepts/neste ... maker.html

Good Evening Sir...
Isn't it so that the nested-pages are used to generate pages that will be cloned out of the same template???

Coz in this case the pages are independent templates for each, viz:
1. concept.php
2. faq.php
3. working.php
4. help.php

And all have a different designing all together. Will Nested-Pages (Menu Maker) still work?

Regards,
Aashish

[KK]

Aashish,

Suppose the nested-pages template is 'menu.php'. You are right, we'll now create cloned-pages of this template (i.e. menu.php) but will make those pages 'point' to the other templates of your site.

This way when we use <cms:menu> to automatically generate a menu, the menu-items will be referring to exactly the same links that your existing menu currently does.

Please take a look at http://docs.couchcms.com/concepts/neste ... maker.html which explains this in detail. Nested-pages were primarily designed for creating such menus (hence 'AKA Menu-maker' tag).

Ok KK Sir... I will once again go through the documentation... Either ways it has been long since I had read it... I guess its a "Refresher Time"!!!

Dear KK Sir and @All Couchies,

I am using bootstrap to design the theme of the website. I have used the navbar directly from bootstrap and made modifications to it. http://getbootstrap.com/components/#navbar

And as suggested I have implemented the Nested-Pages (AKA Menu-Maker).

How do I now format the css output???

Regards,
Aashish

[KK]

There are two available ways of converting the nested-pages tree you created into a functional menu - <cms:menu> and <cms:nested_pages>

<cms:menu> outputs a preset markup for the menu but supports specifying which CSS classes to apply to the various HTML elements e.g. 'menu_class', 'active_trail_class' (please see http://docs.couchcms.com/tags-reference/menu.html). By applying the proper classes, you can style the generated menu to match the bootstarp navbar.

<cms:nested_pages>, on the other hand, works like <cms:pages> and you can use it to loop through your tree and output absolutely any kind of markup under the sky. Please see http://docs.couchcms.com/tags-reference ... _pages-tag

So, to answer your question, you can take the easier path first and use cms:menu specifying the classes used by bootstrap.
In case that does not cut it, go for cms:nested_pages.

Hope it helps.