﻿/*弹出式菜单*/
/*参数说明*/
//showobj:要显示的菜单ID
//timeout：延时时间,鼠标停留/离开后延时多久开始显示/隐藏菜单
//speed：菜单显示速度，数字越大，显示越慢,默认为100
//调用示例:$("#button").DMenu("#content");
jQuery.fn.DMenu=function(showobj,timeout,speed){
	timeout=timeout?timeout:300;
	speed=speed?speed:100;
	//按钮对象
	var button=$(this);
	//延时计数器
	var timer=null;
	//隐藏的浮动层
	var hideDiv=$("<div></div>");
	//容器对象
	var Container=$("<div id=\"Container\"></div>");
	Container.hide();
	hideDiv.append(Container);
	//菜单对象
	var jqShowObj=$(showobj);
	//隐藏菜单
	jqShowObj.hide();
	//菜单显示的状态
	var display=false;
	//按钮的offset
	var offset=button.offset();
	//菜单区高
	var height=jqShowObj.height();
	//菜单区宽
	var width=jqShowObj.width();
	//按钮的高
	var btnHeight=button.height();
	//按钮的宽
	var btnWidth=button.width();
	//定位层放到最前面
	$(document.body).prepend(hideDiv);
	//放到容器中
	//Container.append(jqShowObj);

	//****显示菜单方法开始****//
	var showMenu=function(){
		//如果菜单为显示则退出操作
		if (display)
		{
			return false;
		}
		//设置容器属性
		Container.css({
			margin:"0 auto",
			width:btnWidth+"px",
			height:btnHeight+"px"
		});
		//定位隐藏层
		hideDiv.css({
			position:"absolute",
			top:offset.top+3+"px",
			left:offset.left+(btnWidth)-(width)+"px",
			height:height+"px",
			width:width+"px",
			zIndex:"1000"
		}).show();
		//给容器加个黑边框
		Container.css({
			border:"1px solid #666666"
		});
		//显示定位层
		//高宽慢慢增大
		Container.animate({
			marginTop:btnHeight-4,
			height:height+4,
			width:width+4,
			opacity:'100'},speed,function(){
			//动画结束时 start//
			//显示菜单
			jqShowObj.show();
			//添加菜单入容器
			Container.append(jqShowObj);
			//去除边框
			Container.css({
				border:"0px"
			});
			//显示状态置为true
			display=true;
			//鼠标移入
			jqShowObj.mouseover(function(){
				clearTimeout(timer); 
			});
			//鼠标移开
			jqShowObj.mouseout(function(){
				hideMenu();
			});
			//动画结束时 end//
		});
	};
	//****显示菜单方法结束****//

	//****隐藏菜单方法开始****//
	var hideMenu=function(){
		clearTimeout(timer); 
		//延时隐藏菜单
		timer=setTimeout(function(){
		//显示边框
		Container.css({
			border:"1px solid #666666"
		});
		//清空容器
		Container.empty();
		//收缩容器
		Container.animate({
			  width:btnWidth,height:btnHeight,marginTop:'0',marginLeft:'140', opacity: '0'
			}, speed,function(){
			//动画结束时 start//
			//隐藏容器
			Container.hide();
			//定位层隐藏
			hideDiv.hide();
			//显示状态置为false
			display=false;
			//动画结束时 end//
		});
		}, timeout); 
	};
	//****隐藏菜单方法结束****//

	//绑定按钮鼠标经过事件
	button.hover(function(e){
		//延时显示菜单
		clearTimeout(timer); 
		timer=setTimeout(function(){
			showMenu();
		}, timeout); 
	},function(){
		clearTimeout(timer); 
		//鼠标离开按钮时，如果菜单还是显示状态则隐藏
		if(display){
			timer=setTimeout(function(){
				hideMenu();
			},timeout);
		}
	});
};

$(function(){
	$("#ttmenu3>ul>li>a").hover(function(){var left = 0;if(990 - ($(this).position().left - ((document.body.offsetWidth - 990)) / 2) < 150 - 62){left = ($.browser.msie ? $(this).position().left - 1 : $(this).position().left - 63);left -= 150 - 64;}else{left = ($.browser.msie ? $(this).position().left - 1 : $(this).position().left - 63);}$(this).next("div").css("left",left + "px");$(this).next("div").show();},function(){$(this).next("div").hide();});
	$("#ttmenu3>ul>li>a").next("div").hover(function(){$(this).show();$(this).parent().find("div[class=ttmenu_n]").addClass("ttmenu_s");},function(){$(this).hide();$(this).parent().find("div[class=ttmenu_n ttmenu_s]").removeClass("ttmenu_s");});
	//$("#ttmenu3").find("div[class=qidai]").hover(function(){$(this).css("color","#999999");$(this).empty().append("敬请期待");},function(){$(this).css("color","#FFFFFF");$(this).empty().append("化妆品");});
});