menu with pipe (|) as separator

[SimonSchaufi]

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

[RonnyK]

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.

[SimonSchaufi]

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.

[RonnyK]

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

[Dr.CSS]

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/

[Nullig]

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

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

Nullig

[Greg]

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.

[Dr.CSS]

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

home | about us | contact |

[Nullig]

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

Nullig

[SimonSchaufi]

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}

[SimonSchaufi]

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}

[SimonSchaufi]

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;
}

[SimonSchaufi]

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}

[Tino]

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

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}

[Dr.CSS]

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...