Reputation: 13
I'm trying to get a menu to slide in/out using jQuery UI and I can't seem to get it to work in any version of Internet Explorer.
I'm using some conditionals to slightly modify the code for IE, but its only the difference between a "hover" event and a "click". Its working flawlessly in every other browser but breaks in IE.
You can see the site itself at: http://actionfreightinc.kemdev.com/
I'm trying to modify that menu that shows up on the left side of the rotating images.
Its worth noting that when I tried stripping out the various elements, it appeared to start working when I removed the LI items and just left the links.
Thanks all!
Here's all my various code...
Javascript (for IE):
jQuery(document).ready(function() {
jQuery('#arrow').click(function(){
jQuery(this).hide('slide',{direction:'left'},200, function() {
jQuery('.menu-main-container').show('slide',{direction:'left'},500);
jQuery('.menu-main-container li a').show();
});
});
jQuery('.menu-main-container').mouseleave(function(){
jQuery('.menu-main-container').hide('slide',{direction:'left'},500, function(){
jQuery('#arrow').show('slide',{direction:'left'},200);
});
});
});
And here's the HTML its trying to act on (stripped down to just one LI):
<div id="home-nav">
<div id="arrow" style="display: block; ">
<img src="http://actionfreightinc.kemdev.com/wp-content/themes/thesis_18/custom/images/menu2.png" alt="Menu">
</div>
<div class="menu-main-container" style="display: none; ">
<ul id="menu-main" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-5"><a href="/">Home</a></li>
</ul></div>
<div class="clear"></div>
</div>
Here's my CSS (theres some other rules being applied from other areas, but this is the gist of it):
.custom #home-nav {
margin: 0;
padding: 20px 0 20px 0;
position: absolute;
left: 10px;
top: 50px;
z-index: 600;
}
.home .menu-main-container {
background: transparent url(images/home-nav-bgd.png) no-repeat right bottom;
margin: 0;
display: none;
width: 200px;
/*float: left;*/
padding-bottom: 20px;
padding-right: 0;
padding-left: 0;
padding-top: 0;
z-index: 601;
position: absolute;
left: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
behavior: url(PIE/PIE.htc);
}
.home .menu-main-container #menu-main {
background: transparent url(images/home-nav-bgd.png) no-repeat right top;
padding: 20px 20px 0 20px;
margin: 0;
width: 160px;
z-index: 602;
}
.home .menu-main-container #menu-main a {
width: 140px;
font-size: 1.6em;
}
.home #arrow {
position: absolute;
left: 0;
background: none;
width: 38px;
height: 255px;
display: block;
padding: 0;
cursor: pointer;
}
.custom #home-nav .sub-menu {
left: 140px;
top: 0;
background: #FFF;
padding: 20px;
width: 140px;
-webkit-box-shadow: 0px 0px 4px 0px #000000;
-moz-box-shadow: 0px 0px 4px 0px #000000;
box-shadow: 0px 0px 4px 0px #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(PIE/PIE.htc);
}
.custom #home-nav #menu-main .sub-menu li a {
width: 140px;
}
Upvotes: 1
Views: 1466
Reputation: 171690
Look at layout tab in console. Main Menu container has 0 height and 0 width. All that you are seeing is overflow. Dimensioning will likely help
Upvotes: 1