84 lines
4.1 KiB
JavaScript
Executable File
84 lines
4.1 KiB
JavaScript
Executable File
/**
|
|
* for each menu element, on mouseenter,
|
|
* we enlarge the image, and show both nav_active span and
|
|
* nav_wrap span. If the element has a sub menu (nav_box),
|
|
* then we slide it - if the element is the last one in the menu
|
|
* we slide it to the left, otherwise to the right
|
|
*/
|
|
$(function() {
|
|
$('ul#nav > li').bind('mouseenter',function(){
|
|
|
|
var $elem = $(this);
|
|
var $sub_menu = $elem.find('div.nav_box');
|
|
var $link = $elem.find('span.nav_link');
|
|
|
|
var $navbg = $elem.find('a.navbg');
|
|
$navbg.stop(true).animate({ backgroundColor: '#000000' },300);
|
|
|
|
$elem.find('img').stop(true).animate({
|
|
'width':'300px',
|
|
'height':'300px',
|
|
'left':'0px'
|
|
},400,'easeOutBack')
|
|
.andSelf().find('.nav_wrap').stop(true).animate({'top':'140px'},500,'easeOutBack')
|
|
.andSelf().find('.nav_link').stop(true).animate({color:"#FFFFFF"}, 800)
|
|
.andSelf().find('.nav_active').stop(true).animate({'height':'200px'},300,function(){ var $sub_menu = $elem.find('.nav_box'); if($sub_menu.length){ var left = '300px'; if($elem.parent().children().length == $elem.index()+1) left = '-300px'; $sub_menu.show().animate({'left':left},200); } });
|
|
})
|
|
|
|
.bind('mouseleave',function(){
|
|
var $elem = $(this);
|
|
var $sub_menu = $elem.find('div.nav_box');
|
|
var $link = $elem.find('span.nav_link');
|
|
$link.animate({color:"#000000"},300);
|
|
|
|
var $navbg = $elem.find('a.navbg');
|
|
if(isIE()) {
|
|
$navbg.stop(true).animate({ backgroundColor: '#DDDDDD' },800);
|
|
}else {
|
|
$navbg.stop(true).animate({ backgroundColor: 'rgba(0, 0, 0, 0.2)' },800);
|
|
}
|
|
|
|
if($sub_menu.length) {
|
|
$sub_menu.animate({'left':'0px'},200, function() {
|
|
$sub_menu.hide();
|
|
$elem.find('span.nav_active')
|
|
.stop(true)
|
|
.animate({'height':'0px'},300)
|
|
.andSelf().find('img')
|
|
.stop(true)
|
|
.animate({
|
|
'width':'0px',
|
|
'height':'0px',
|
|
'left':'85px'},400)
|
|
.andSelf()
|
|
.find('span.nav_wrap')
|
|
.stop(true)
|
|
.animate({'top':'25px'},500);
|
|
});
|
|
}else {
|
|
$elem.find('span.nav_active')
|
|
.stop(true)
|
|
.animate({'height':'0px'},300)
|
|
.andSelf().find('img')
|
|
.stop(true)
|
|
.animate({
|
|
'width':'0px',
|
|
'height':'0px',
|
|
'left':'85px'},400)
|
|
.andSelf()
|
|
.find('span.nav_wrap')
|
|
.stop(true)
|
|
.animate({'top':'25px'},500);
|
|
}
|
|
});
|
|
});
|
|
|
|
function isIE() {
|
|
var isIE = false;
|
|
|
|
var val = navigator.userAgent.toLowerCase();
|
|
if(val.indexOf("msie") > -1) {
|
|
isIE = true;
|
|
}
|
|
return isIE;
|
|
}; |