Well, Smarty kind of is a new programming language, but it is kind of a subset of PHP and it’s not their language. It’s used in many applications and if you know PHP you can deal with Smarty as well.
Now, the CMS comes with different menu layout samples already, you just have to import one and work from there. So, you have a menu with submenu? Then go to the menu manager and import the “CSS menu” from the file templates (if you haven’t done so yet). You can delete the default CSS for the CSS menu to have a clean list structure to look at in the beginning.
Now you actually don’t need to do anything other than creating custom CSS. Firefox’s Firebug plugin will help you viewing the HTML structure. Basically you get a menu like this:
<div id="menuwrapper">
<ul id="primary-nav">
<li class="menuactive"><a href="" class="menuactive"><dfn>1: </dfn>link</a> </li>
<li class="menuparent"><a href="" class="menuparent"><dfn>2: </dfn>link</a>
<ul>
<li class="menuparent"><a href="" class="menuparent"><dfn>2.1: </dfn>link</a>
<ul>
<li><a href=""><dfn>2.1.1: </dfn>link</a> </li>
<li><a href=""><dfn>2.1.2: </dfn>link</a> </li>
</ul>
</li>
<li class="menuparent"><a href="" class="menuparent"><dfn>2.2: </dfn>link</a>
<ul>
<li><a href=""><dfn>2.2.1: </dfn>link</a> </li>
<li><a href=""><dfn>2.2.2: </dfn>link</a> </li>
</ul>
</li>
</ul>
</li>
<li class="menuparent"><a href="" class="menuparent"><dfn>3: </dfn>link</a>
<ul>
<li><a href=""><dfn>3.1: </dfn>link</a> </li>
<li><a href=""><dfn>3.2: </dfn>link</a> </li>
<li><a href=""><dfn>3.3: </dfn>link</a> </li>
</ul>
</li>
<li class="menuparent"><a href="" class="menuparent"><dfn>4: </dfn>How CMSMS Works</a>
<ul>
<li><a href=""><dfn>4.1: </dfn>link</a> </li>
<li><a href=""><dfn>4.2: </dfn>link</a> </li>
<li><a href=""><dfn>4.3: </dfn>link</a> </li>
</ul>
</li>
<li><a href=""><dfn>5: </dfn>link</a> </li>
</ul>
<div class="clearb"></div>
</div>
All important elements (and even the less important ones) have a class that you can adress in your stylesheets so you just have to style the menu. If you add or remove pages they are being added to/removed from the menu.
If you wanna change the HTML of this menu then you can edit the imported menu in the database templates section (in the Menu Manager). I have posted the default code below with some color highlighting that hopefully helps to understand it.
{* 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}
{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"><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'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><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->titleattribute != ''}title="{$node->titleattribute}"{/if}
{if $node->target ne ""} target="{$node->target}"{/if}
><dfn>{$node->hierarchy}: </dfn>{$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 class="clearb"></div>
</div>
{/if}
Each element of a kind (opening and closing tag) has the same color to identify what is opened and closed where. The grayed out parts aren’t that important to care about right now but keep them as they are. You see the blue opening div tag and the green opening ul tag. They are closed at the bottom (note the according color). Then comes some smarty for the sub list functionality, and then colored indigo are the different kinds of list items.
If you create a page in the admin section you can set it to be a page (content), a section header, or a simple separator, and as such they will show up in the menu structure (i. e. a section header will just be a list item without clickable link). And that’s why there are so many different conditional statements.
You can edit the HTML there, i. e. change class names, remove the <dfn> tags or whatever. You see that the anchors are opened but that opening tag is just closed after the Smarty if statements (that look if certain attributes are required (colored in dark red here)). Then comes the content of the anchor and then the closing tag of the anchor.
I hope that helps? It’s true that some things take a little time to set up but that’s the price of having a fully customizable solution. But that’s better than a crappy CMS where you can’t do very much.