CMS Made Simple Forums

Posted: **Thu Oct 25, 2007 9:50 am**

i would like to create a menu with the menu manager like this and i dont know where to add this horizontal line that this line is only between the items

test1 | test2 | test3

Tags: simple menu, vertical simple menu, pipe, separator, navigation to find it better with google or so

Posted: **Thu Oct 25, 2007 10:00 am**

What about giving:

border-right: 2px solid #FFFFFF;

or whatever color you want to the "div#menu_horiz li"-element.

Ronny

And please do not cross-post. I saw the question in three seperate forum-areas.

Posted: **Thu Oct 25, 2007 10:02 am**

i will delete the other ones later, ok?

it has to do with design and with the module menumanager so i didnt know where to post it.

the problem with the border is that there will be a border at the list item as well and i dont want that.

Posted: **Thu Oct 25, 2007 10:09 am**

And if you use left instead, wont that line than not be the same as the border of the container, than there is no "visible" one left/right.

P.S. I saw only later that the others where in 2 German boards, so no need to delete all, I saw at a glance three similar requests on my "Unread topics"

Ronny

Posted: **Thu Oct 25, 2007 8:01 pm**

I've tried to do this numerous times w/o luck so I just made a gif with the background transparent and just put it in with CSS...

Like here...

http://cumc.us/index.php

changed to black...

site down i guess?...

This one uses a diamond...

http://cutillos.com/

Posted: **Fri Oct 26, 2007 12:04 am**

Is it possible to add separators in your menu and style them as:

width: 1px
height: 12px
background-color: #000

Nullig

Posted: **Sat Oct 27, 2007 1:18 pm**

I use the following code in menumanager to create a menu with the | seperator in my footer.
I called the template footernav in menumanager.

Code: Select all

{if $count > 0}
<div class="footernav">|
{foreach from=$nodelist item=node}
<a href="{$node->url}">{$node->menutext}</a> |
{/foreach}
</div>
{/if}

I then call the menu in my template with:

{menu template='footernav' number_of_levels='1'}

Then style the menu with the footernav class.

Posted: **Sat Oct 27, 2007 2:31 pm**

Doesn't that still leave one on the end?...

home | about us | contact |

Posted: **Sat Oct 27, 2007 5:35 pm**

It does, but there is also one at the beginning, so it looks fine.

Nullig

Posted: **Thu May 21, 2009 8:33 pm**

found this somewhere in the forum but cannot find it any more. will post it because it belongs together.

Code: Select all

{if $count > 0}
{foreach from=$nodelist item=node}
<a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
{if $count > ($node->index+1)} | {/if}
{/foreach}
{/if}

Posted: **Thu May 21, 2009 9:08 pm**

This code is by DIGI3 and has the same result but as unordered list:

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node name=bar}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true}
<li> <a href="{$node->url}" class="currentpage" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li><a href="{$node->url}" class="else"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}
{if !$smarty.foreach.bar.last}|{/if}
{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Posted: **Thu May 21, 2009 9:14 pm**

and this code is almost the same like simple_navigation with 2 differences

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}

{if $count > 0}

{foreach from=$nodelist item=node name=menulist}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}

{if $node->current == true}
Current page is {$node->hierarchy}: {$node->menutext}

{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}

{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

{/if}
{if !$smarty.foreach.menulist.last}|{/if}
{/foreach}
{repeat string="" times=$node->depth-1}

{/if}

The CSS Code you need at least is:
- the accessibility css from cmsms to hide the Tags

Code: Select all

ul {
  list-style:none;
  margin:0;
  padding:0;
}

ul h3 {
  display:inline;
  margin:0;
  padding:0;
}

li {
  display:inline;
}

Posted: **Thu May 21, 2009 9:49 pm**

and if you dont want to have an unordered list (only usefull if you have only one level for the menu):

Code: Select all

{if $count > 0}

{foreach from=$nodelist item=node name=menulist}

{if $node->current == true}
<h3><dfn>Current page is {$node->hierarchy}: </dfn>{$node->menutext}</h3>

{elseif $node->type == 'separator'}
|

{else}
<a href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>

{/if}
{if !$smarty.foreach.menulist.last}|{/if}
{/foreach}
{/if}

Posted: **Fri Nov 20, 2009 9:33 am**

Hi all,

The below answers the very question I was about to ask, but I'm not entirely sure how to use it. Does the code below go in as a menu template? Does it only put a | between the different menu items, not at the start and finish?

I have another question for my menu layout but I'll put it in a new thread once I've sorted the seperators.

Many thanks in advance,
Tino

SimonSchaufi wrote: This code is by DIGI3 and has the same result but as unordered list:

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node name=bar}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true}
<li> <a href="{$node->url}" class="currentpage" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

{else}
<li><a href="{$node->url}" class="else"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}
{if !$smarty.foreach.bar.last}|{/if}
{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Posted: **Sat Nov 21, 2009 12:32 am**

Yes, you would go to menu manager and make new template and paste this in there name and save then use it in template, etc. etc...

CMS Made Simple Forums

menu with pipe (|) as separator

menu with pipe (|) as separator

Re: menu with| as seperator

Re: menu with| as seperator

Re: menu with| as seperator

Re: menu with| as seperator

Re: menu with| as seperator

Re: menu with| as seperator

Re: menu with| as seperator

Re: menu with| as seperator

Re: menu with pipe (|) as separator

Re: menu with pipe (|) as separator

Re: menu with pipe (|) as separator

Re: menu with pipe (|) as separator

Re: menu with pipe (|) as separator

Re: menu with pipe (|) as separator