JQuery выпадающий с анимированной суб-навигации не работает в IE - PullRequest
Новая
       22

JQuery выпадающий с анимированной суб-навигации не работает в IE

0 голосов
/ 07 января 2011

У меня есть анимированное выпадающее меню с анимированными субнавами, которое прекрасно работает в FF, Chrome, Safari ... но, конечно, в IE сложно.На данный момент у меня есть только встроенное меню «Продукты».

Я использую .hover и .animate, чтобы увеличить ширину элементов div, содержащих элементы подменю.

При наведении курсора на одну из нихиз элементов подменю в разделе «Продукты», другое подменю вылетает вправо с большим количеством элементов.

В IE я могу получить первое подменю, которое будет выброшено, если я действительно быстро наведусь на него.Даже тогда, кажется, хочется только оживить частично.Кроме того, ни один из пунктов моего подменю, кажется, не принимает их стили a: hover.

Есть идеи?

Вот ссылка: http://www.saundersintegrated.com/us_armor/new_site/home_1_6_test.html

CSS: 

/* PRODUCTS */
#menuProducts{
 position:absolute;
 display:block;
 top:129px;
 right:315px;
 padding-top:7px;
 padding-bottom:7px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 color:#999;
 cursor:pointer;
 z-index:50;

}

#menuProducts a{
 color:#999;
}

#menuProducts a:hover{
 color:#FFF;
}

#drawerProducts{
 position:absolute;
 display:block;
 top:159px;
 right:45px;
 width:705px;
 background-color:#000;
 overflow:hidden;
 /* for IE */
   filter:alpha(opacity=85);
  /* CSS3 standard */
  opacity:0.85;
 z-index:50;
}

#insideDrawerProducts1{
 position:absolute;
 display:block;
 top:5px;
 left:10px;
 height:30px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 float:left;
 padding-right:10px;
 border-right: thin #333 solid;
 z-index:5;
}

#insideDrawerProducts1 a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
}

#insideDrawerProducts1 a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#FFF;
}

#insideDrawerProducts2{
 position:relative;
 display:block;
 top:5px;
 left:10px;
 height:30px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 float:left;
 padding-left:10px;
 z-index:5;

}

#insideDrawerProducts2 a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
}

#insideDrawerProducts2 a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#FFF;
}

#featuredProjectImage{
 position:absolute;
 display:block;
 top:0px;
 left:20px;
 z-index:5;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#999;

}

#featuredProjectImage a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;

}

#featuredProjectImage a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#fff;

}


#featuredProjectText{
 position:absolute;
 display:block;
 top:45px;
 left:170px;
 width:150px;
 z-index:5;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#ccc;

}

#productsMenuMain{
 position:absolute;
 display:block;
 top:0px;
 left:340px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 border-right:thin solid #000;
 border-left:thin solid #000;
 overflow:hidden;
 z-index:5;

}

#productsMenuSubmenu{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:3px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;
}

#productsMenuSubmenu a{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#ccc;
}

#productsMenuSubmenu a:hover{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#000;
 background-color:#F60;
}


#productsMenuConcealable{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuTacticalVests{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}


#productsMenuTacticalAccessories{
 position:absolute;
 display:block;
 top:0px;
 left:583px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuCorrectional{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuInternational{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuEOD{
 position:absolute;
 display:block;
 top:0px;
 left:462px;
 height:249px;
 width:120px;
 text-align:center;
 background-color:#333;
 overflow:hidden;
 z-index:5;

}

#productsMenuSubmenu2{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:3px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#F60;
}

#productsMenuSubmenu2 a{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#ccc;
}

#productsMenuSubmenu2 a:hover{
 position:relative;
 display:block;
 width:120px;
 padding-top:2px;
 padding-bottom:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#000;
 background-color:#F60;
}

HTML: 

<!--PRODUCTS MENU-->
<div id="menuProducts"><a href="#"><span>PRODUCTS</span></a></div>

<div id="drawerProducts">

<div id="insideDrawerBorder">

<div id="featuredProjectImage">
<h1>Featured Product</h1>
<img src="images/featured_product_1.png" />
<br /><br />
<a href="#"><span>>&nbsp;learn more</span></a>
</div>

<div id="featuredProjectText">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
</div>

<div id="productsMenuMain">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Concealable"><span>Concealable</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Tactical"><span>Tactical</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Correctional"><span>Correctional</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="International"><span>International</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="EOD"><span>EOD/Specialty</span></a></div>
</div>

<div id="productsMenuConcealable">
<br />
<div id="productsMenuSubmenu"><a href="#" name="USA_Classic"><span>USA Classic</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Terminal_Velocity"><span>Terminal Velocity</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="XLT"><span>XLT</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="XP"><span>XP</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="New_Model"><span>New Model</span></a></div>
</div>

