Nav Menu Logic
4 posts by 2 authors in: Forums > CMS Builder
Last Post: September 30, 2015 (RSS)
Hi there, I have a complicated nav menu I almost have working, just have an issue with a closing div that I cant figure out:
Here is what my code is supposed to output:
<div class="panel">
<div class="nav-heading" role="tab" id="heading1">
<span class="nav-title">
<a class="collapsed nav-expander" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
Top level link
</a>
</span>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<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="heading2">
<span class="nav-title">
<a class="collapsed nav-expander" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Top level link
</a>
</span>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<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>
And here is what it is currently outputing:
<div class="panel">
<div class="nav-heading" role="tab" id="heading1">
<span class="nav-title">
<a class="collapsed nav-expander" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
Our Story
</a>
</span>
</div>
</div> <--- Closing Div
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<ul class="list-group">
<li class="list-group-item"><a href="/about/">About Pure Fiji</a></li>
<li class="list-group-item"><a href="/making-a-difference/">Making a Difference</a></li>
<li class="list-group-item"><a href="/community/">Community</a></li>
</ul>
</div>
Closing Div should be here
Here is my code with the relevant if statement highlighted:
<?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'] == '0'): // Close div wrapper ?></div><?php endif ?>
<?php endif // End check if hidden ?>
<?php endforeach ?>
I have also tried adding this but then I get no div:
<?php if($record['depth'] == '0' && $record['_isLastChild']): // Close div wrapper ?></div><?php endif ?>
So how do I say, "insert </div> if last 2nd level item"?
Many thanks :)
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
PHP Programmer - interactivetools.com
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
PHP Programmer - interactivetools.com