Ну вот кратко...
css
[spoiler]/* Vertical Mega Menu Styles */
.dcjq-vertical-mega-menu .menu{
font: bold 12px Arial, sans-serif;
line-height: 16px;
position: relative; /* Required */
border: 1px solid #999;
border-bottom: none;
}
.dcjq-vertical-mega-menu .menu li a {
display: block;
color: #000;
padding: 11px 18px 11px 5px;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
border-bottom: 1px solid #999;
background: url(../image/bg_nav.png) repeat-x 0 0;
}
.dcjq-vertical-mega-menu .menu li a:hover, .dcjq-vertical-mega-menu .menu li.mega-hover a {
background-position: 0 -40px;
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.dcjq-vertical-mega-menu .menu li a.dc-mega {position: relative;}
.dcjq-vertical-mega-menu .menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 14px;
right: 15px;
width: 6px;
height: 8px;
background: url(../image/arrow_right.png) no-repeat -6px 0;
}
/* Mega menu container */
.dcjq-vertical-mega-menu .menu li .sub-container {
position: absolute; /* Required */
overflow: hidden;
background: url(../image/bg_menu.png) no-repeat 100% 100%; /* Add the drop shadow */
padding: 0 13px 17px 0; /* Padding for drop shadow */
}
.dcjq-vertical-mega-menu .menu li .sub-container .sub {
border: none;
padding: 15px 15px 5px 15px;
background: #fff url(../image/bg_grad_top.png) repeat-x 0 0;
border-top: 1px solid #ccc;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ccc;
}
.dcjq-vertical-mega-menu .menu li .sub .row {width: 100%; overflow: hidden;}
.dcjq-vertical-mega-menu .menu li .sub li {
float: none;
width: 140px;
font-size: 1em;
font-weight: normal;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr {float: left;margin: 0 5px 10px 5px;}
.dcjq-vertical-mega-menu .menu li .sub a, .dcjq-vertical-mega-menu .menu.left li .sub a {
background: none;
border: none;
text-shadow: none;
float: none;
color: #000;
display: block;
text-decoration: none;
font-size: 0.9em;
margin-bottom: 0;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a {
background: url(../image/bg_nav.png) repeat-x 0 -40px;
padding: 5px;
margin-bottom:5px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #000;
text-align: left;
}
.dcjq-vertical-mega-menu .menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
.dcjq-vertical-mega-menu .menu .sub li.mega-hdr li {margin-bottom: 3px;}
.dcjq-vertical-mega-menu .menu .sub li a {
padding: 3px 0px 3px 12px;
background: url(../image/bullet.png) no-repeat 3px 8px;
font-weight: normal;
text-transform: capitalize; font-size: 12px;
}
.dcjq-vertical-mega-menu .menu .sub li a:hover {color: #fff; background: #000 url(../image/bullet_white.png) no-repeat 5px 8px;}[/spoiler]
в head
[spoiler]<script type='text/javascript' src='./css/css_{$smarty.const.CONF_COLOR_SCHEME}/javascript
<script type="text/javascript">
$(document).ready(function($){
$('#mega-1').dcVerticalMegaMenu({
speed: 'fast',
effect: 'slide',
direction: 'right'
});});</script>[/spoiler]
jquery.dcmegamenu.1.3.3.js
[spoiler]/**
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
*
* @param f onMouseOver function || An object with configuration options
* @param g onMouseOut function || Nothing (use configuration options object)
* @author Brian Cherne <
[email protected]>
*/
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
/*
* DC Vertical Mega Menu - jQuery vertical mega menu
* Copyright (c) 2011 Design Chemical
*
* Dual licensed under the MIT and GPL licenses:
*
http://www.opensource.org/licenses/mit-license.php *
http://www.gnu.org/licenses/gpl.html *
*/
(function($){
//define the new for the plugin ans how to call it
$.fn.dcVerticalMegaMenu = function(options){
//set default options
var defaults = {
classParent: 'dc-mega',
arrow: true,
classArrow: 'dc-mega-icon',
classContainer: 'sub-container',
classSubMenu: 'sub',
classMega: 'mega',
classSubParent: 'mega-hdr',
classSubLink: 'mega-hdr',
classRow: 'row',
rowItems: 3,
speed: 'fast',
effect: 'show',
direction: 'right'
};
//call in the default otions
var options = $.extend(defaults, options);
var $dcVerticalMegaMenuObj = this;
//act upon the element that is passed into the design
return $dcVerticalMegaMenuObj.each(function(options){
$mega = $(this);
if(defaults.direction == 'left'){
$mega.addClass('left');
} else {
$mega.addClass('right');
}
// Get Menu Width
var megaWidth = $mega.width();
// Set up menu
$('> li',$mega).each(function(){
var $parent = $(this);
var $megaSub = $('> ul',$parent);
if($megaSub.length > 0){
$('> a',$parent).addClass(defaults.classParent).append('<span class="'+defaults.classArrow+'"></span>');
$megaSub.addClass(defaults.classSubMenu).wrap('<div class="'+defaults.classContainer+'" />');
var $container = $('.'+defaults.classContainer,$parent);
if($('ul',$megaSub).length > 0){
$parent.addClass(defaults.classParent+'-li');
$container.addClass(defaults.classMega);
// Set sub headers
$('> li',$megaSub).each(function(){
$(this).addClass('mega-unit');
if($('> ul',this).length){
$(this).addClass(defaults.classSubParent);
$('> a',this).addClass(defaults.classSubParent+'-a');
} else {
$(this).addClass(defaults.classSubLink);
$('> a',this).addClass(defaults.classSubLink+'-a');
}
});
// Create Rows
var hdrs = $('.mega-unit',$parent);
rowSize = parseInt(defaults.rowItems);
for(var i = 0; i < hdrs.length; i+=rowSize){
hdrs.slice(i, i+rowSize).wrapAll('<div class="'+defaults.classRow+'" />');
}
// Get mega dimensions
var itemWidth = $('.mega-unit',$megaSub).outerWidth(true);
var rowItems = $('.row:eq(0) .mega-unit',$megaSub).length;
var innerItemWidth = itemWidth * rowItems;
var totalItemWidth = innerItemWidth + containerPad;
// Set mega header height
$('.row',this).each(function(){
$('.mega-unit:last',this).addClass('last');
var maxValue = undefined;
$('.mega-unit > a',this).each(function(){
var val = parseInt($(this).height());
if (maxValue === undefined || maxValue < val){
maxValue = val;
}
});
$('.mega-unit > a',this).css('height',maxValue+'px');
$(this).css('width',innerItemWidth+'px');
});
var subWidth = $megaSub.outerWidth(true);
var totalWidth = $container.outerWidth(true);
var containerPad = totalWidth - subWidth;
// Calculate Row Height
$('.row',$megaSub).each(function(){
var rowHeight = $(this).height();
$(this).parent('.row').css('height',rowHeight+'px');
});
$('.row:last',$megaSub).addClass('last');
$('.row:first',$megaSub).addClass('first');
} else {
$container.addClass('non-'+defaults.classMega);
}
}
var $container = $('.'+defaults.classContainer,$parent);
// Get flyout height
var subHeight = $container.height();
var itemHeight = $parent.outerHeight(true);
// Set position to top of parent
$container.css({
height: subHeight+'px',
marginTop: -itemHeight+'px',
zIndex: '1000',
width: subWidth+'px'
}).hide();
});
// HoverIntent Configuration
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaOver, // function = onMouseOver callback (REQUIRED)
timeout: 0, // number = milliseconds delay before onMouseOut
out: megaOut // function = onMouseOut callback (REQUIRED)
};
$('li',$dcVerticalMegaMenuObj).hoverIntent(config);
function megaOver(){
$(this).addClass('mega-hover');
var $link = $('> a',this);
var $subNav = $('.sub',this);
var $container = $('.sub-container',this);
var width = $container.width();
var outerHeight = $container.outerHeight(true);
var height = $container.height();
var itemHeight = $(this).outerHeight(true);
var offset = $link.offset();
var scrollTop = $(window).scrollTop();
offset = offset.top - scrollTop
var bodyHeight = $(window).height();
var maxHeight = bodyHeight - offset;
var xsHeight = maxHeight - outerHeight - itemHeight;
if(xsHeight < 0){
var containerMargin = xsHeight - itemHeight;
$container.css({marginTop: containerMargin+'px'});
}
var containerPosition = {right: megaWidth};
if(defaults.direction == 'right'){
containerPosition = {left: megaWidth};
}
if(defaults.effect == 'fade'){
$container.css(containerPosition).fadeIn(defaults.speed);
}
if(defaults.effect == 'show'){
$container.css(containerPosition).show();
}
if(defaults.effect == 'slide'){
$container.css({
width: 0,
height: 0,
opacity: 0});
if(defaults.direction == 'right'){
$container.show().css({
left: megaWidth
});
} else {
$container.show().css({
right: megaWidth
});
}
$container.animate({
width: width,
height: height,
opacity: 1
}, defaults.speed);
}
}
function megaOut(){
$(this).removeClass('mega-hover');
var $container = $('.sub-container',this);
$container.hide();
}
});
};
})(jQuery);
[/spoiler]
и сам код category_tree.tpl.html(работает и по старому)
[spoiler]{if $smarty.const.CONF_SHOW_MENU == 1}
<div class="dcjq-vertical-mega-menu">
<ul id="mega-1" class="menu">
{assign var="old" value=-1}
{assign var="ul_open" value=0}
{assign var="sub" value=0}
{section name=i loop=$categories_tree}
{if $categories_tree
.level==$old}
</li>
{elseif $categories_tree.level>$old && $smarty.section.i.index!=0}
<ul>{assign var="ul_open" value=$ul_open+1} {assign var="sub" value=1}
{/if}
{if $categories_tree.level<$old}
</ul>{assign var="ul_open" value=$ul_open-1}
{/if}
{if $categories_tree.level==0 && $ul_open>0}
</ul>{assign var="ul_open" value=$ul_open-1}
{/if}
{if $smarty.section.i.index==$categories_tree|@count && $ul_open>0}</ul>{/if}
{if $categories_tree.level ne 0}
{if $sub}<li class="subfirst">{assign var="sub" value=0}{else}<li>{/if}
<a style="width:100%;" href="./{$categories_tree.hurl}" {if $categoryID==$categories_tree.categoryID} class="pressed" {/if}><span>{$categories_tree.name}</span></a>
{else}
<li class={if $smarty.section.i.index==0}"topfirst"{elseif $smarty.section.i.index==$categories_tree|@count-1}"toplast"{else}"topmenu"{/if}>
<a href="./{$categories_tree.hurl} {if $categoryID==$categories_tree.categoryID}class="pressed"{/if}"><span>{$categories_tree.name}</span></a>
{/if}
{assign var="old" value= $categories_tree.level}
{/section}
{if $ul_open ne 0}</ul>{/if}
</ul></div>
<br>
{else}
<div class="box">
<div class="top"><img src="./images/icon_cat.png" alt="" /> {$smarty.const.ADMIN_CATEGORY_TITLE}</div>
<div class="middle cat">
<ul id="verticalmenu" class="glossymenu">
{assign var="old" value=0}
{assign var="ja" value=0}
{section name=i loop=$categories_tree}
{if $categories_tree.level==$old}</li> {elseif $categories_tree.level>$old} <ul> {/if}
{if $categories_tree.level<$old && $old>1}</li>{/if}
{if $categories_tree.level<$old} </ul> {/if}
<li><a href="./{$categories_tree.hurl}" {if $categoryID == $categories_tree.categoryID} class="selected" {/if}>{$categories_tree.name}</a>
{assign var="old" value= $categories_tree.level}
{/section}
</ul>
</div>
<div class="bottom"></div>
</div>
{/if}[/spoiler]
