menu with pipe (|) as separator

[georgechr]

hello guys. i read through this post and would like your help on something.

my purpose is to have a menu of: Item 1 | Item 2 | Item 3

I am using the following menu code:

Code: Select all

{if $count > 0}

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

{if $node->current == true} 
{$node->menutext}

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

{else}
<a href="{$node->url}" class="pagelink3" {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->menutext}</a>

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

and the following CSS:

Code: Select all

a.pagelink3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;
}
a.pagelink3:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000000;
	font-weight: normal;
	text-decoration: none;
}

I get the menu to display OK, and the style for my links. What i want is to be able to set an current page style and also i would like to be able to set a style for the separator. (eg. setting an image instead of "|" or styling the "|". Is this possible and if so how can i do it?

Thanks in advance.

[Dr.CSS]

I copy a default menu, depending on if I want it to drop or not determines which one, and add a class to the LI using {$node->alias} then in css tell it to use background-image on all, then target the one you don't want it on, li.contact-us {background-image: none}...

[georgechr]

can you please show me some code of what you mean?

how do i apply on a specific menu item? i dont get it

i just got the menu code from the posts above in order to get the |

[Dr.CSS]

You need to have a menu template you can work on/customize and add this where needed...

<li class="{$node->alias}

Then when you render the page and look at the source it will show, let's say you have a page Contact Us and it is the last one in menu...

<li class="contact-us

CSS...

li {background: url(path to pipe image) no-repeat right center;}
li.contact-us {background: none}

[georgechr]

i found a template to work with from this post http://forum.cmsmadesimple.org/viewtopic.php?t=32195

I am still having problems with it though. I get the pipe to show using an image but i cant get it to un-stick from the menu item.

I am using the following menu code:

Code: Select all

{* CSS classes used in this template:
#menuwrapper2 - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav2 - The id for the <ul>
.menuparent2 - The class for each <li> that has children.
.menuactive2 - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}

{assign var='last_top' value=''}
{foreach from=$nodelist item=node}
{if $node->type == 'sectionheader'}
 {assign var='last_top' value=$node->id}
{/if}
{/foreach}

<div id="menuwrapper2">
<ul id="primary-nav2">

{foreach from=$nodelist item=node name='menu'}

{assign var='last' value=''}
{if $last_top == $node->id}
 {assign var='last' value='last '}
{/if}

{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class=" menuactive2 menuparent2">
<a class="menuactive2 menuparent2" {elseif $node->current == true}
<li class="menuactive2">
<a class="menuactive2" {elseif $node->haschildren == true}
<li class="menuparent2">
<a class="{$last} menuparent2" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="{$last} sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a class="{$last}"{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="{$last} sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

And the following CSS for it:

Code: Select all

#menu_vert {
	margin: 0;
	padding: 0;
}
.clearb {
	clear: both;
}
#menuwrapper2 {
	height: 1%;
	width: auto;
	margin: 0;
	padding: 0;
}
ul#primary-nav2, ul#primary-nav2 ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float:right;
}
ul#primary-nav2 li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: normal;
	color: #ffffff;
	display: block;
	padding: 6px;
	text-decoration: none;
	background-image: url([[root_url]]/images/top_divider.gif);
	background-repeat: no-repeat;
	background-position: right center;
}
li#last a{
	background-image:none;
}
ul#primary-nav2 li {
	float: left;
}
ul#primary-nav2 li a:hover {
	background-color: transparent;
}
ul#primary-nav2 li li a:hover {
	color: #08476a;
	font-weight: normal;
}
ul#primary-nav2 li a.menuactive2 {
	color: #08476a;
	font-weight: normal;
}
ul#primary-nav2 li a.menuactive2:hover {
	color: #000000;
	font-weight: normal;
}
#primary-nav2 li li a.menuparent2 span {
	display: block;
}
* html #primary-nav2 li li a.menuparent2 span {
}
#primary-nav2 li:hover,
#primary-nav2 li.menuh,
#primary-nav2 li.menuparent2h,
#primary-nav2 li.menuactive2h {
	color: #000000
}
#primary-nav2 ul,
#primary-nav2 li:hover ul,
#primary-nav2 li:hover ul ul,
#primary-nav2 li:hover ul ul ul,
#primary-nav2 li.menuparent2h ul,
#primary-nav2 li.menuparent2h ul ul, 
#primary-nav2 li.menuparent2h ul ul ul{
	display: none;
}
#primary-nav2 li:hover ul,
#primary-nav2 ul li:hover ul,
#primary-nav2 ul ul li:hover ul,
#primary-nav2 ul ul ul li:hover ul,
#primary-nav2 li.menuparent2h ul,
#primary-nav2 ul li.menuparent2h ul,
#primary-nav2 ul ul li.menuparent2h ul,
#primary-nav2 ul ul ul li.menuparent2h ul{
	display: block;
}
#primary-nav2 li li {
	float: left;
	clear: both;
}
#primary-nav2 li li a {
	height: 1%;
}

