Был конфликт между версиями jQuery - 1.4.3 и последней версией. Разные скрипты по одиночке работали, вместе - нет. Отключила 1.4.3, все работает, кроме одного скрипта... может быть, кто-нибудь знает, как его переделать, чтобы он работал с последней версией? Возможно ли это? Скрипт маленький, неужели эти библиотеки настолько разные
помогите, пожалуйста, сама чайник.
$(function() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $speed1 = 300;
var $speed2 = 50;
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown($speed1,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_menu_items.children('div').hide();
})
});
<div id="menu">
<ul id="oe_menu" class="oe_menu">
<li><a href="#">Главный раздел</a>
<div>
<ul>
<li><a href="#">ссылка 1</a></li>
<li><a href="#">ссылка 2</a></li>
<li><a href="#">ссылка 3</a></li>
</ul>
</div>
</li>
<li><a href="#">Раздел1</a>
<div>
<ul>
<li><a href="#">ссылка 1</a></li>
<li><a href="#">ссылка 2</a></li>
<li><a href="#">ссылка 3</a></li>
<li><a href="#">ссылка 4</a></li>
<li><a href="#">ссылка 5</a></li>
</ul>
</div>
</li>
<li><a href="#">Раздел2</a>
<div>
<ul>
<li><a href="#">ссылка 1</a></li>
<li><a href="#">ссылка 2</a></li>
<li><a href="#">ссылка 3</a></li>
<li><a href="#">ссылка 4</a></li>
<li><a href="#">ссылка 5</a></li>
</ul>
</div>
</li>
<li><a href="#">Раздел3</a>
<div>
<ul>
<li><a href="#">ссылка 1</a></li>
<li><a href="#">ссылка 2</a></li>
<li><a href="#">ссылка 3</a></li>
<li><a href="#">ссылка 4</a></li>
<li><a href="#">ссылка 5</a></li>
</ul>
</div>
</li>
<li><a href="#">Раздел4</a>
<div>
<ul>
<li><a href="#">ссылка 1</a></li>
<li><a href="#">ссылка 2</a></li>
<li><a href="#">ссылка 3</a></li>
</ul>
</div>
</li>
</ul>
</div>
<style type="text/css">
*{
margin:0;
padding:0;
}
#menu {
width: 100%;
height: 50px;
background: #606b93;
background: -moz-linear-gradient(left, #546087 0%, #737ea5 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#546087), color-stop(100%,#737ea5));
background: -webkit-linear-gradient(left, #546087 0%,#737ea5 100%);
background: -o-linear-gradient(left, #546087 0%,#737ea5 100%);
background: -ms-linear-gradient(left, #546087 0%,#737ea5 100%);
background: linear-gradient(to right, #546087 0%,#737ea5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#546087', endColorstr='#737ea5',GradientType=1 );
}
ul.oe_menu {
list-style: none;
position: relative;
width: 930px;
margin: 0 auto;
clear: both;
display: block;
}
ul.oe_menu > li {
height: 50px;
float: left;
position: relative;
}
ul.oe_menu > li > a{
display: block;
color: #ffffff;
text-decoration: none;
font-size: 14px;
padding: 0px 15px;
font-size: 14px;
text-transform: uppercase;
height: 50px;
line-height: 50px;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background: #8bc579;
color: #ffffff;
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
}
.box {
border-bottom: 1px solid #eaeaea;
}
ul.oe_menu div {
position: absolute;
width: 930px;
height: 50px;
display: none;
background: #ffffff;
left: 0;
}
ul.oe_menu div ul li a {
text-decoration: none;
color: #888888;
margin-right: 15px;
line-height: 50px;
display: block;
font-size: 14px;
float: left;
}
ul.oe_menu div ul li a:hover{
color: #333333;
}
ul.oe_menu li ul{
list-style:none;
width: 100%;
}
</style>
