Frog Navigation Cookbook

Feed 31 posts, 10 voices

Avatar
1493 posts

Finding a way to navigate below the levels offered by Frog’s “out-of-the-box” navigation can sometimes prove challenging. A suggestion was made in the issue tracker that we develop a “Navigation Cookbook”, offering a variety of approaches to meeting this challenge.

The cookbook is now with the MadeByFrog docs with five (delicious! :P ) “recipes” (err, navigation examples), complete with code and explanations.

Any suggestions, corrections, or other offers of help :) are always appreciated!

 
Avatar
15 posts

Great job thanks David and a welcome addition.

 
Avatar
31 posts

Hi David, very nice work of you and the entire team! It’s great to see stuff like this in the docs section because searching forums isn’t always a convenient and good way to gather the info you need. When it’s in one place in the docs you can keep it up to date following best practises and future releases of Frog.

 
Avatar
180 posts

COOL! I think about cookbook for frog… Realy surprized! :)

 
Avatar
2 posts

Great Thanks!

 
Avatar
184 posts

David,

Much appreciation for the Navigation Cookbook. Any chance you could be so good as to update the ‘Unlimited levels and children’ code to reflect the current status on the li element as opposed to the link!?

It may be a personal css choice for some, but it is actually more flexible to apply a class or id to the parent element(the li in this case) as any siblings of the parent can also be targeted for formatting.

I’ve tried the following, but with no success:

code
<li<?php echo (in_array($menu->slug, explode('/', $this->url)) ? ' id="current"': null); ?>><?php echo $menu->link($menu->title) ?></li>
 
Avatar
651 posts

@BlueFrog – the ‘Unlimited levels and children’ code is mine, not David’s but that doesn’t matter too much.. :-)

You’ll need to change two lines, one in the function and the one outside the function:

Function:

echo '<li>'.$menu->link($menu->title, (in_array($menu->slug, explode('/', $current->url)) ? ' class="current"': null)).'</li>';

should become

echo '<li'.in_array($menu->slug, explode('/', $current->url)) ? ' class="current"': ''.'>'.$menu->link($menu->title).'</li>';

Outside the function:

echo '<li>'.$page->link($page->title, (in_array($page->slug, explode('/', $this->url)) ? ' class="current"': null)).'</li>';

Should become:

echo '<li'.in_array($page->slug, explode('/', $this->url)) ? ' class="current"': ''.'>'.$page->link($page->title, null).'</li>';

That should be about it.

 
Avatar
1493 posts

@BlueFrog (and everybody!): I should have been more clear. Although I made the announcement, this was very much an mvdkleijn/David tag-team venture (and the “cookbook” was his idea, not mine!).

I hope others will be willing to contribute their menu solutions (like oweb’s suckerfish implmentation), too, so that the “cookbook” options will continue to grow.

 
Avatar
184 posts

Hey mvdkleijn, biggup for the mods … and David, thanks for the headsup.

Have quite a few things I’m working on at the moment, but look foward to contributing some stuff as soon as I get some more time.

 
Avatar
651 posts

As far as I’m concerned, the cookbook is just a guide with possible recipes. The cook is responsible for making his/her own variations.

Cooks wanting to contribute their recipes: please post them here with some explanation. Either me of David can then add them to the madebyfrog.com site. :-)

Also: for those wanting to contribute.. you are encouraged to contribute documentation for example. You can do so by posting it in the forum. (Assuming David agrees with this approach? ;-) )

 
Avatar
1493 posts

(Assuming David agrees with this approach? ;-) )

Yep! (or jup!)

 
Avatar
184 posts

Mvdkleijn,

I’ve been using the following to single out the parent item for the ‘Unlimited levels and children’ menu:

code
<?php	
$page = $this->find('/');	
echo displayChildren($page, $this, 'private/', null);
?>

From my understanding, the parent list item should be ‘private/’ and all it’s siblings should be visible underneath it, to give me something like the following:

Private page 1
> Spec
> Review
Private page 2
> Spec
> Review

But instead, I am getting other parents and sibling like so:

About
Private
> Private Page 1
> > Spec
> > Review
> Private Page 2
> > Spec
> > Review
Public
> Public Page 1
> > Spec
> Public Page 2
> > Spec
Contact
Sitemap

Am I misunderstanding something about the page from where I want to start displaying the menu? I’ve tried various things, and nothing has worked thus far?

 
Avatar
1493 posts

@BlueFrog – mvdkleijn can give you the authoritative answer, but just for the moment, I think you want the code for your menu to look like this, don’t you?

<?php
  $page = $this->find('/private/');
  echo '<ul class="sidemenu">';
  echo '<li>'.$page->link($page->title, (in_array($page->slug, explode('/', $this->url)) ? ' class="current"': null)).'</li>';
  echo displayChildren($page, $this, true, array());
  echo '</ul>';
?>

Does that get you any farther? I think the problem was where you were trying to set the starting page. But I could be wrong. I’ve been wrong before. Will be again. Soon, probably… But hope that helps in any case.

 
Avatar
184 posts

Hi David,

Authority aside, you were right. The problem was where I was trying to declare the starting page.

Thanks again.

 
Avatar
651 posts

David was right. Partially :-)

You were trying to display all children of Home (i.e. “/”)… successfully I might add ;-)

To be more exact, the code you were using:

echo displayChildren($page, $this, 'private/', null);

means: display all children of $page where $this is the current page the user is at.

The third parameter (‘private/’ in your case) should only be true or false. That parameter tells the displayChildren function to print an <ul> and </ul>..

The last parameter is the one you tried to use with the ‘private/’ bit I think.

If you use it, the last parameter should be an array of slugs & limits.

array('my-slug' => '3')

