Last Horizontal menu item without a separator/piping

[Dipankar]

Do anybody know how to remove the separator or piping of the last menu item on the extreme right hand side of a  horizontal menu.

separator or piping is generated using a border-right property for all the menu items, but I don't want that in the last menu item on the right.

Any help or suggestion in this regard will be very helpful....

Thanks

[tophers]

It seems like the best (or maybe only!) way to accomplish this is to assign a specific ID or Class to each , then target that with your CSS to remove the border. There's a post here (http://forum.cmsmadesimple.org/index.ph ... 533.0.html) that speaks to that, but here's the relevant bit:

If you look your menu template i.e. "simple_navigation" there you find . By making it alias}"> will add page alias name to its class. Since alias is unique to each page you have unique identifier on current page tag. Adding same to other in menu template tags you can create your menu as you want it by editing your CSS.

You could adapt it to assign an ID instead (if, for instance, you were using Class for something else). Then add in some css like:

Code: Select all

ul.primary-nav li.yourclassnamehere {
  border-right: none;
}

Hope this helps.

[KO]

Alternative way is to use "Smarty - Last" where it does not matter which item is last. Unfortunately it wont work with CSS menus where last menu item might not be on first menu level.

More.. http://www.smarty.net/manual/en/languag ... oreach.php

[KO]

So basicly you do 2 things. you add

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

And then you add to every element (or some other element?) following.




ofcourse only the last element will get that id but as it can have active, noneactive ... versions from it you need to add it to every element. Remember that it won't work with CSS drop menu unless last menu item does not have children. You need to find some other trick for that.

[KO]

Are you definately sure that this does not work? I copied your template and tested it and for me last has id="last". Can't find anything wrong with it.

[mox]

Hi,
after meny time I use this good trick, now I'm in a different but similar situation.
My top menu voices are all section header, because the client need this behaviour.
In the top of the template I assign at foreache cycle:

Code: Select all

<ul id="primary-nav">
{foreach from=$nodelist item=node name=linod}

But the problem is even if span it is a node, when I assign in the last part of the template

Code: Select all

{elseif $node->type == 'sectionheader'}
><span {if $smarty.foreach.linod.last} id="last"{/if} class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}

The section header don't load the id
There is some solution?

Thanks
Maurizio

[Dr.CSS]

Not sure what type of menu your doing but this is what I use on drop down menus...

{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each 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->depth == 1}
  {assign var='last_top' value=$node->id}
{/if}
{/foreach}




{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='' times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string=' ' times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

current == true}

haschildren == true}

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

{elseif empty($last)}

type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}">{$node->menutext}
{elseif $node->type == 'sectionheader'}
>{$node->menutext}
{/if}
{/foreach}
{repeat string=' ' times=$node->depth-1}




{/if}

Thanks to Ted/calguy1000...

[mox]

Really interesting solution, but it's not my case.
I can't give you a link, because is inside a protect area, but, the menu is like
menu1 | menu2 | menu3 | menu4 | menu5 | menu6 |
            sub1_2 | sub1_3|              sub1_5| sub1_6|
            sub2_2 | sub2_3|              sub2_5| sub2_6|

and so on.
For a template question I assign to the tag a right border, so that it'snt more higher than the characters.

The menu template:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node name=linod}
{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 {if $smarty.foreach.linod.last} id="last" {/if} class="menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li {if $smarty.foreach.linod.last} id="last" {/if} class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li {if $smarty.foreach.linod.last} id="last" {/if} class="menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li {if $smarty.foreach.linod.last} id="last" {/if} class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li {if $smarty.foreach.linod.last} id="last" {/if} style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li {if $smarty.foreach.linod.last} id="last" {/if}>
<a {if $smarty.foreach.linod.last} id="last" {/if}{/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="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

The portion of css

Code: Select all

ul#primary-nav li a {
        border-right: solid 2px #10569C;
[...]

li#last a{
        border:none !important
        }

When I have normal link at top menu item's, it's all ok, but in this case I have all section header the item don't handled id="last", but the last subitem of the last top menu, take the id="last"; in the example below, sub2_6

Any help is appreciated
Maurizio

[KO]

Can you put that border on left side (on first level) but not on the first item? If you can it might be simple solution then.

[mox]

Ok, from this example:
http://forum.cmsmadesimple.org/index.php/topic,38837.0.html,
I modify my menu template in this way:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - 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="menuwrapper">
<ul id="primary-nav">

{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=" menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent">
<a class="{$last} menuparent" {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}

the relevant part is

Code: Select all

{if $node->type == 'sectionheader'}

at the top of the template.

Now, even if all the top menu are sectionheader, I can assign a class to the last one

Thanks to all
Maurizio

p.s. The original author should change the title of this thread with [SOLVED]