Documentation

Light-weight, fast, simple and powerful!
 
Translations of this page?:

Recipe: Four-level collapsing menu

The Stacking-Collapsing Nav recipe should be used in preference to this code, but it is retained in the wiki as it still demonstrates some useful techniques.

Unlike the sitemap-style nav, this menu provides up to four-levels of navigation (not unlimited), but it expands/collapses depending on the children of the current page. For example, this menu:

  • Home
  • Classical
  • Jazz
  • Rock

could expand to this, if you click on “Classical”:

  • Home
  • Classical
    • Renaissance
    • Baroque
    • Romantic
  • Jazz
  • Rock

It works up to four levels, or graphically:

  • Top 1
    • Child 2
      • Grandchild 3
        • Great-granchild 4

or in terms of URL structure: http://www.example.com/top/child/grandchild/great-grandchild

Here is the code; some notes are below.

<?php $subPageId = explode('/', $_SERVER['REQUEST_URI']); $level2=$subPageId[1]; $level3=$subPageId[2]; $level4=$subPageId[3]; ?>
 
<h3>Navigation</h3>
 
<ul><!-- top level {1} = main nav -->
<li><a<?php echo url_match('/') ? ' class="current"': ''; ?> href="<?php echo URL_PUBLIC; ?>">Home</a></li>
<?php foreach($this->find('/')->children() as $menu): ?>
<li><?php echo $menu->link($menu->title, (in_array($menu->slug, explode('/', $this->url)) ? ' class="current"': null)); ?>
 
	<?php if ($level2 != '' && strpos($_SERVER['REQUEST_URI'],$menu->slug) == true) : ?>
	<?php $page2 = $this->find($level2); ?>
 
	<ul><!-- child level {2} -->
	<?php foreach ($page2->children(array()) as $menu2): ?>
	<li><?php echo $menu2->link(); ?>
 
		<?php if ($level3 != '' && strpos($_SERVER['REQUEST_URI'],$menu2->slug) == true) : ?>
		<?php $page3 = $this->find($level2.'/'.$level3); ?>
 
		<ul><!-- grandchild level {3} -->
		<?php foreach ($page3->children(array()) as $menu3): ?>
		<li><?php echo $menu3->link(); ?>
 
			<?php if ($level4 != '' && strpos($_SERVER['REQUEST_URI'],$menu3->slug) == true) : ?>
			<?php $page4 = $this->find($level2.'/'.$level3.'/'.$level4); if (count($this->find($level2.'/'.$level3.'/'.$level4)->children()) > 0) : ?>
 
			<ul><!-- great-grandchild level {4} -->
			<?php foreach ($page4->children(array()) as $menu4): ?>
			<li><?php echo $menu4->link(); ?></li>
			<?php endforeach; ?>
			</ul>
			<?php endif; endif; ?>
 
		</li>
		<?php endforeach; ?>
		</ul>
		<?php endif; ?>
 
	</li>
	<?php endforeach; ?>
	</ul>
	<?php endif; ?>
 
</li>
<?php endforeach; ?> 
</ul>

Notes

  • This code might not be very efficient! Suggestions on the forum for improving it are welcome.
  • N.b. It does not work with URL suffixes.
  • The “explode” in the first line is the key to the variables, and the version here assumes Wolf is in the root of your site (e.g., www.mywolfsite.com/), not a subdir (e.g., www.mywebsite.com/wolf/). If your Wolf site is in a subdirectory, then increase the value in each of the square brackets by 1 (e.g., $subPageId[1] becomes $subPageId[2], [2] goes to [3], etc.).
  • If you only need three levels of navigation, just strip out the middle 9 lines (8 code + 1 blank) most deeply indented in the middle of the code, from
    <?php if ($level4 != ''...

    to the double endif line.

  • Because this code is bulky, it is probably easiest to create a snippet for it (e.g. collapsing-nav, and then put it in the sidebar of your homepage using
<?php $this->includeSnippet('collapsing-nav'); ?>

.

 
navbook/collapsing.txt · Last modified: 2011-09-12 00:46 (external edit)
 
Except where otherwise noted, content on this wiki is licensed under the following license:GNU Free Documentation License 1.2
Copyright 2010 wolfcms.org / design by yello studio / Wolf CMS Inside