Forum

Thread tagged as: Question, Forum

Navigation template question

I'm trying to create the following navigation structure using the modified navigation template item.html

<ul class="classone">

<li class="active"><a href="#">LINK ONE</a></li>
 <li class="dropdown">

 <a href="#">Right Button Dropdown</a>
 <ul class="classtwo">
          <li><a href="#">sub menu 1</a></li>
          <li class="selected"><a href="#">sub menu 2</a></li>
        </ul>
</li>
</ul>

So far I have this in the template:

<perch:before>
    <ul class="classone">
</perch:before>
        <li<perch:if exists="current_page"> class="selected"</perch:if><perch:if exists="ancestor_page"> class="dropdown"</perch:if>>
            <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>   
            <perch:pages id="subitems" encode="false" />
        </li>
        <perch:if exists="ancestor_page"><ul></perch:if>
<perch:after>
    </ul>
</perch:after>

but this creates the following:

<ul class="classone">

<li class="active"><a href="#">LINK ONE</a></li>
 <li class="dropdown">

 <a href="#">Right Button Dropdown</a>
 <ul class="classone">
          <li><a href="#">sub menu 1</a></li>
          <li class="selected"><a href="#">sub menu 2</a></li>
        </ul>
</li>
</ul>

Is there a way to create a different class for the <ul> if it is for the ancestor/sub menu ie classone AND classtwo

Hope this makes sense.
Richard Lowe

Richard Lowe 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Something like this?

<perch:before>
    <ul class="classone <perch:if exists="ancestor_page">classtwo</perch:if>">
</perch:before>
Kirk Roberts

Kirk Roberts 0 points

6 years ago

One way is to create two navigation templates, one for the top level and one for sublevels. Then instead of using

'template'=>'item.html'

use an array, like

'template'=>array('top.html', 'sub.html')

So whenever the "subitems" tag is used the 'sub.html' template will be used.

The first item is used for the first level, second item for second level ... etc ... I believe the last template in the list will be used for any lower levels as well.

OR

You could create a conditional like

class="<perch:if exists="ancestor_page">classtwo<perch:else />classone</perch:if>"

There are other id's you can test on... check out the documentation or put a <perch:showall /> in your template to see what's available.

Hope that helps!
Richard Lowe

Richard Lowe 0 points
Registered Developer

6 years ago

Many thanks Drew and Kirk

I used both techniques above but can only get a separate class on the <ul> using the array method. This is because the 'ancestor_page' is not being recognised and therefore not applying the "ancestor" class. The current_page is recognised but not the ancestor_page. I have just looked over a couple of other sites and this class is also not being applied to any the <li> on submenus. Am I doing something wrong!
Richard Lowe

Richard Lowe 0 points
Registered Developer

6 years ago

Just worked it what was wrong, I used

<perch:if exists="subitems">

not

if exists="ancestor_page">

... works now!

Thanks again for responses!