Forum

Thread tagged as: Problem

Add html tag to nav menu item

I am using a jquery drop-down nav menu as part of a page template. In order to use a Font Awesome icon indicating the drop-down status, the code calls for the addition of an <i class="fa fa-angle-down"></i> tag to the top-level list item eith the sub-menu, following the menu href.

Essentially, I need to go from...

<ul>
        <li>
                      <a href="/test.php">Test</a>               
               </li>
        <li class="ancestor">
                     <a href="#">test2222</a>           
                          <ul>
                       <li>

... to...

<ul>
        <li>
                      <a href="/test.php">Test</a>               
               </li>
        <li class="ancestor">
                     <a href="#">test2222 <i class="fa fa-angle-down"></i></a>           
                          <ul>
                       <li>

... for specific top level pages.

Is there a way of achieving this?

Krissie Pearse 0 points

4 years ago

Krissie Pearse 0 points

4 years ago

Part solution might be

<a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /><perch:if exists="ancestor_page"> <i class="fa fa-angle-down"></i></perch:if></a>   
            <perch:pages id="subitems" encode="false" />

This works when looking at sub-pages of that top level item, but not for other top-level pages.

If I add in a similar statement for where subitems exist, it works well enough until viewing the nav from one of the subitems, where it obviously outputs the icon twice.

Krissie Pearse 0 points

4 years ago

And finally... the solution.

<li<perch:if exists="current_page"> class="selected"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
            <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" />
<perch:if not-exists="subitems"> <perch:if exists="ancestor_page"> <i class="fa fa-angle-down"></i></perch:if>
</perch:if><perch:if exists="subitems"> <i class="fa fa-angle-down"></i></perch:if></a>   
            <perch:pages id="subitems" encode="false" />

Sorry about that. It's 1am here and I'm tired... or at least that's my excuse!

Thank you for a fantastic navigation template system.