我想在我的网站中启用jquery下拉菜单。这是我的代码:
HTML:
<div class="content">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="/SCS/templates/scsj/images/2.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">About me</span>
<span class="sdt_descr">Get to know me</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="/SCS/templates/scsj/images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portfolio</span>
<span class="sdt_descr">My work</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Websites</a>
<a href="#">Illustrations</a>
<a href="#">Photography</a>
</div>
</li>
</ul>
</div>
JS:
<script src="/SCS/templates/scsj/jquery-1.4.3.min.js"></script>
<script src="/SCS/templates/scsj/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function () {
$('#sdt_menu > li').bind('mouseenter',function () {
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width': '170px',
'height': '170px',
'left': '0px'
}, 400, 'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top': '140px'}, 500, 'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height': '170px'}, 300, function () {
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length) {
var left = '170px';
if ($elem.parent().children().length == $elem.index() + 1)
left = '-170px';
$sub_menu.show().animate({'left': left}, 200);
}
});
}).bind('mouseleave', function () {
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if ($sub_menu.length)
$sub_menu.hide().css('left', '0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height': '0px'}, 300)
.andSelf().find('img')
.stop(true)
.animate({
'width': '0px',
'height': '0px',
'left': '85px'}, 400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top': '25px'}, 500);
});
});
</script>
我使用jquery和jquery easing 1.3 但我的菜单不起作用。其实我的问题是jquery效果!有什么问题?