//** 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 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', 'images/down.gif', 23], right:['rightarrowclass', 'images/right.gif']},
arrowimages: { down: ['downarrowclass', 'images/down.gif', 0], right: ['rightarrowclass', 'images/right.gif'] },
transition: { overtime: 300, outtime: 300 }, //duration of slide in/ out animation, in milliseconds
shadow: { enabled: true, offsetx: 5, offsety: 5 },
///////Stop configuring beyond here///////////////////////////
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit") != -1, //detect WebKit browsers (Safari, Chrome etc)
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)
}
})
},
buildshadow: function($, $subul) {
},
buildmenu: function($, setting) {
var smoothmenu = ddsmoothmenu
var $mainmenu = $("#" + setting.mainmenuid + ">ul") //reference main menu UL
var $headers = $mainmenu.find("ul").parent()
var $subitems = $mainmenu.find("li")
var curpage = window.location.pathname
var tempText = curpage
var resultPosition = tempText.lastIndexOf('/')
if (resultPosition > -1) {
tempText = tempText.substring(resultPosition + 1, tempText.length)
}
resultPosition = tempText.indexOf('?')
if (resultPosition > -1) {
tempText = tempText.substring(0, resultPosition)
}
curpage = tempText.toLowerCase()
$subitems.each(function(i) {
var $curobj = $(this).css({ zIndex: 100 - i })
var $subul = $(this).find('ul:eq(0)').css({ display: 'block' })
$curobj.hover(
function(e) {
/* Added */
var loopCount = 0
var $curparent = $curobj
var checkfortopheader = $curparent.parents("ul").length == 0 ? true : false //is top level header?
while (!checkfortopheader) {
if (loopCount >= 15) {
break
}
$curparent = $curparent.parent()
checkfortopheader = $curparent.parents("ul").length == 1 ? true : false //is top level header?
loopCount += 1
}
if (loopCount < 45) {
$curparent = $curparent.parent()
tempText = $curparent.children('a:eq(0)').text()
tempText = tempText.replace(/^\s*|\s*$/, '')
tempText = tempText.replace(/ /g, '-')
tempText = tempText.replace(/[^a-z-]/gi, '')
tempText = tempText.replace(/^-*|-*$/, '')
$curparent.children('a:eq(0)').addClass('btn-' + tempText.toLowerCase() + '-sub' + loopCount)
}
/* End Added */
},
function(e) {
/* Added */
var loopCount = 0
var $curparent = $curobj
var checkfortopheader = $curparent.parents("ul").length == 0 ? true : false //is top level header?
while (!checkfortopheader) {
if (loopCount >= 15) {
break
}
$curparent = $curparent.parent()
checkfortopheader = $curparent.parents("ul").length == 1 ? true : false //is top level header?
loopCount += 1
}
if (loopCount < 15) {
$curparent = $curparent.parent()
tempText = $curparent.children('a:eq(0)').text()
tempText = tempText.replace(/^\s*|\s*$/, '')
tempText = tempText.replace(/ /g, '-')
tempText = tempText.replace(/[^a-z-]/gi, '')
tempText = tempText.replace(/^-*|-*$/, '')
$curparent.children('a:eq(0)').removeClass('btn-' + tempText.toLowerCase() + '-sub' + loopCount)
}
/* End Added */
}
) //end hover
}) //end $subitems.each()
$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
''
)
/* Added */
if (this.istopheader) {
var $workonobj = $curobj.children("a:eq(0)")
var $tempTextP = $workonobj.attr("href")
var resultPositionp = $tempTextP.lastIndexOf('/')
if (resultPositionp > -1) {
$tempTextP = $tempTextP.substring(resultPositionp + 1, $tempTextP.length)
}
//alert('here')
resultPositionp = $tempTextP.indexOf('_')
if (resultPositionp > -1) {
$tempTextP = $tempTextP.substring(0, resultPositionp)
}
$tempTextP = $tempTextP.toLowerCase()
curpageP = curpage
resultPositionp = curpageP.indexOf('_')
if (resultPositionp > -1) {
curpageP = curpageP.substring(0, resultPositionp)
}
if (curpageP == $tempTextP) {
tempTextP = $workonobj.text()
tempTextP = tempTextP.replace(/^\s*|\s*$/, '')
tempTextP = tempTextP.replace(/ /g, '-')
tempTextP = tempTextP.replace(/[^a-z-]/gi, '')
tempTextP = tempTextP.replace(/^-*|-*$/, '')
$workonobj.removeClass('btn-' + tempTextP.toLowerCase() + '-sub2')
$workonobj.addClass('btn-' + tempTextP.toLowerCase() + '-sub2')
}
}
/* End Added */
if (smoothmenu.shadow.enabled) {
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 = $(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
if ($targetul.queue().length <= 1) { //if 1 or less queued animations
$targetul.css({ left: menuleft + "px", width: this._dimensions.subulw + 'px' }).animate({ height: 'show', opacity: 'show' }, ddsmoothmenu.transition.overtime)
if (smoothmenu.shadow.enabled) {
var shadowleft = this.istopheader ? $targetul.offset().left + ddsmoothmenu.shadow.offsetx : menuleft
var shadowtop = this.istopheader ? $targetul.offset().top + smoothmenu.shadow.offsety : this._shadowoffset.y
if (!this.istopheader && ddsmoothmenu.detectwebkit) { //in WebKit browsers, restore shadow's opacity to full
this.$shadow.css({ opacity: 1 })
}
this.$shadow.css({ overflow: '', width: this._dimensions.subulw + 'px', left: shadowleft + 'px', top: shadowtop + 'px' }).animate({ height: this._dimensions.subulh + 'px' }, ddsmoothmenu.transition.overtime)
}
}
},
function(e) {
var $targetul = $(this).children("ul:eq(0)")
$targetul.animate({ height: 'hide', opacity: 'hide' }, ddsmoothmenu.transition.outtime)
if (smoothmenu.shadow.enabled) {
if (ddsmoothmenu.detectwebkit) { //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
this.$shadow.children('div:eq(0)').css({ opacity: 0 })
}
this.$shadow.css({ overflow: 'hidden' }).animate({ height: 0 }, 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?
var hidemehidden = false
if (document.getElementById('hideme2')) {
if (document.getElementById('hideme2').className == 'display-none') {
document.getElementById('hideme2').className = 'show'
hidemehidden = true
}
}
if (typeof setting.contentsource == "object") { //if external ajax menu
ddsmoothmenu.getajaxmenu($, setting)
}
else { //else if markup menu
ddsmoothmenu.buildmenu($, setting)
}
if (hidemehidden) {
if (document.getElementById('hideme2')) {
if (document.getElementById('hideme2').className == 'show') {
document.getElementById('hideme2').className = 'display-none'
hidemehidden = true
}
}
}
})
}
} //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"]
})