Я пытаюсь заставить меню вставлять / выводить с помощью пользовательского интерфейса jQuery, и я не могу заставить его работать в любой версии Internet Explorer.
Я использую некоторые условные обозначения, чтобы немного изменить код для IE, но это единственная разница между событием "зависания" и "щелчком". Он работает безупречно в любом другом браузере, но ломается в IE.
Сам сайт можно посмотреть по адресу: http://actionfreightinc.kemdev.com/
Я пытаюсь изменить это меню, которое отображается слева от вращающихся изображений.
Стоит отметить, что когда я попытался удалить различные элементы, он начал работать, когда я удалил элементы LI и просто оставил ссылки.
Спасибо всем!
Вот весь мой код ...
Javascript (для 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);
});
});
});
А вот HTML-код, на котором он пытается действовать (сокращенный до одного 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>
Вот мой CSS (есть некоторые другие правила, применяемые в других областях, но это суть):
.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;
}