Each entry in the array tells the function to only display a maximum number of children for the page with that slug.

The above example says: when displayChildren encounters a page with slug ‘my-slug’, only display three of its children. (and their children and so on)

Please also see this page explaining the function

 
Avatar
184 posts

I’ve made a slight adjustment to the outputted code:

foreach($page->children($arr) as $menu) :
			echo '<li'.(in_array($menu->slug, explode('/', $current->url)) ? ' class="current"': null).'>'.$menu->link($menu->title);
			echo displayChildren($menu, $current, true, $limits).'</li>';
		endforeach;

The above basically ensures that any child lists are now enclosed within a parent close tag, as opposed to being outside the parent and thus not a true parent/child relationship.

 
Avatar
651 posts

Strange… I thought I validated the output with the W3C.

 
Avatar
31 posts

mvdkleijn,

i also noticed the non-validity of the output(tested in xhtml 1.0 transitional). The child ul was being placed outside of the parent li element. I noticed because it kinda broke my css styling.

 
Avatar
651 posts

oh well, maybe I accidentally posted an older version of the function. I’ll update it tonight or this weekend to make it XHTML strict. (what I usually try to do) :-)

 
Avatar
184 posts
quote
I noticed because it kinda broke my css styling

Me too, Tunnis.

 
Avatar
316 posts

Ok, I’m having real problems with these menu things. What I want is:

Home
 > Articles
 > > Free Market
 > > > Free Market Articles
 > > Guns
 > > > Guns Articles
 > > Miscellaneous
 > > > Misc Articles
 > > Politics
 > > > Politics Articles
 > > Plugins
 > > > Plugins Articles

I am able to make it list the menu like that, but the links it gives me send me to 404 errors. It would really help organization if I could separate articles by topic. I tried removing the article tab altogether and got nothing but errors, no matter what I tried.

For example under the Plugins menu, it gave me a link to (test server):

http://localhost/?articles/2008/10/18/plugins/2008/10/18/pinger.xhtml

But all I get is a 404 error at that address. Is there anyway to fix this?

EDIT: I tried to edit the link down to just:

http://localhost/?articles/plugins/pinger.xhtml

But it sends me to a “December 1999 Archive”, which I find really odd.

 
Avatar
1493 posts

@mtylerb – you don’t say which of the menu systems you are trying to use. I do know that for collapsing menu system which was one of my concoctions :), if you use URL extensions, it will break. (See the second “note” underneath the PHP code.)

It might be that it is the .xhtml suffix that is causing the problems for you. If so, there is a variation referenced in that note which might work for you. Here it is:

<?php $subPageId = explode('/', $_SERVER['REQUEST_URI']); $level2=$subPageId[1]; $level3=$subPageId[2]; ?>

<h3>NAVIGATION</h3>
<ul>
    <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 ($level3 != '') {$item2 = $level2;} else {$item2 = substr($level2,0,-5);} ?>
        <?php if ($level2 != '') : ?>
        <?php $page2 = $this->find($item2); ?>
        <?php if (strpos($_SERVER['REQUEST_URI'],$menu->slug) == true) : ?>
            <ul>
            <?php foreach ($page2->children(array()) as $menu2): ?>
            <li><?php echo $menu2->link(); ?></li>
            <?php endforeach; ?>
            </ul>
        <?php endif; ?>
    <?php endif; ?>

    </li>
    <?php endforeach; ?> 
</ul>

This only works to two levels (i.e., everything Frog thinks of as “top-level” = Home and its children, plus children-of-home’s-children) which … I don’t think is enough for you, Tyler. The “correcting” for URL suffix is the {$item2 = substr($level2,0,-5);} bit which strips off 4 characters (HTML) plus the dot. So in your case (.xhtml) you would need to change that to {$item2 = substr($level2,0,-6);}.

I have never tried having children-of-article’s-children, as you have it in your example. What a concept! :) I don’t know if the archive plugin is intended to cope with that kind of structure.

Another solution for you is to use the Tagger plugin, which works very nicely. YOu could just write your article, tag it with “free market” or “misc” or whatever, and let the Tagger plugin take care of the rest. (You can see one example of it at work in the sidebar of TestFrog).

That’s a bit of a ramble which doesn’t really get you anywhere … but maybe some food for thought!

 
Avatar
316 posts

I really appreciate the reply, David, rambling or not ;-)

I was pretty tired while I was writing that. I am trying to use the Unlimited Children, Unlimited Levels function. I had assumed by “levels” you meant deep, not wide.

Ah well. I really really like my organization, so being able to keep articles in the article thread and also keeping them organized into topic matter is somewhat important to me. I am currently using the Tagger plugin (and love it). I’d like to have a true cloud, but meh, something’s better than nothing!

I have really enjoyed using Frog, thus far, and hope that somewhere I might be able to contribute. If this is something that the smart folks, behind this program, know how to fix, I’d be in your debt… again!

 
Avatar
1493 posts

@mtylerb: For a laugh, I just had a play around with this on localhost. The good news is that … you can make this work! :) The bad news is … you need to re-jig your page types somewhat.

I set up an “Article Tree”, with the same structure as yours, but with the page types as follows:

Home
 > Articles ......................< -none-
 > > Free Market .................< Archive
 > > > Free Market Articles ......< -none-
 > > Guns ........................< Archive
 > > > Guns Articles .............< -none-
 etc.

If you put the default contents of the “Article” page onto any of your new archive-type-pages, then you’ll get your recent articles listing for that sub-area. I haven’t played around with pulling recent articles from each area to the top of the tree, but it must be possible. I haven’t tried doing the monthly archives, either but … where there’s a will, there’s (often!) a way….

 
Avatar
316 posts

I will give that a try, David. Thanks for your persistance!