Frog CMS

Hi Mitnick:

This is how I did it:

1. Click on the green + icon in the admin view of the page at the top of the tree for your submenus.
2. Put "sidebar" in the pop-up box and click "Add"
3. Click the "sidebar" tab (beside "body" tab) you have just added.

4. Put this code into the sidebar:

   <h3>Sidebar Title</h3> <?php $page_submenu = $this->find('/YOUR-PAGE-HERE/'); ?> <ul> <?php foreach ($page_submenu ->children(array()) as $menuPage): ?> <li><?php echo $menuPage->link() ?></li> <?php endforeach; ?> </ul>

Notes: where I have "YOUR-PAGE-HERE", put in the "slug" of the page this sidebar is attached to (find the slug under the "Metadata" link).

I think that should work! :) I have made the variables more "abstract" here than in my actual page, so I hope it's all OK.

Let us know how you get on.

Right. Something funny going on here. I'll try one more time, and if this doesn't work, I'll leave it for Philippe to clean up! :)

<h3>Sidebar Title</h3> <?php $page_submenu = $this->find('/YOUR-PAGE-HERE/'); ?> <ul> <?php foreach ($page_submenu ->children(array()) as $menuPage): ?> <li><?php echo $menuPage->link() ?></li> <?php endforeach; ?> </ul>

Haha David .. use 4 spaces or a tab before your code to be set as code ;)

<h3>Sidebar Title</h3>
<?php $page_submenu = $this->find('/YOUR-PAGE-HERE/'); ?>
<ul>
<?php foreach ($page_submenu ->children(array()) as $menuPage): ?>
    <li><?php echo $menuPage->link() ?></li>
<?php endforeach; ?>
</ul>

> use 4 spaces or a tab before your code to be set as code ;)

I thought I did that the first time!? Maybe I only had three.... At least I know now it is supposed to work!

I can think of a couple of ways you can do that. Fancy CSS and a bit of PHP, mainly. :D

BUT, I have to ask: why do you want to have submenus? There's an age-old mantra with site design: "Everything should be accessible within 3 clicks from the home page." Keeping in mind that sub-menus annoy users more often than not, and will not always show up in every browser (no matter how you do them), they are not an end-run around the mantra.

I have learned that, as a rule, submenus tend to go fairly unused by end-users. They only serve as a convenience for the site designer. You would not believe how many times I've heard things like "I wish people would just READ the pages I put up!", only to discover that the pages in question are only available via a submenu (or, worse, a search).

Also, another rule of thumb: if you do have to use a submenu for some reason (corporate mandate, for example), keep it 3-5 items short. Less than 3, and it is pointless. More than 5, and users will be overwhelmed.

In my opinion, almost every instance of a site with submenus can be better designed with a better structure and contextual links.

As an example: Let's say that you have a "Products" page with 8 products. One thing you will see companies do often is have a submenu with each of the products. That solves that, right? After all, you can get to each of the products, right? Well, no.

You see, 8 products is enough to confuse the average user (pretend that your average end-user is an untrained monkey, it makes for easier site design). Especially if you have different "editions" of your products. Or if you have similarly named products. These are common cases.

How will the average end-user know which to pick? They won't. They will just choose one. And usually choose wrong. And get frustrated. And go to a competitor with a better site, not telling you why they never even downloaded.

So, what can you do to fix it? In this case, have a single Products page in the navigation. On this page, you can list your products. I find that enumerating in a fashion like this (for a Products example) works well: (And I hope Markdown cooperates…)

• Product Name — This is where the product description goes. Don't go into too much detail, just enough to help the customer differentiate the choices. Then, follow with a set of links. Features Pricing Try Buy

Also, having a comparison chart on that page, with appropriate links (feature-specific pages, buy/try/download links, links to the product pages, etc.) embedded in the chart works very well.

With the above, you manage to avoid the clutter and general confusion generated by submenus. I chose a "Products" page as an example, as almost everyone has come across both good and bad examples of them. ;) But, the same concept holds true regardless of the type of page.

If you want to see an excellent example of a well-done Products page, let me know and I'll track one down. (One that I have no connection with, even! ;) ) Unfortunately, most well-done pages don't get the recognition they deserve by "Corporate", as the mandate tends to be sub-menus, and those who write the mandates seem to never look at the main pages in the menu. That's no excuse for being a good web designer and helping your customers, in spite of your policymakers, though! ;)

Also, since Frog has built-in support for sidebars, use them to your advantage! Since your "main" page for the group will be more trafficked now than otherwise, feel free to put news, promotions, anything else that your captive audience may appreciate.

If, in spite of all this, you still insist on a submenu, let me know. I'll poke at the CSS to see if I can't figure out how to do it with Frog. But, the basic idea is that you make an unordered list and show it only when you hover over the list item in the header. You can use the same sidebar code (practically unmodified) to generate the list in your header. The hard part is the CSS! ;)

Woo hoo! The code worked! :))

Also, I meant to say: in the Extra Submenu section above, where you get this line:

<?php $page_submenu = $this->find('/YOUR-PAGE-HERE/SUB-PAGE-HERE/'); ?>

you need to put the slug for the level [1] page, and the level [2] page. If it was the same as the tree diagram above, it would be something like:

<?php $page_submenu = $this->find('/page2/two-suba/'); ?>

or something like that. I hope you see what I mean!

(Can we get an "edit post" function, Philippe?! ;) )

In the second sentence above, "Not that with the..." should read "NotE that with the...". Sorry.

Humm maybe I can do that. It will be my christmas gift for you :P

I use Philippe's sitemap function to generate a navigation tree. In my case it didn't need to be contextual (all of the tree is always visible).

Suckerfish is a client part (CSS) with a relativly simple list structure. So I will say yes you can do the list for your suckerfish drop down.

You will have to pass trow 2 "imbricked" foreach and create the nested list.

You markdown is correct :), my english is so so .. I do my best!!