CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

menu with pipe (|) as separator

https://forum.cmsmadesimple.org/viewtopic.php?t=16286

Page 2 of 2

Re: menu with pipe (|) as separator

Posted: Tue Jan 10, 2012 10:34 am
by 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.

Re: menu with pipe (|) as separator

Posted: Tue Jan 10, 2012 4:54 pm
by 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}...

Re: menu with pipe (|) as separator

Posted: Wed Jan 11, 2012 7:05 am
by 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 |

Re: menu with pipe (|) as separator

Posted: Wed Jan 11, 2012 8:44 pm
by 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}

Re: menu with pipe (|) as separator

Posted: Thu Jan 12, 2012 10:45 am
by 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.

Image

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.

Re: menu with pipe (|) as separator

Posted: Mon Jan 16, 2012 7:08 am
by georgechr
anyone guys?

Re: menu with pipe (|) as separator

Posted: Tue Jan 17, 2012 4:42 pm
by 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...

Re: menu with pipe (|) as separator

Posted: Sat Jul 07, 2012 3:56 am
by 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.

Re: menu with pipe (|) as separator

Posted: Sat Jul 07, 2012 6:45 am
by Dr.CSS
Have you tried...


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

Re: menu with pipe (|) as separator

Posted: Sat Jul 07, 2012 8:25 pm
by wmisk
That didn't work either, gave the same result as having it outside of the {/if}, same as the picture. Thanks though!

Re: menu with pipe (|) as separator

Posted: Sun Jul 08, 2012 10:05 am
by Rolf
Why not use CSS to add "border-right: #000 solid 1px"...? No need to change menu template.

Re: menu with pipe (|) as separator

Posted: Tue Jul 10, 2012 1:19 am
by 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;
}

Re: menu with pipe (|) as separator

Posted: Thu Jul 12, 2012 4:28 am
by wmisk
Thank you, that works nicely!

Re: menu with pipe (|) as separator

Posted: Fri Jul 20, 2012 6:40 pm
by slabbe
zephyr wrote: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.
All times are UTC
Page 2 of 2

Powered by phpBB® Forum Software © phpBB Limited