Menu template:
Code: Select all
{if $count > 0}
<ul class="acmenu collapsible">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul class='acmenu menuitem collapsible'>" 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><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><a href="#">{$node->menutext}</a>
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Code: Select all
<ul class="acmenu [optional class] [optional class]">
<li><a href="#">Sub menu heading</a>
<ul>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
...
...
</ul>
<!-- This item is open at page load time -->
<li class="expand"><a href="#">Sub menu heading</a>
<ul>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
...
...
</ul>
...
...
</ul>
Code: Select all
jQuery.fn.initMenu = function() {
return this.each(function() {
$('.menuitem', this).hide();
$('li.expand > .menuitem', this).show();
$('li.expand > .menuitem', this).prev().addClass('active');
$('li a', this).click(function(e) {
e.stopImmediatePropagation();
var $this = $(this);
var theElement = $this.next();
var parent = $this.parent().parent();
if (parent.hasClass('noaccordion')) {
if (theElement[0] === undefined) {
window.location.href = this.href;
}
theElement.slideToggle('normal', function() {
var slideThis = $(this);
if (slideThis.is(':visible')) {
slideThis.prev().addClass('active');
}
else {
slideThis.prev().removeClass('active');
}
});
return false;
}
else if ( theElement.hasClass('menuitem') ) {
if (theElement.is(':visible')) {
if (parent.hasClass('collapsible')) {
$('.menuitem:visible', parent).slideUp('normal', function() {
$this.prev().removeClass('active');
});
return false;
}
return false;
}
else {
$('.menuitem:visible', parent).slideUp('normal', function() {
$this.prev().removeClass('active');
});
$('ul.menuitem li:has(ul.menuitem)').addClass('parentMenu'); // add different style for items with children
theElement.slideDown('normal', function() {
$this.prev().addClass('active');
});
return false;
}
}
});
});
};
$(document).ready(function() {
$('.acmenu').initMenu();
});
And here is some sample css to style the menu:
Code: Select all
ul.acmenu, ul.acmenu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.acmenu a {
display: block;
text-decoration: none;
}
ul.acmenu li {
margin-top: 1px;
}
ul.acmenu li a, ul.acmenu ul.acmenu li a {
background: #333;
color: #fff;
padding: 0.5em;
}
ul.acmenu li a:hover, ul.acmenu ul.acmenu li a:hover {
background: #000; /*level 1 background hover*/
}
ul.acmenu li ul li a, ul.acmenu ul.acmenu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.acmenu li ul li a:hover, ul.acmenu ul.acmenu li ul li a:hover {
background: #aaa; /* level 3 highlight colour */
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.acmenu ul.acmenu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.acmenu ul.acmenu {
border-left: 5px #f00 solid; /* level 3 border highlight*/
}
ul.acmenu a.active, ul.acmenu ul.acmenu li a.active, ul.acmenu a.active:hover, ul.acmenu ul.acmenu li a.active:hover {
text-decoration: underline;
background: #c00; /* active menu background colour */
}
ul.acmenu div.panel a, ul.acmenu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.acmenu div.panel a:hover {
color: #000;
text-decoration: underline;
}
Hope this helps someone with intentions to implement similar functionality in cmsms. Happy developing! Peace!