<div id="productsMenuTacticalVests">
<br />
<div id="productsMenuSubmenu">VESTS</div>
<div id="productsMenuSubmenu"><a href="#" name="TAV"><span>TAV</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Cover_Plus"><span>Cover Plus</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="MSTV"><span>MSTV</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="GET"><span>GET</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Narco"><span>Narco</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="New_Tactical"><span>New Tactical</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Flotation_Tactical"><span>Flotation Tactical</span></a></div>
</div>

<div id="productsMenuTacticalAccessories">
<br />
<div id="productsMenuSubmenu2">ACCESSORIES</div>
<div id="productsMenuSubmenu2"><a href="#" name="Helmets"><span>Helmets</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Plates"><span>Plates</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Shields"><span>Shields</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="GET"><span>GET</span></a></div>
<div id="productsMenuSubmenu2"><a href="#" name="Pockets_and_Pouches"><span>Pockets and Pouches</span></a></div>
</div>

<div id="productsMenuCorrectional">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Concealable_Correctional"><span>Concealable Correctional</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Tactical_Correctional"><span>Tactical Correctional</span></a></div>
</div>

<div id="productsMenuInternational">
<br />
<div id="productsMenuSubmenu"><a href="#" name="PFA"><span>PFA</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="PASGT"><span>PASGT</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Peace_Keeper"><span>Peace Keeper</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Rapid_Response"><span>Rapid Response</span></a></div>
</div>

<div id="productsMenuEOD">
<br />
<div id="productsMenuSubmenu"><a href="#" name="Breacher_Blanket"><span>Breacher Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Bomb_Blanket"><span>Bomb Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Ballistic_Blanket"><span>Ballistic Blanket</span></a></div>
<div id="productsMenuSubmenu"><a href="#" name="Custom_Panels"><span>Custom Panels</span></a></div>
</div>

<!--END insideDrawerBorder-->
</div>

<!--END PRODUCTS MENU-->
</div>

JQUERY: 

$(document).ready(function() {

var minDrawerHeight = 0;
var maxDrawerHeight = 250;

$('#drawerProducts').css('height',minDrawerHeight);



<!--------------------------- MENU --------------------------->


<!--- MENU DROPDOWN --->


$('#menuProducts, #drawerProducts').hover(function(){
  $('#drawerProducts').stop().animate({'height': maxDrawerHeight}, 400, 'swing');
   },
   function(){

$('#drawerProducts').stop().animate({'height': minDrawerHeight}, 400, 'swing')

});





<!--- PRODUCTS SUBMENUS --->

var minMenuWidth = 0;
var maxMenuWidth = 120;

$('#productsMenuConcealable').css('width',minMenuWidth).hide();
$('#productsMenuTacticalVests').css('width',minMenuWidth).hide();
$('#productsMenuTacticalAccessories').css('width',minMenuWidth).hide();
$('#productsMenuCorrectional').css('width',minMenuWidth).hide();
$('#productsMenuInternational').css('width',minMenuWidth).hide();
$('#productsMenuEOD').css('width',minMenuWidth).hide();


$("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable'], #productsMenuConcealable").hover(function(){
 $('#productsMenuConcealable').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuConcealable').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Concealable']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical'], #productsMenuTacticalVests, #productsMenuTacticalAccessories").hover(function(){
 $('#productsMenuTacticalVests, #productsMenuTacticalAccessories').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuTacticalVests, #productsMenuTacticalAccessories').stop().animate({'width': minMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Tactical']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional'], #productsMenuCorrectional").hover(function(){
 $('#productsMenuCorrectional').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuCorrectional').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='Correctional']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='International'], #productsMenuInternational").hover(function(){
 $('#productsMenuInternational').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='International']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuInternational').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='International']").css({'background': 'none', 'color':'#ccc'});
});

$("#productsMenuMain > #productsMenuSubmenu > a[name='EOD'], #productsMenuEOD").hover(function(){
 $('#productsMenuEOD').stop().animate({'width': maxMenuWidth}, 400, 'swing');
 $("#productsMenuMain > #productsMenuSubmenu > a[name='EOD']").css({'background-color': '#F60', 'color':'#000'});
 },
 function(){
 $('#productsMenuEOD').stop().animate({'width': minMenuWidth}, 400, 'swing').hide();
 $("#productsMenuMain > #productsMenuSubmenu > a[name='EOD']").css({'background': 'none', 'color':'#ccc'});
});



<!--END DOC READY-->
});

Ответы [ 2 ]

0 голосов
/ 10 января 2011

ОБНОВЛЕНИЕ: Оказывается, преступник имел div с фильтром непрозрачности, вложенным в другой div, который также имел фильтр opacity.

0 голосов
/ 07 января 2011

Взгляните на это

http://www.xs4all.nl/~peterned/csshover.html

...