Here is a screenshot of my menu, you can see my seperator image in red border which i deliberately cropped it with extra space so it would not stick.



Also the menu cant stay centered, is pushed to the bottom. How do i fix that?

And finally remove the last line does not work it seems. am i doing something wrong?

Can you please point me exactly the correct code and where i need to put it? I am not very professional in CSS and i am really trying hard to do what would seem as an easy task.

Please it would be great help, and very much appreciated.

Thank you in advance.

[georgechr]

anyone guys?

[Dr.CSS]

You are using it as a class but your CSS is calling it an id...

li#last should be li.last...

# = ID
. = class

A link to the site would help...

[wmisk]

I'm trying to achieve the same effect with a footer menu, getting two different effects.

When I have this in my menu template:

Code: Select all

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}">{$node->menutext}{if !$smarty.foreach.bar.last}&nbsp;&nbsp;|{/if}</a>
{/if}
{/foreach}

the pipe appears as part of the link, as shown on this page:
http://www.wmwebdesigns.com/preparedness_zone/

The A underline goes under the spaces and pipe as well as the text.

However, when I take the code out of the a, as in

Code: Select all

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
 {if $node->target}target="{$node->target}" {/if}
href="{$node->url}">{$node->menutext}</a>
{/if}
{if !$smarty.foreach.bar.last}&nbsp;&nbsp;|{/if}
{/foreach}

the pipe appears below the text link-see image.

For both I also have the reference at the top in

Code: Select all

{foreach from=$nodelist item=node name='bar'}

Any ideas? I didn't change anything in my CSS to add the pipe because it's just a line, not a background image.

[Dr.CSS]

Have you tried...


href="{$node->url}">{$node->menutext}</a>
{if !$smarty.foreach.bar.last}&nbsp;&nbsp;|{/if}
{/if}

[wmisk]

That didn't work either, gave the same result as having it outside of the {/if}, same as the picture. Thanks though!

[Rolf]

Why not use CSS to add "border-right: #000 solid 1px"...? No need to change menu template.

[slabbe]

You can simply use the ":last-child" option in your css.

Code: Select all

li {
  border-right: 1px solid black;
}

li:last-child{
  border:none;
}

[wmisk]

Thank you, that works nicely!

[slabbe]

I just started using CMSMS this week and came across this thread when I was wondering what the best way was to do this the "CMSMS way" from a management perspective, design, etc. What I ended up doing was creating separators in pages -> content.

Now I have styled separators in the horizontal top menu that an end user could rearrange, add, etc and they are automatically correctly arranged in the footer without any CSS tricks.

Sample simple footer code:

Code: Select all

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

Maybe it's just me, but... This kind of asset should be managed by the CSS. In that way, when you'll change your design, you'll get full control of your menu without having to manage items in the menu.