Forum

Thread tagged as: Question

Navigation needing to target ancestor_page and subitems

Hi,

I need to have classes added to a navigation item if it's the ancestor_page (class of 'active') and if it's got subitems (class of 'submenu-button')

The problem is the navigation list item could have both of these. I have the following which works but throws a validation error if both are true, as the 'active' class is applied twice.

<perch:before>
    <ul id="sidr" class="menu">
</perch:before>
        <li<perch:if exists="current_page"> class="active"</perch:if><perch:if exists="ancestor_page"> class="submenu-button active"</perch:if><perch:if exists="subitems"> class="submenu-button"</perch:if>><a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a><perch:pages id="subitems" encode="false" /></li>
<perch:after>
    </ul>
</perch:after>

Is there a way to check if it has subitems and it's the ancestor before applying the classes?
Sarah Evans

Sarah Evans 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

You mean like this?

<perch:if exists="ancestor_page AND subitems">
   ...
</perch:if>
Sarah Evans

Sarah Evans 0 points

7 years ago

Yes then I would need to do

<perch:if exists="subitems NOT ancestor_page"> class="submenu-button"</perch:if>

So both don't get picked up? It seems to work :)
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

I think personally I'd be more inclined to do something like

<li class="<perch:if exists="current_page OR ancestor_page">active </perch:if><perch:if exists="ancestor_page OR subitems">submenu-button </perch:if>">
Sarah Evans

Sarah Evans 0 points

7 years ago

Thanks Drew.