CMS Made Simple Forums

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>