//** Smooth Navigational Menu- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//** Menu created: Nov 12, 2008
//** Dec 12th, 08" (v1.01): Fixed Shadow issue when multiple LIs within the same UL (level) contain sub menus: http://www.dynamicdrive.com/forums/showthread.php?t=39177&highlight=smooth
//** Feb 11th, 09" (v1.02): The currently active main menu item (LI A) now gets a CSS class of ".selected", including sub menu items.
var pathName = '/EcoView';
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', pathName + '/img/menu/down.gif', 23], right: ['rightarrowclass', pathName + '/img/menu/right.gif'] },
//arrowimages: { down: ['downarrowclass', 'http://' + document.domain + ':1148/EcoView/img/menu/down.gif', 23], right: ['rightarrowclass', 'http://' + document.domain + ':1148/EcoView/img/menu/right.gif'] },
transition: { overtime: 150, outtime: 150 }, //duration of slide in/ out animation, in milliseconds
shadow: { enabled: false, offsetx: 0, offsety: 0 },
///////Stop configuring beyond here///////////////////////////
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit") != -1, //detect WebKit browsers (Safari, Chrome etc)
buildshadow: function($, $subul) {
},
buildmenu: function($, setting) {
var smoothmenu = ddsmoothmenu
var $mainmenu = $("#" + setting.mainmenuid + ">ul") //reference main menu UL
var $headers = $mainmenu.find("ul").parent()
$headers.hover(
function(e) {
$(this).children('a:eq(0)').addClass('selected')
},
function(e) {
$(this).children('a:eq(0)').removeClass('selected');
}
)
$headers.each(function(i) {
var $curobj = $(this).css({ zIndex: 100 - i }) //reference current LI header
var $subul = $(this).find('ul:eq(0)').css({ display: 'block' })
this._dimensions = { w: this.offsetWidth, h: this.offsetHeight, subulw: $subul.outerWidth(), subulh: $subul.outerHeight() }
this.istopheader = $curobj.parents("ul").length == 1 ? true : false //is top level header?
$subul.css({ top: this.istopheader ? this._dimensions.h + "px" : 0 })
/* $curobj.children("a:eq(0)").css(this.istopheader ? { paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
''
) */
if (this.istopheader == false) {
$curobj.children("a:eq(0)").append('')
}
var mainteHover = 0;
$curobj.hover(
function(e) {
var $targetul = $(this).children("ul:eq(0)")
this._offsets = { left: $(this).offset().left, top: $(this).offset().top }
var menuleft = this.istopheader ? 0 : this._dimensions.w
menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
var myOffsets = this._offsets;
var iFrameTop = $targetul.offset().top + 36;
var iFrameLeft = this._offsets.left;
var iFrameHeight = $targetul.children("li").length * 32;
var iFrameWidth = this._dimensions.subulw;
var menuFrame = $("#menuFrame")
var iFrame = $("#menuFrame").children("iframe")
var menuFrame2 = $("#menuFrame2")
var iFrame2 = $("#menuFrame2").children("iframe")
if ($targetul.queue().length <= 1) { //if 1 or less queued animations
$targetul.css({ zIndex: 999, left: menuleft + "px", width: this._dimensions.subulw + 'px' }).animate({ height: 'show', opacity: 'show' }, ddsmoothmenu.transition.overtime)
}
iFrameLeft = $targetul.offset().left;
iFrameTop = $targetul.offset().top;
//alert($targetul.children("li").length);
if (this.istopheader) {
menuFrame.css({ visibility: 'visible', top: iFrameTop, left: iFrameLeft });
iFrame.css({ height: iFrameHeight, width: iFrameWidth, "opacity": "0" }).animate({ height: 'show', opacity: 'show' }, ddsmoothmenu.transition.overtime);
} else {
menuFrame2.css({ visibility: 'visible', top: iFrameTop, left: iFrameLeft });
iFrame2.css({ height: iFrameHeight, width: iFrameWidth, "opacity": "0" }).animate({ height: 'show', opacity: 'show' }, ddsmoothmenu.transition.overtime);
}
},
function(e) {
var $targetul = $(this).children("ul:eq(0)");
var $menuFrame = $(this).children("#menuFrame");
var $menuFrame2 = $(this).children("#menuFrame2");
if (this.istopheader) {
$menuFrame.children("iframe").animate({ height: 'hide', opacity: 'hide' }, 10);
$("#menuFrame").css({ visibility: 'hidden' });
} else {
$menuFrame2.children("iframe").animate({ height: 'hide', opacity: 'hide' }, 10);
$("#menuFrame2").css({ visibility: 'hidden' });
}
$targetul.animate({ height: 'hide', opacity: 'hide' }, ddsmoothmenu.transition.outtime)
}
) //end hover
}) //end $headers.each()
$mainmenu.find("ul").css({ display: 'none', visibility: 'visible' })
},
init: function(setting) {
if (typeof setting.customtheme == "object" && setting.customtheme.length == 2) {
var mainmenuid = '#' + setting.mainmenuid
document.write('')
}
jQuery(document).ready(function($) { //override default menu colors (default/hover) with custom set?
ddsmoothmenu.buildmenu($, setting);
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(e) { }
})
}
} //end ddsmoothmenu variable
//Initialize Menu instance(s):
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
//customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})