The Last Horizontal Menu Item in CMS Made Simple (CMSMS)

From time to time the style of a “last” menu item needs to be styled differently. This is typically the case when you’re using something like border-right: 1px solid #ccc; to separate your menu items, and don’t want to have the border on your last menu item. You can easily accomplish this in CSS, but when you combine the dynamic nature of the CMSMS (CMS Made Simple) menu system, you can add some simple code to your menu template to automatically add the style for you on the last menu item.

Based off of the “cssmenu.tpl” menu template in the latest version of CMSMS (1.8.2), the following highlighted bits of code were added, creating an ID of #last to the last menu item. This update to the “cssmenu.tpl” file was also cleaned up a bit to make it easier to edit and cleaner when viewing the source from a browser.

Update to “cssmenu.tpl”

{if $count > 0}
<div id="menu">
    <ul>
        {foreach from=$nodelist item=node name=foo}
        {if $node->depth > $node->prevdepth}
        {repeat string="<ul>" 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"{if $smarty.foreach.foo.last} id="last"{/if}><a class="menuactive" {elseif $node->haschildren == true}
        <li class="menuparent"><a class="menuparent" {elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>{elseif $node->type == 'separator'}
        {else}
        <li{if $smarty.foreach.foo.last} id="last"{/if}><a {/if}{if $node->type != 'sectionheader' and $node->type != 'separator'}href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>{elseif $node->type == 'sectionheader'}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>{/if}{/foreach}{repeat string="</li></ul>" times=$node->depth-1}</li>
    </ul>
</div><!-- /menu -->
{/if}

Update Your StyleSheet

Now you can turn off the border (or whatever you’d like) on the last menu item through your StyleSheet.

#menu li#last { border: none; }

You can actually use this in other creative ways — I use for hiding the last horizontal border when listing my blog entries.