Multilevel (3 depth) jQuery Accordion Side Menu
Posted: Fri Nov 05, 2010 11:06 pm
I recently went through a lot of trouble trying to implement a jquery accordion side menu which could go 3 depths and with some help from Dr.CSS I finally got it up and running. Demo can be found here http://multiintech.com/default/index.php?page=jquery. I have included all the relevant code below:
Menu template:
Now for the actual accordion menu, you will need jquery-1.4.2.min.js or later and your markup should look like the following:
Here is the js you will need for the menu:
And here is some sample css to style the menu:
N.B. This menu is not to be used with separators. Actual top level parent menu items are not clickable to carry you to target pages (best used with section headers).
Hope this helps someone with intentions to implement similar functionality in cmsms. Happy developing! Peace!
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!