var ddsmoothmenu = {
//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: { down: ['downarrowclass'], right: ['rightarrowclass'] },
transition: { overtime: 300, outtime: 300 }, //duration of slide in/ out animation, in milliseconds
shadow: { enable: false, offsetx: 0, offsety: 0 }, //enable shadow?
showhidedelay: { showdelay: 100, hidedelay: 200 }, //set delay in milliseconds before sub menus appear and disappear, respectively
///////Stop configuring beyond here///////////////////////////
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit") != -1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,
getajaxmenu: function ($, setting) { //function to fetch external page containing the panel DIVs
var $menucontainer = $('#' + setting.contentsource[0]) //reference empty div on page that will hold menu
$menucontainer.html("Loading Menu...")
$.ajax({
url: setting.contentsource[1], //path to external menu file
async: true,
error: function (ajaxrequest) {
$menucontainer.html('Error fetching content. Server Response: ' + ajaxrequest.responseText)
},
success: function (content) {
$menucontainer.html(content)
ddsmoothmenu.buildmenu($, setting)
}
})
},
buildmenu: function ($, setting) {
var smoothmenu = ddsmoothmenu
//Get Main UL
var $mainmenu = $("#" + setting.mainmenuid + ">ul") //reference main menu UL
// Assign ddsmoothmenu class name to
$mainmenu.parent().get(0).className = setting.classname || "ddsmoothmenu"
// get all Li headers that contain ul
var $headers = $mainmenu.find("ul").parent();
// add events to headers hover
$headers.hover(
function (e) {
$(this).children('a:eq(0)').addClass('selected')
},
function (e) {
$(this).children('a:eq(0)').removeClass('selected')
}
)
$headers.each(function (i) { //loop through each LI header
// $curobj is an li
var $curobj = $(this).css({ zIndex: 100 - i }) //reference current LI header
// get the first ul in the curent li and set its display to block
var $subul = $(this).find('ul:eq(0)').css({ display: 'block' })
$subul.data('timers', {})
// is this li the container of an ul
this.istopheader = $curobj.parents("ul").length == 1 ? true : false //is top level header?
//$curobj.children("a:eq(0)").css( this.istopheader ? {paddingLeft :smoothmenu.arrowimages.down[2]+"px"} :{} )
$curobj.children("a:eq(0)").prepend( //add arrow images
''
)
// get the dimention of curent li
this._dimensions = { w: $curobj.outerWidth(), h: $curobj.outerHeight(), subulw: $subul.outerWidth(), subulh: $subul.outerHeight() }
//set the position of sub ul of this li
$subul.css({ top: this.istopheader && setting.orientation != 'v' ? this._dimensions.h + "px" : 0 })
if (smoothmenu.shadow.enable) {
this._shadowoffset = { x: (this.istopheader ? $subul.offset().left + smoothmenu.shadow.offsetx : this._dimensions.w), y: (this.istopheader ? $subul.offset().top + smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
if (this.istopheader)
$parentshadow = $(document.body)
else {
var $parentLi = $curobj.parents("li:eq(0)")
$parentshadow = $parentLi.get(0).$shadow
}
this.$shadow = $('').prependTo($parentshadow).css({ left: this._shadowoffset.x + 'px', top: this._shadowoffset.y + 'px' }) //insert shadow DIV and set it to parent node for the next shadow div
}
$curobj.hover(
function (e) {
var $targetul = $subul //reference UL to reveal
$targetul.css({ visibility: 'visible' });
var header = $curobj.get(0) //reference header LI as DOM object
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer = setTimeout(function () {
header._offsets = { left: $curobj.offset().left, top: $curobj.offset().top }
if (setting.direction == "ltr") {
var menuleft = header.istopheader && setting.orientation != 'v' ? 0 : header._dimensions.w
var HasHorizontalOverFlow = (header._offsets.left + menuleft + header._dimensions.subulw > $(window).width())
menuleft = (HasHorizontalOverFlow) ? (header.istopheader && setting.orientation != 'v' ? -header._dimensions.subulw + header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
}
else if (setting.direction == "rtl") {
var HasHorizontalOverFlow = (header.istopheader ? (setting.orientation != 'v' ? (header._offsets.left + header._dimensions.w - header._dimensions.subulw < 0) : header._offsets.left - header._dimensions.subulw < 0) : (header._offsets.left - header._dimensions.subulw < 0))
menuleft = (HasHorizontalOverFlow) ? (header.istopheader && setting.orientation != 'v' ? 0 : header._dimensions.w) : (header.istopheader ? ((setting.orientation != 'v') ? header._dimensions.w - header._dimensions.subulw : -header._dimensions.subulw) : -header._dimensions.w) //calculate this sub menu's offsets from its parent
//alert(header._dimensions.w)
}
if ($targetul.queue().length <= 1) { //if 1 or less queued animations
$targetul.css({ left: menuleft + "px" }).animate({ height: 'show', opacity: 'show' }, ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enable) {0
var shadowleft = header.istopheader ? $targetul.offset().left + ddsmoothmenu.shadow.offsetx : menuleft
var shadowtop = header.istopheader ? $targetul.offset().top + smoothmenu.shadow.offsety : header._shadowoffset.y
if (!header.istopheader && ddsmoothmenu.detectwebkit) { //in WebKit browsers, restore shadow's opacity to full
header.$shadow.css({ opacity: 1 })
}
header.$shadow.css({ overflow: '', width: header._dimensions.subulw + 'px', left: shadowleft + 'px', top: shadowtop + 'px' }).animate({ height: header._dimensions.subulh + 'px' }, ddsmoothmenu.transition.overtime)
}
}
}, ddsmoothmenu.showhidedelay.showdelay)
},
function (e) {
var $targetul = $subul
var header = $curobj.get(0)
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer = setTimeout(function () {
$targetul.animate({ height: 'hide', opacity: 'hide' }, ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enable) {
if (ddsmoothmenu.detectwebkit) { //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
header.$shadow.children('div:eq(0)').css({ opacity: 0 })
}
header.$shadow.css({ overflow: 'hidden' }).animate({ height: 0 }, ddsmoothmenu.transition.outtime)
}
}, ddsmoothmenu.showhidedelay.hidedelay)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({ display: 'none', visibility: 'hidden' });
},
init: function (setting) {
if (typeof setting.customtheme == "object" && setting.customtheme.length == 2) { //override default menu colors (default/hover) with custom set?
var mainmenuid = '#' + setting.mainmenuid
var mainselector = (setting.orientation == "v") ? mainmenuid : mainmenuid + ', ' + mainmenuid
}
this.shadow.enable = (document.all && !window.XMLHttpRequest) ? false : this.shadow.enable //in IE6, always disable shadow
jQuery(document).ready(function ($) { //ajax menu?
if (typeof setting.contentsource == "object") { //if external ajax menu
ddsmoothmenu.getajaxmenu($, setting)
}
else { //else if markup menu
ddsmoothmenu.buildmenu($, setting)
}
})
}
} //end ddsmoothmenu variable
'
)
// get the dimention of curent li
this._dimensions = { w: $curobj.outerWidth(), h: $curobj.outerHeight(), subulw: $subul.outerWidth(), subulh: $subul.outerHeight() }
//set the position of sub ul of this li
$subul.css({ top: this.istopheader && setting.orientation != 'v' ? this._dimensions.h + "px" : 0 })
if (smoothmenu.shadow.enable) {
this._shadowoffset = { x: (this.istopheader ? $subul.offset().left + smoothmenu.shadow.offsetx : this._dimensions.w), y: (this.istopheader ? $subul.offset().top + smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
if (this.istopheader)
$parentshadow = $(document.body)
else {
var $parentLi = $curobj.parents("li:eq(0)")
$parentshadow = $parentLi.get(0).$shadow
}
this.$shadow = $('').prependTo($parentshadow).css({ left: this._shadowoffset.x + 'px', top: this._shadowoffset.y + 'px' }) //insert shadow DIV and set it to parent node for the next shadow div
}
$curobj.hover(
function (e) {
var $targetul = $subul //reference UL to reveal
$targetul.css({ visibility: 'visible' });
var header = $curobj.get(0) //reference header LI as DOM object
clearTimeout($targetul.data('timers').hidetimer)
$targetul.data('timers').showtimer = setTimeout(function () {
header._offsets = { left: $curobj.offset().left, top: $curobj.offset().top }
if (setting.direction == "ltr") {
var menuleft = header.istopheader && setting.orientation != 'v' ? 0 : header._dimensions.w
var HasHorizontalOverFlow = (header._offsets.left + menuleft + header._dimensions.subulw > $(window).width())
menuleft = (HasHorizontalOverFlow) ? (header.istopheader && setting.orientation != 'v' ? -header._dimensions.subulw + header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
}
else if (setting.direction == "rtl") {
var HasHorizontalOverFlow = (header.istopheader ? (setting.orientation != 'v' ? (header._offsets.left + header._dimensions.w - header._dimensions.subulw < 0) : header._offsets.left - header._dimensions.subulw < 0) : (header._offsets.left - header._dimensions.subulw < 0))
menuleft = (HasHorizontalOverFlow) ? (header.istopheader && setting.orientation != 'v' ? 0 : header._dimensions.w) : (header.istopheader ? ((setting.orientation != 'v') ? header._dimensions.w - header._dimensions.subulw : -header._dimensions.subulw) : -header._dimensions.w) //calculate this sub menu's offsets from its parent
//alert(header._dimensions.w)
}
if ($targetul.queue().length <= 1) { //if 1 or less queued animations
$targetul.css({ left: menuleft + "px" }).animate({ height: 'show', opacity: 'show' }, ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enable) {0
var shadowleft = header.istopheader ? $targetul.offset().left + ddsmoothmenu.shadow.offsetx : menuleft
var shadowtop = header.istopheader ? $targetul.offset().top + smoothmenu.shadow.offsety : header._shadowoffset.y
if (!header.istopheader && ddsmoothmenu.detectwebkit) { //in WebKit browsers, restore shadow's opacity to full
header.$shadow.css({ opacity: 1 })
}
header.$shadow.css({ overflow: '', width: header._dimensions.subulw + 'px', left: shadowleft + 'px', top: shadowtop + 'px' }).animate({ height: header._dimensions.subulh + 'px' }, ddsmoothmenu.transition.overtime)
}
}
}, ddsmoothmenu.showhidedelay.showdelay)
},
function (e) {
var $targetul = $subul
var header = $curobj.get(0)
clearTimeout($targetul.data('timers').showtimer)
$targetul.data('timers').hidetimer = setTimeout(function () {
$targetul.animate({ height: 'hide', opacity: 'hide' }, ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enable) {
if (ddsmoothmenu.detectwebkit) { //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
header.$shadow.children('div:eq(0)').css({ opacity: 0 })
}
header.$shadow.css({ overflow: 'hidden' }).animate({ height: 0 }, ddsmoothmenu.transition.outtime)
}
}, ddsmoothmenu.showhidedelay.hidedelay)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({ display: 'none', visibility: 'hidden' });
},
init: function (setting) {
if (typeof setting.customtheme == "object" && setting.customtheme.length == 2) { //override default menu colors (default/hover) with custom set?
var mainmenuid = '#' + setting.mainmenuid
var mainselector = (setting.orientation == "v") ? mainmenuid : mainmenuid + ', ' + mainmenuid
}
this.shadow.enable = (document.all && !window.XMLHttpRequest) ? false : this.shadow.enable //in IE6, always disable shadow
jQuery(document).ready(function ($) { //ajax menu?
if (typeof setting.contentsource == "object") { //if external ajax menu
ddsmoothmenu.getajaxmenu($, setting)
}
else { //else if markup menu
ddsmoothmenu.buildmenu($, setting)
}
})
}
} //end ddsmoothmenu variable