Jump to content

Display Children of a Child


VirtuallyCreative
 Share

Recommended Posts

Hello!

I'm currently trying to create a navigation menu using list items and I'm having issues pulling children pages properly and I'm hoping someone can point me in the right direction.

The code below was modified from the default (intermediate) template that outputs child pages of the main page. (Home -> About, SiteMap).


But one of the children (About page), also has 3 child pages and I'm not sure how to also get those 3 additional child pages to display as well within the same foreach statement. Because of the way the menu is structured I would need to change the output of the HTML for any Child Page with additional Children (it nests underneath in the nav).

Currently only Home, About and Sitemap appear and I want to also include the child pages of About nested properly within the navigation.

 

 Current code, only accounting for Homepage and it's children. Works great and as expected:

  • Home
  • About
  • Sitemap
<!-- START SIDEBAR MENU -->
<div class="sidebar-menu">
  <!-- BEGIN SIDEBAR MENU ITEMS-->
  <ul class="menu-items">
    <?php 
    // top navigation consists of homepage and its visible children
    foreach($homepage->and($homepage->children) as $item) {
      echo "<li class=''><a href='$item->url'><span class='title'>$item->title</span>";
      // Grab first two letters of page to output for menu icon and set active class
      if($item->id == $page->rootParent->id) {
        echo "</a><span class='bg-success icon-thumbnail'>";
        echo substr($item->title, 0, 2);
        echo "</span></li>";
      } else {
        echo "</a><span class='icon-thumbnail'>";
        echo substr($item->title, 0, 2);
        echo "</span></li>";
      }
    }
    ?>
  </ul>
  <div class="clearfix"></div>
</div>
<!-- END SIDEBAR MENU -->

 

Modified not working markup trying to also nest children of a child:

  • Home
  • About
    • Page1
    • Page2
    • Page3
  • SiteMap
<!-- START SIDEBAR MENU -->
<div class="sidebar-menu">
  <!-- BEGIN SIDEBAR MENU ITEMS-->
  <ul class="menu-items">
    <?php 
    // top navigation consists of homepage and its visible children
    foreach($homepage->and($homepage->children) as $item) {
      echo "<li class=''><a href='$item->url'><span class='title'>$item->title</span>";

      // check if a top navigation item's visible children has child pages
      // if true, change markup of top navigation item to account for nested children
      if(($homepage->children)->hasChildren()) {
        //change menu item to menu item /w sub-items
        echo "<li class=''><a href='javascript:;'><span class='title'>$item->title</span>
            <span class='arrow'></span></a><span class='icon-thumbnail'><i class='pg-form'></i></span>";

        //loop through the top navigation child's children pages and output them as nested menu item
        foreach($child->children as $childitem) {
          echo "<ul class='sub-menu'>";
          echo "<li class=''><a href='$childitem->url'>$childitem->title</a>";
          echo "</a><span class='icon-thumbnail'>";
          echo substr($childitem->title, 0, 2);
          echo "</span></li></ul></li>";
        }
      }
      //step back out and continue listing Homepage Children pages
      if($item->id == $page->rootParent->id) {
        echo "</a><span class='bg-success icon-thumbnail'>";
        echo substr($item->title, 0, 2);
        echo "</span></li>";
      } else {
        echo "</a><span class='icon-thumbnail'>";
        echo substr($item->title, 0, 2);
        echo "</span></li>";
      }
    }
    ?>
  </ul>
  <div class="clearfix"></div>
</div>
<!-- END SIDEBAR MENU -->

Any insights would be appreciated! I'm also sure the php code itself can be refactored better but still learning for now.

Dashboard   Campaign Manager.png

Link to comment
Share on other sites

Hey, @VirtuallyCreative!  The first thing that occurs to me is that you're echoing the $item li before you check to see if it has children, after which you're also echoing the $item li, and that's what is causing the top-level duplication. You could handle this a few different ways, but whatever approach you take, you basically want to determine if $item has children, and, based on that, decide what href to use and whether or not to include the arrow.

I haven't tested this to see if it works, but something like this might give you a place to start:

// top navigation consists of homepage and its visible children
    foreach($homepage->and($homepage->children) as $item) {
      echo "<li class=''><a href='". ($item->hasChildren() ? "javascript:;" : $item->url) ."'><span class='title'>$item->title</span>";
      if($item->hasChildren()) {
        echo "<span class='arrow'></span></a><span class='icon-thumbnail'><i class='pg-form'></i></span>";
        
        //loop through the top navigation child's children pages and output them as nested menu item
        foreach($child->children as $childitem) {
          echo "<ul class='sub-menu'>";
          echo "<li class=''><a href='$childitem->url'>$childitem->title</a>";
          echo "</a><span class='icon-thumbnail'>";
          echo substr($childitem->title, 0, 2);
          echo "</span></li></ul>";
        }
      }
...

Hope that helps! If it doesn't work as expected, or if you have any questions about it, let me know. 

That first echo statement uses PHP's ternary operator for a shorthand if. If you aren't familiar with this, here's a pretty good article that covers the basics.

Good luck to you!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...