Documentation

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

Recipe: Simple submenus in the sidebar

This is a basic form of a submenu for any page that is at level 1 (in other words, the parent page is “Homepage”). There is a full commentary of this code below.

<ul id="nav_sub">
<?php foreach ($this->children() as $child): ?>
    <li><?php echo $child->link($child->title, (url_start_with($child->url) ? ' class="current"': null)); ?></li>
<?php endforeach; ?>
</ul>

You will need to work up some CSS for the nav_sub id, of course.

Code Commentary

For those who are new to Wolf, or its style of coding, here is a line-by-line explanation of this menu, working from the outer layers towards the middle:

1. First there is the the outer Unordered List tags (of course!), with a default CSS ID of #nav_sub (but you can use whatever you like):

<ul id="nav_sub">
 ...
</ul>

2. Next comes the “foreach” frame:

<?php foreach ($this->children() as $child): ?>
 ...
<?php endforeach; ?>

That is asking for all the “children” pages to the current page object (indicated by $this->) to be cycled through, one at a time. As each of the children pages is cycled through, its value is held by the variable $child.

3. Each child page then gets returned as a list item:

<li> ... </li>

Inside the List tags, a lot of work gets done! Again, we'll work from the outside in:

4. Most simply, there is simply a link for the child page being echoed:

<?php echo $child->link( ... ); ?>

5. But the link() function can take two arguments in the ( … ) area: (1) different TEXT for your link (the default is simply to give the title), and (2) any other link parameter you wish to add. However, if you want to add an additional parameter (#2), you must also give a value for the title (#1).1)

That explains the lengthy text inside the child->link(...) function here. We want to add conditional styling, a “current” class, if that child page is the active one. But that also means specifying the title. Since that's the first argument (#1, in the paragraph above), we start there:

<?php echo $child->link($child->title, ... ); ?>

6. In order to style our menu, we need to test to see whether our $child value matches the currently displaying page. That test is found in this code:

(url_start_with($child->url) ? ' class="current"': null)

(The test being used here is Wolf's url_start_with function.) This uses a compact conditional format for PHP, which in “English” could be represented as:

if_this(is_the_case) ? then do this if true : but do this if false ;

So our menu “class-current” test could be written in English: if the URL now showing begins with the same URL as the current $child, then output my class=“current” text, but if it is not the current URL, then don't give me anything (“null”).

That whole test is given as the second argument for the child->link(...) function:

<?php echo $child->link($child->title, (url_start_with($child->url) ? ' class="current"': null)); ?>

7. And that completes the code commentary!

1) If you only want to give different link text, you do not need to add the “any other parameter” value.
 
navbook/simple.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