DD Smooth Menu

Download as txt, pdf, or txt
Download as txt, pdf, or txt
You are on page 1of 3

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', 'http://2.bp.blogspot.com/-62mrUJPjWkk/TsV Mm5MjY9I/AAAAAAAACac/V5xpanluS5M/s1600/down.gif', 23], right:['rightarrowclass', 'http://1.bp.blogspot.com/-qevgGv8KR-c/TsVMm542ZuI/AAAAAAAACak/Y8t9Vof9sh0/s160 0/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, //de tect WebKit browsers (Safari, Chrome etc) getajaxmenu:function($, setting){ //function to fetch external page containing t he 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 Resp onse: '+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() $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, subul w:$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 '<img src="'+ (this.istopheader? smoothmenu.arrowimages. down[1] : smoothmenu.arrowimages.right[1]) +'" class="' + (this.istopheader? smoothmenu.arrowimages .down[0] : smoothmenu.arrowimages.right[0])

+ '" style="border:0;" />' ) if (smoothmenu.shadow.enabled){ this._shadowoffset={x:(this.istopheader?$subul.offset(). left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subu l.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=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._sh adowoffset.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._dimensi ons.w menuleft=(this._offsets.left+menuleft+this._dime nsions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+th is._dimensions.w : -this._dimensions.w) : menuleft //calculate this sub menu's o ffsets 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'}, ddsmooth menu.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 && ddsmoot hmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full this.$shadow.css({opacit y:1}) } this.$shadow.css({overflow:'', w idth:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).an imate({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 Web Kit 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'}).an imate({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('<style type="text/css">\n' +mainmenuid+', '+mainmenuid+' ul li a {background:'+sett ing.customtheme[0]+';}\n' +mainmenuid+' ul li a:hover {background:'+setting.custom theme[1]+';}\n' +'</style>') } jQuery(document).ready(function($){ //override default menu colors (defa ult/hover) with custom set? if (typeof setting.contentsource=="object"){ //if external ajax menu ddsmoothmenu.getajaxmenu($, setting) } else{ //else if markup menu ddsmoothmenu.buildmenu($, setting) } }) } } //end ddsmoothmenu variable //Initialize Menu instance(s): ddsmoothmenu.init({ mainmenuid: "smoothmenu1", //menu DIV id //customtheme: ["#1c5a80", "#18374a"], //override default menu CSS backg round values? Uncomment: ["normal_background", "hover_background"] contentsource: "markup" //"markup" or ["container_id", "path_to_menu_fil e"] })

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy