(function($) { $.fn.dcVerticalMegaMenu = function(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' }; var options = $.extend(defaults, options); var $dcVerticalMegaMenuObj = this; return $dcVerticalMegaMenuObj.each(function(options) { $mega = $(this); if (defaults.direction == 'left') { $mega.addClass('left') } else { $mega.addClass('right') } var megaWidth = $mega.width(); $('> 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); $('> 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') } }); 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 + '" />') } var itemWidth = $('.mega-unit', $megaSub).outerWidth(true); var rowItems = $('.row:eq(0) .mega-unit', $megaSub).length; var innerItemWidth = itemWidth * rowItems; var totalItemWidth = innerItemWidth + containerPad; $('.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; $('.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); var subWidth = $megaSub.outerWidth(true); var subHeight = $container.height(); var itemHeight = $parent.outerHeight(true); $container.css({ height: subHeight + 'px', marginTop: -itemHeight + 'px', zIndex: '1000', width: subWidth + 'px' }).hide() }); var config = { sensitivity: 2, interval: 100, over: megaOver, timeout: 0, out: megaOut }; $('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(); var height = $container.height(); var itemHeight = $(this).outerHeight(true); var offset = $link.offset(); var scrollTop = $(window).scrollTop(); if (offset) { var offset = offset.top - scrollTop } else var offset = 0 - scrollTop; var bodyHeight = $(window).height(); var maxHeight = bodyHeight - offset; var xsHeight = maxHeight - outerHeight; 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);