Getting jQuery Drop Line Menu to function correctly
-
I designed a theme using the jQuery Drop Line Menu by Dynamic Drive. You may view this working on a non wordpress version: http://www.joeymerchant.com/aai/
Here is the site with the same code embedded in the header of my customized default template. http://www.joeymerchant.com/aai/blog
As you can see, the down arrows do not display anymore. This is more evident in internet explorer though because of the broken image link graphic. In firefox I can see the tab correctly just without the down arrow.
Here is the code in my javascript file (droplinemenu.js):
var droplinemenu={ arrowimage: {classname: 'downarrowclass', src: 'down.png', leftpadding: 5}, //customize down arrow image animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds buildmenu:function(menuid){ jQuery(document).ready(function($){ var $mainmenu=$("#"+menuid+">ul") var $headers=$mainmenu.find("ul").parent() $headers.each(function(i){ var $curobj=$(this) var $subul=$(this).find('ul:eq(0)') this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false if (!this.istopheader) $subul.css({left:0, top:this._dimensions.h}) var $innerheader=$curobj.children('a').eq(0) $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that $innerheader.append( '<img src="'+ droplinemenu.arrowimage.src +'" class="' + droplinemenu.arrowimage.classname + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />' ) $curobj.hover( function(e){ var $targetul=$(this).children("ul:eq(0)") if ($targetul.queue().length<=1) //if 1 or less queued animations if (this.istopheader) $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h}) if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'}) $targetul.slideDown(droplinemenu.animateduration.over) }, function(e){ var $targetul=$(this).children("ul:eq(0)") $targetul.slideUp(droplinemenu.animateduration.out) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()}) }) //end document.ready } }
Here is a link to the menu source files: http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/
Thanks in advance for the help!!
Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
- The topic ‘Getting jQuery Drop Line Menu to function correctly’ is closed to new replies.