[solved] how to create a menu without a list?

[ntmr]

I'd like to make a menu for a simple site without subpages at the moment; what I want to have is just a line of items separated by a character, like so:

home | photos | bio

Is this possible and if so, how?

[hexdj]

Have you tried the basic menu that comes with CMS?

If you don't need sub pages it doesn't matter because if you don't create child pages they won't show under any menu.

The great thing about Menu Manager is that it changes if you change names of pages, and so on, with out having to do it manually, which is one of the reasons why you have a content manager, isn't it 

[Dr.CSS]

You will have top make a new menu template, try the minimum one and remove all calls for ul and li...

[ntmr]

hexdj,
I think I did try it but maybe I'll give it another spin. Any hints on what CSS file I should use with it?

Dr. CSS,
Good idea, but can I insert a separator (like a pipe |) in there?

[Joe McPlumber]

Lists have become the de facto standard for navigation. When we get our tag back it'll be even more sensible, but still a sort of list.

You can make a horizontal list with simulated pipes by adding this to your stylesheet...

Code: Select all

.menu li{
  display: inline;
  list-style: none;
  border-left: 1px solid #000;
  padding: .5em 1em;
}
.menu li:first-child{
  border-left: none;
}

...then just give your a class of "menu".  Or do it the other way around, if your menu template already has a class attribute. Of course it won't work right in IE6; the border will be present on the left of the first item. *shrug* but nobody uses IE6 anymore.

-Joe

[ntmr]

I was thinking that something to this effect could probably be whipped up with {cms_selflink dir="next"} and some PHP (which I sadly have not yet learned). Anybody have the skills to whip up something like this? It seems to me that it should be relatively simple. I'm also thinking it would involve at least one while statement (so you could take care of reaching the last page and all that).

[Dr.CSS]

Make a new menu template from a copy of the one used now and add a {$node->alias} to class of a then you can add an image in the CSS...

Or read the smarty manual to find the last call and use it in a menu template...

Or hire someone to make it for you...

[ntmr]

Alright, I've got this working. With help from blue_francis14's post over here, I was able to write a simple pipe separated menu template. Parent/child distinction isn't really supported; all the active pages (children with inactive parents excluded because that's the way CMSms works) are shown one right after another with the pipe in between. The current page is non-linked. Here it is:

Code: Select all

{* Constructed by Nathaniel Robertson (http://twitter.com/robertson_n) (http://forum.cmsmadesimple.org/index.php?action=profile;u=20682) with some help from CMS Made Simple forum member blue_francis14's version.
-----------------------------------------------------------------------------
Use the class .currentpage (no period, that's just the way you'd put it in CSS) to style the display of the menu item for the current page. Use .menuitem to style the other menu items (but not the current page). If you want to style the pipes (or whatever delimiter you change it to), create a span with a class name around them.
 *} 

{if $count > 0}
{foreach from=$nodelist item=node name=foo}

{if $node->current == true and $smarty.foreach.foo.last == true}
<span class="currentpage">{$node->menutext}</span>

{* more things  go after here *}

{elseif $node->current == true}
<span class="currentpage">{$node->menutext}</span> |

{elseif $smarty.foreach.foo.last != true}
<a href="{$node->url}"><span class="menuitem">{$node->menutext}</span></a> |

{else}
<a href="{$node->url}"><span class="menuitem">{$node->menutext}</span></a>

{* more things stop here *}
{/if}

{* end of script around here *}
{/foreach}
{/if}

blue_francis14's version works fairly well, too, especially if you want your menu in a list. I wrapped it in a div called middlenav in my template and used the following CSS to make it horizontal and get rid of the space above and below it when I was trying it out:

Code: Select all

#middlenav {
  font-size: 17px;
  text-align: center;
  margin: -1em 0;
}
#middlenav li {
  display: inline;
}

The text-align and the font-size are really not necessary, it's just what I was using for styling. You may also want to check out this article to try and get the menu perfectly centered if that's what you want, since the inline displayed list is not perfectly centered even with text-align: center;. I haven't done it myself, by the way.

Edit: 8.23.09: Edited my code to reflect a fix I made; their were a couple unclosed spans.