Forum

Thread tagged as: Question

perch_pages_navigation in zurb foundation topbar

Newbie web developer here; I could really use some help. I'm trying to set up a global top bar navigation menu using zurb foundation classes

Just as an example:

    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name"></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>
      <section class="top-bar-section">
     <ul class="right">
          <li class="active"><a href="#">Home</a></li>
          <li class="has-dropdown"><a href="#">Accommodations</a>
            <ul class="dropdown">
              <li><a href="#">King with Sofa Bed</a></li>
              <li><a href="#">Two Queen Beds</a></li>
              <li><a href="#">Pet-Friendly Suite</a></li>
            </ul>
          </li>
          <li><a href="#">Reservations</a></li>
          <li><a href="#">Meetings & Events</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
      </section>
    </nav>

...is the 'static' html setup with foundation css / js that's works fine. I copied the above into perch/templates/layouts/global.topbar.php . I then deleted everything in the <ul class="right"> to </ul> portion and replaced it with <?php perch_pages_navigation(); ?> . I then tried tweaking the default /perch/templates/navigation/item.html file. However I have had little success in writing the Navigation template properly. I know that :

  1. The active page / <li> needs a class of "active"
  2. Any page / <li> with subpages needs a class of "has-dropdown"
  3. For any page <li> that is a subpage, the <ul> it is contained in needs a class of "dropdown"

I've read & re-read the perch_pages_navigation documentation, but I cannot figure out the detailed steps needed to get the template the way I would like it. Any help with this would be greatly appreciated.
Alex Dionisio

Alex Dionisio 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

What have you got so far, and where is it failing?
Alex Dionisio

Alex Dionisio 0 points

7 years ago

Well don't have much to show really.

<perch:before>
   <ul<perch:if exists="perch_item_first"> class="right"</perch:if>>
</perch:before>
        <li<perch:if exists="current_page"> class="active selected"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>


        <perch:if exists="subitems"> class="has-dropdown"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</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>

I know above is completely wrong. Apart from everything else, one extremely basic thing I don't understand is how I can simply set just the very first <ul> to have class="right". On my test site, the above sets all my top-level pages' <li> entries (except, for some reason, the last one [which is just a link] ) to have a class="right".

Other than that I'm afraid I don't have too many specifics on what is failing . I simply currently at a loss of how to structure all this.
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Apart from everything else, one extremely basic thing I don't understand is how I can simply set just the very first <ul> to have class="right".

Test for pageDepth

<perch:if id="pageDepth" match="eq" value="1">class="right"</perch:if>
James Higginbotham

James Higginbotham 1 points

7 years ago

Alex, I don't know if you ever figured this out, but here is how I did exactly what you were trying to do. I used Drew's pageDepth to add the proper syntax for Foundation menus.

Here it is in readable code:

<perch:before>
   <ul <perch:if id="pageDepth" match="eq" value="1">class="left"</perch:if>
         <perch:if id="pageDepth" match="eq" value="2">class="dropdown"</perch:if>>
</perch:before>
        <li<perch:if exists="current_page"> class="active selected"</perch:if>
            <perch:if exists="ancestor_page"> class="ancestor"</perch:if>
            <perch:if exists="subitems"> class="has-dropdown"</perch:if>
            <perch:if exists="ancestor_page"> class="ancestor"</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>

And here it is as I used it, to output clean looking line breaks in the source

<perch:before>
   <ul <perch:if id="pageDepth" match="eq" value="1">class="left"</perch:if><perch:if id="pageDepth" match="eq" value="2">class="dropdown"</perch:if>>
</perch:before>
        <li<perch:if exists="current_page"> class="active selected"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if><perch:if exists="subitems"> class="has-dropdown"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</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>

I should mention my navigation was class "left", while your's was class "right".

Hope this helps someone!
Emma Davis

Emma Davis 0 points

7 years ago

Thank you so much for that James (@higgi3), that has just saved me a load of time :)