Nav Menu Logic

Hi theclicklab,

Looking at your example code, I think you want the div with the class panel code to always wrap around your entire navigation system? I think the solution is to move that div outside of your foreach loop like this:

<?php $rowcounter=0; // Count for style names ?>
<div class="panel">
  <?php foreach ($pagesRecords as $record): ?>
    <?php if($record['hide_nav'] == '0'):  // Check if hidden from nav ?>
      <?php if($record['depth'] == '0') { $rowcounter++; } // Increment count +1 ?>
      <?php if($record['depth'] == '0'): // Insert top level link ?>
        <div class="nav-heading" role="tab" id="heading<?php echo $rowcounter ?>">
          <span class="nav-title">
            <a class="collapsed nav-expander" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $rowcounter ?>" aria-expanded="false" aria-controls="collapse<?php echo $rowcounter ?>">
              <?php if ($record['_hasChild']): ?><?php echo $record['name'] ?><?php else:?><a href="/<?php echo strtolower($record['url']) ?>/"><?php echo $record['name'] ?></a><?php endif ?>
            </a>
          </span>
        </div>
      <?php endif ?>
      <?php if($record['depth'] == '1'): // Insert second level link ?>
        <?php if($record['depth'] == '1' && $record['_isFirstChild']): ?>
          <div id="collapse<?php echo $rowcounter ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $rowcounter ?>">
            <ul class="list-group">
        <?php endif ?>
        <li class="list-group-item"><a href="/<?php echo strtolower($record['url']) ?>/"><?php echo $record['name'] ?></a></li>
        <?php if($record['depth'] == '1' && $record['_isLastChild']): ?>
            </ul>
          </div>
        <?php endif ?>
      <?php endif // End second level list ?>
    <?php endif // End check if hidden ?>
  <?php endforeach ?>
</div>


Thanks,

Greg

Hi Greg, the <div class="panel"> is in the correct place, heres what the full menu code should look like:

    <nav class="pushy pushy-left">

      <a href="#" class="btn button-close">Close</a>

      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div>
          <a href="#">Home</a>
        </div>

        <div class="panel">
          <div class="nav-heading" role="tab" id="headingOne">
            <span class="nav-title">
              <a class="collapsed nav-expander" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                Our Story
              </a>
            </span>
          </div>
          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <ul class="list-group">
              <li class="list-group-item"><a href="#">Sub link</a></li>
              <li class="list-group-item"><a href="#">Sub link</a></li>
              <li class="list-group-item"><a href="#">Sub link</a></li>
            </ul>
          </div>
        </div>

        <div class="panel">
          <div class="nav-heading" role="tab" id="headingSix">
            <span class="nav-title">
              <a class="collapsed nav-expander" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                For Professionals
              </a>
            </span>
          </div>
          <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
            <ul class="list-group">
              <li class="list-group-item"><a href="#">Sub link</a></li>
              <li class="list-group-item"><a href="#">Sub link</a></li>
              <li class="list-group-item"><a href="#">Sub link</a></li>
            </ul>
          </div>
        </div>

        <div>
          <a href="#">Contact</a>
        </div>

      </div>

    </nav>

So just trying to work out how to detect if its the last second level item so I can then close the div

Thanks for clarifiying, I think the code you need is actually the same as you've used to display the closing div and ul:

<?php $rowcounter=0; // Count for style names ?>
<?php foreach ($pagesRecords as $record): ?>
  <?php if($record['hide_nav']==0):  // Check if hidden from nav ?>
    <?php if($record['depth'] == '0') { $rowcounter++; } // Increment count +1 ?>
    <?php if($record['depth'] == '0'): // Open div wrapper ?>
    <div class="panel">
    <?php endif ?>
      <?php if($record['depth'] == '0'): // Insert top level link ?>
        <div class="nav-heading" role="tab" id="heading<?php echo $rowcounter ?>">
          <span class="nav-title">
            <a class="collapsed nav-expander" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $rowcounter ?>" aria-expanded="false" aria-controls="collapse<?php echo $rowcounter ?>">
              <?php if ($record['_hasChild']): ?><?php echo $record['name'] ?><?php else:?><a href="/<?php echo strtolower($record['url']) ?>/"><?php echo $record['name'] ?></a><?php endif ?>
            </a>
          </span>
        </div>
      <?php endif ?>
      <?php if($record['depth'] == '1'): // Insert second level link ?>
          <?php if($record['depth'] == '1' && $record['_isFirstChild']): ?>
          <div id="collapse<?php echo $rowcounter ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $rowcounter ?>">
            <ul class="list-group">
          <?php endif ?>
              <li class="list-group-item"><a href="/<?php echo strtolower($record['url']) ?>/"><?php echo $record['name'] ?></a></li>
          <?php if($record['depth'] == '1' && $record['_isLastChild']): ?>
              </ul>
            </div>
          <?php endif ?>
      <?php endif // End second level list ?>
    <?php if($record['depth'] == '1' && $record['_isLastChild']): // Close div wrapper ?></div><?php endif ?>
  <?php endif // End check if hidden ?>
  <?php endforeach ?>

Cheers,

Greg