Hi I used jQuery megamenu in my page below is jquery codes
/*
* DC Mega Menu - jQuery mega menu
* Copyright (c) 2011 Design Chemical
*
*/
(function($){
//define the defaults for the plugin and how to call it
$.fn.dcMegaMenu = function(options){
//set default options
var defaults = {
classParent: 'dc-mega',
classContainer: 'sub-container',
classSubParent: 'mega-hdr',
classSubLink: 'mega-hdr',
classWidget: 'dc-extra',
rowItems: 7,
speed: 'fast',
effect: 'fade',
event: 'hover',
fullWidth: true,
onLoad : function(){},
beforeOpen : function(){},
beforeClose: function(){}
};
//call in the default otions
var options = $.extend(defaults, options);
var $dcMegaMenuObj = this;
//act upon the element that is passed into the design
return $dcMegaMenuObj.each(function(options){
var clSubParent = defaults.classSubParent;
var clSubLink = defaults.classSubLink;
var clParent = defaults.classParent;
var clContainer = defaults.classContainer;
var clWidget = defaults.classWidget;
megaSetup();
function megaOver(){
var subNav = $('.sub',this);
$(this).addClass('mega-hover');
if(defaults.effect == 'fade'){
$(subNav).fadeIn(defaults.speed);
}
if(defaults.effect == 'slide'){
$(subNav).show(defaults.speed);
}
// beforeOpen callback;
defaults.beforeOpen.call(this);
}
function megaAction(obj){
var subNav = $('.sub',obj);
$(obj).addClass('mega-hover');
if(defaults.effect == 'fade'){
$(subNav).fadeIn(defaults.speed);
}
if(defaults.effect == 'slide'){
$(subNav).show(defaults.speed);
}
// beforeOpen callback;
defaults.beforeOpen.call(this);
}
function megaOut(){
var subNav = $('.sub',this);
$(this).removeClass('mega-hover');
$(subNav).hide();
// beforeClose callback;
defaults.beforeClose.call(this);
}
function megaActionClose(obj){
var subNav = $('.sub',obj);
$(obj).removeClass('mega-hover');
$(subNav).hide();
// beforeClose callback;
defaults.beforeClose.call(this);
}
function megaReset(){
$('li',$dcMegaMenuObj).removeClass('mega-hover');
$('.sub',$dcMegaMenuObj).hide();
}
function megaSetup(){
$arrow = '<span class="dc-mega-icon"></span>';
var clParentLi = clParent+'-li';
var menuWidth = $dcMegaMenuObj.outerWidth();
$('> li',$dcMegaMenuObj).each(function(){
//Set Width of sub
var $mainSub = $('> ul',this);
var $primaryLink = $('> a',this);
if($mainSub.length){
$primaryLink.addClass(clParent).append($arrow);
$mainSub.addClass('sub').wrap('<div class="'+clContainer+'" />');
var pos = $(this).position();
pl = pos.left;
if($('ul',$mainSub).length){
$(this).addClass(clParentLi);
$('.'+clContainer,this).addClass('mega');
$('> li',$mainSub).each(function(){
if(!$(this).hasClass(clWidget)){
$(this).addClass('mega-unit');
if($('> ul',this).length){
$(this).addClass(clSubParent);
$('> a',this).addClass(clSubParent+'-a');
} else {
$(this).addClass(clSubLink);
$('> a',this).addClass(clSubLink+'-a');
}
}
});
// Create Rows
var hdrs = $('.mega-unit',this);
rowSize = parseInt(defaults.rowItems);
for(var i = 0; i < hdrs.length; i+=rowSize){
hdrs.slice(i, i+rowSize).wrapAll('<div class="row" />');
}
// Get Sub Dimensions & Set Row Height
$mainSub.show();
// Get Position of Parent Item
var pw = $(this).width();
var pr = pl + pw;
// Check available right margin
var mr = menuWidth - pr;
// // Calc Width of Sub Menu
var subw = $mainSub.outerWidth();
var totw = $mainSub.parent('.'+clContainer).outerWidth();
var cpad = totw - subw;
if(defaults.fullWidth == true){
var fw = menuWidth - cpad;
$mainSub.parent('.'+clContainer).css({width: fw+'px'});
$dcMegaMenuObj.addClass('full-width');
}
var iw = $('.mega-unit',$mainSub).outerWidth(true);
var rowItems = $('.row:eq(0) .mega-unit',$mainSub).length;
var inneriw = iw * rowItems;
var totiw = inneriw + cpad;
// 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',inneriw+'px');
});
// Calc Required Left Margin incl additional required for right align
if(defaults.fullWidth == true){
params = {left: 0};
} else {
var ml = mr < ml ? ml + ml - mr : (totiw - pw)/2;
var subLeft = pl - ml;
// If Left Position Is Negative Set To Left Margin
var params = {left: pl+'px', marginLeft: -ml+'px'};
if(subLeft < 0){
params = {left: 0};
}else if(mr < ml){
params = {right: 0};
}
}
$('.'+clContainer,this).css(params);
// Calculate Row Height
$('.row',$mainSub).each(function(){
var rh = $(this).height();
$('.mega-unit',this).css({height: rh+'px'});
$(this).parent('.row').css({height: rh+'px'});
});
$mainSub.hide();
} else {
$('.'+clContainer,this).addClass('non-mega').css('left',pl+'px');
}
}
});
// Set position of mega dropdown to bottom of main menu
var menuHeight = $('> li > a',$dcMegaMenuObj).outerHeight(true);
$('.'+clContainer,$dcMegaMenuObj).css({top: menuHeight+'px'}).css('z-index','1000');
if(defaults.event == 'hover'){
// HoverIntent Configuration
var config = {
sensitivity: 2,
interval: 100,
over: megaOver,
timeout: 400,
out: megaOut
};
$('li',$dcMegaMenuObj).hoverIntent(config);
}
if(defaults.event == 'click'){
$('body').mouseup(function(e){
if(!$(e.target).parents('.mega-hover').length){
megaReset();
}
});
$('> li > a.'+clParent,$dcMegaMenuObj).click(function(e){
var $parentLi = $(this).parent();
if($parentLi.hasClass('mega-hover')){
megaActionClose($parentLi);
} else {
megaAction($parentLi);
}
e.preventDefault();
});
}
// onLoad callback;
defaults.onLoad.call(this);
}
});
};
})(jQuery);
and see below image:
I show megamenu with red arrow as you see whan I click on button that show with blue arrow it will show megamenu
but here I want megamenu start from place that I show with green arrow how I should change jQuery codes to do it?
Best regards
neda
