PDA

View Full Version : Problem with jQuery Multi Level CSS Menu #2 & Internet Explorer



samurai-lupin
12-27-2010, 10:42 PM
1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD):

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

3) Describe problem:

Hello, I am using this script and it works fine in Firefox but not with IE 7.0. When using IE it will only display two items in the drop down menue and then close the slider. You can check it out online here:

http://www.thunting.com/smf/

I would appreciate any hellp how to fix this.

Thank you

Nicole


/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['http://www.thunting.com/downarrowclass', 'http://www.thunting.com/down.gif', 10], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
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={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border: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
if ($targetul.queue().length<=1) //if 1 or less queued animations
$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
},
function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)
}
) //end hover
$curobj.click(function(){
$(this).children("ul:eq(0)").hide()
})
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

That's how I am coding the menue items:


echo '<li><a><font color="#ffffff">Boards</font></a>
<ul>

<li><a href="http://www.thunting.com/smf/index.php?c=1">Our Community</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=8">Find Boards</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=4">Metal Detecting</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=2">Treasure Hunting</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=3">Research &amp; Techniques</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=15">Tech Talk</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=9">Long Range</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=5">Prospecting &amp; Minerals</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=6">Marketplace</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=10">Collectors Corner</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=17">Historic Places</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=14">History</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=13">Planet Treasure</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=12">General Discussion - By Location</a></li>
<li><a href="http://www.thunting.com/smf/index.php?c=7">Miscellaneous</a></li>
';

echo '</ul></li>';