I am running the CMS Made Simple 1.2.2. I am trying to modify the menu template to integrate an accordion menu. I appreciate any help/guidance/tips as I am new to CMS Made Simple.
The current .tpl template file is as follows:
Code: Select all
{*
CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator
*}
{if $count > 0}
<ul>
{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->current == true}
<li class="currentpage">{$node->menutext}
{elseif $node->parent == true}
<li class="activeparent"><a class="activeparent" href="{$node->url}"
{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}
{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}
{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>
{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
{else}
<li><a 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 != ''} target="{$node->target}"{/if}>
{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Code: Select all
<div id="side_navigation">
<ul>
<!-- Parent -->
<li class="currentpage">Parent 1
<!-- Parent -->
<li>
<a href="#">Parent 2</a>
<!-- Start Children -->
<ul>
<li><a href="#">Child 1</a>
<li><a href="#">Child 2</a>
<li><a href="#">Child 3</a>
</ul>
<!-- End Children -->
<!-- Parent -->
<li><a href="#">Parent 3</a>
<li>
<!-- Start Parent -->
<a href="#">Parent 4</a>
<!-- Start Children -->
<ul>
<li><a href="#">Child 1</a>
<li><a href="#">Child 2</a>
<li><a href="#">Child 3</a>
</ul>
<!-- End Children -->
</ul>
</div>
Code: Select all
<div class="toggle_controller"><h3>Parent 1</h3></div>
<div class="toggle_content">
<ul>
<li>Child node 1</li>
<li>Chid node 2</li>
<li>Child node 3</li>
</ul>
</div>
<div class="toggle_controller"><h3>Parent 2</h3></div>
<div class="toggle_content">
<ul>
<li>Child node 1</li>
<li>Chid node 2</li>
<li>Child node 3</li>
</ul>
</div>
