超酷的menu菜单当前效果及鼠标指向效果
本实例效果图如下：
源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷的menu菜单当前效果及鼠标指向效果</title> </head> <body> <div class="header">
<div class="container clearfix"> <a href="http://www.86y.org"
class="logo"></a> <div class="nav clearfix"> <!--选中块--> <bdo
id="navselected"></bdo> <!--所有菜单--> <dl><dd><a
href="javascript:;">首页</a></dd><dd id="navcurr" class="crently"><a
href="javascript:;">关于我们</a></dd><dd><a
href="javascript:;">新闻动态</a></dd><dd><a
href="javascript:;">产品中心</a></dd><dd><a
href="javascript:;">招商加盟</a></dd><dd><a
href="javascript:;">人才招聘</a></dd><dd><a
href="javascript:;">联系我们</a></dd> <dt> <div class="snav"> <div
id="data1"><a href="javascript:;">-公司简介-</a><a
href="javascript:;">-发展历程-</a><a href="javascript:;">-企业荣誉-</a><a
href="javascript:;">-企业文化-</a></div> <div id="data2"><a
href="javascript:;">-公司新闻-</a><a href="javascript:;">-媒体关注-</a><a
href="javascript:;">-展会公告-</a></div> <div id="data3"><a
href="javascript:;">-产品一-</a><a href="javascript:;">-产品二-</a><a
href="javascript:;">-产品三-</a></div> <div id="data4"><a
href="javascript:;">-销售网络-</a><a href="javascript:;">-加盟优势-</a><a
href="javascript:;">-加盟条件-</a><a href="javascript:;">-加盟流程-</a><a
href="javascript:;">-在线加盟-</a></div> <div id="data5"><a
href="javascript:;">-用人理念-</a><a href="javascript:;">-职业发展-</a><a
href="javascript:;">-招聘职位-</a></div> <div id="data6"><a
href="javascript:;">-客户留言-</a><a href="javascript:;">-联系方式-</a><a
href="javascript:;">-网上商店-</a></div> </div> </dt> </dl> </div> </div>
<div class="nav_bg"></div> </div> <style> /* CSS Document */ html, body,
div, p, ul,ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input,
select, button, textarea, iframe, table, th, td
{margin:0;padding:0;font-weight:normal;} em,i{font-style:normal;}
b{font-weight:normal;}
body{background:#fff;font-size:12px;color:#333;font-family:
"微软雅黑";overflow-x:hidden;} a{text-decoration:none;color:#333;}
a:hover{text-decoration:none;color:#934f2c;} img{border:0 none;}
ul,li{list-style-type:none;} /*浮动*/ .fl{float:left;display:inline;}
.fr{float:right;display:inline;} .cl{clear:both;}
.clear{height:0;font-size:0;clear:both;zoom:1;overflow:hidden;}
.clearfix:after {visibility:hidden;display:table;content:"
";clear:both;height:0;line-height:0;} .clearfix{zoom:1;}
.container{width:1200px;margin:0 auto;} /**顶部 Start**/
.header{width:100%;background:#fff;height:119px;border-bottom:1px solid
#ddd;position:relative;z-index:99;} .header
.logo{width:321px;height:61px;position:absolute;left:0;top:50%;margin-top:-30px;display:block;background:url(http://www.86y.org/images/logo.png)
no-repeat center center;} .header
.nav{float:right;height:119px;line-height:119px;position:relative;z-index:1;font-size:14px;}
.header .nav
bdo{width:90px;height:120px;display:block;position:absolute;left:0;top:0;background:#934f2c;}
.header .nav dl{width:630px;height:120px;position:relative;} .header
.nav dd{width:90px;height:119px;text-align:center;float:left;} .header
.nav dd a{display:block;width:90px;height:119px;} .header .nav
dd.crently a{color:#fff;position:relative;padding-bottom:1px;} .header
.nav dt div.snav{width:720px;float:right;text-align:center;} .header
.nav dt div.snav div{display:none} .header .nav
dt{position:absolute;bottom:-50px;left:0;width:100%;height:50px;line-height:50px;z-index:2;display:none;}
.header .nav dt
a{width:120px;height:50px;display:inline-block;color:#999;} .header .nav
dt a:hover{color:#fff;background:#934f2c;} .header
.nav_bg{background:#e8e8e8;position:absolute;width:100%;left:0;bottom:-51px;height:50px;display:none;}
/**顶部 End**/ </style> <script type="text/javascript"
src="http://www.86y.org/jquery.min.js"></script> <script
type="text/javascript"> /*导航菜 开始*/ //擦除效果
jQuery.extend(jQuery.easing,{easeOutBack: function (x, t, b, c, d, s) {s
= s || 1.3;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;}}); //nav初始化选中
id=navcurr,为默认选中菜单 var navcurr = $(".nav dd");
$("#navselected").css("left", $("#navcurr").index()*90); var objs="";
//nav里的链接hover效果 $(".nav dd").hover(function(){
if(!!$("#navselected").stop(true).animate({left:$(this)[0].offsetLeft},
400, "easeOutBack")) {
$(this).siblings().removeClass("crently").end().addClass("crently");
$(this).find("a").hide().fadeIn(0); $(".snav div").hide();
if($("#data"+$(this).index()).length>0) {
$("#data"+$(this).index()).show(); $(".nav dt,.nav_bg").show(); } else {
$("#data"+$(this).index()).hide(); $(".nav dt,.nav_bg").hide(); }
objs=$(this); } }); $(".nav dl").hover(function(){ //$(".nav
dt").show(); },function(){ if($(".nav dt").css("display")!="none") {
$(".nav dt,.nav_bg").hide(); } $(objs).removeClass("crently");
$("#navcurr").addClass("crently");
$("#navselected").stop(true).animate({left:$("#navcurr").index()*90},
300, "easeOutBack"); }); /*导航菜 结束*/ </script> </body> </html>
(完)
原文链接：http://www.86y.org/art_detail.aspx?id=761
源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷的menu菜单当前效果及鼠标指向效果</title> </head> <body> <div class="header">
<div class="container clearfix"> <a href="http://www.86y.org"
class="logo"></a> <div class="nav clearfix"> <!--选中块--> <bdo
id="navselected"></bdo> <!--所有菜单--> <dl><dd><a
href="javascript:;">首页</a></dd><dd id="navcurr" class="crently"><a
href="javascript:;">关于我们</a></dd><dd><a
href="javascript:;">新闻动态</a></dd><dd><a
href="javascript:;">产品中心</a></dd><dd><a
href="javascript:;">招商加盟</a></dd><dd><a
href="javascript:;">人才招聘</a></dd><dd><a
href="javascript:;">联系我们</a></dd> <dt> <div class="snav"> <div
id="data1"><a href="javascript:;">-公司简介-</a><a
href="javascript:;">-发展历程-</a><a href="javascript:;">-企业荣誉-</a><a
href="javascript:;">-企业文化-</a></div> <div id="data2"><a
href="javascript:;">-公司新闻-</a><a href="javascript:;">-媒体关注-</a><a
href="javascript:;">-展会公告-</a></div> <div id="data3"><a
href="javascript:;">-产品一-</a><a href="javascript:;">-产品二-</a><a
href="javascript:;">-产品三-</a></div> <div id="data4"><a
href="javascript:;">-销售网络-</a><a href="javascript:;">-加盟优势-</a><a
href="javascript:;">-加盟条件-</a><a href="javascript:;">-加盟流程-</a><a
href="javascript:;">-在线加盟-</a></div> <div id="data5"><a
href="javascript:;">-用人理念-</a><a href="javascript:;">-职业发展-</a><a
href="javascript:;">-招聘职位-</a></div> <div id="data6"><a
href="javascript:;">-客户留言-</a><a href="javascript:;">-联系方式-</a><a
href="javascript:;">-网上商店-</a></div> </div> </dt> </dl> </div> </div>
<div class="nav_bg"></div> </div> <style> /* CSS Document */ html, body,
div, p, ul,ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input,
select, button, textarea, iframe, table, th, td
{margin:0;padding:0;font-weight:normal;} em,i{font-style:normal;}
b{font-weight:normal;}
body{background:#fff;font-size:12px;color:#333;font-family:
"微软雅黑";overflow-x:hidden;} a{text-decoration:none;color:#333;}
a:hover{text-decoration:none;color:#934f2c;} img{border:0 none;}
ul,li{list-style-type:none;} /*浮动*/ .fl{float:left;display:inline;}
.fr{float:right;display:inline;} .cl{clear:both;}
.clear{height:0;font-size:0;clear:both;zoom:1;overflow:hidden;}
.clearfix:after {visibility:hidden;display:table;content:"
";clear:both;height:0;line-height:0;} .clearfix{zoom:1;}
.container{width:1200px;margin:0 auto;} /**顶部 Start**/
.header{width:100%;background:#fff;height:119px;border-bottom:1px solid
#ddd;position:relative;z-index:99;} .header
.logo{width:321px;height:61px;position:absolute;left:0;top:50%;margin-top:-30px;display:block;background:url(http://www.86y.org/images/logo.png)
no-repeat center center;} .header
.nav{float:right;height:119px;line-height:119px;position:relative;z-index:1;font-size:14px;}
.header .nav
bdo{width:90px;height:120px;display:block;position:absolute;left:0;top:0;background:#934f2c;}
.header .nav dl{width:630px;height:120px;position:relative;} .header
.nav dd{width:90px;height:119px;text-align:center;float:left;} .header
.nav dd a{display:block;width:90px;height:119px;} .header .nav
dd.crently a{color:#fff;position:relative;padding-bottom:1px;} .header
.nav dt div.snav{width:720px;float:right;text-align:center;} .header
.nav dt div.snav div{display:none} .header .nav
dt{position:absolute;bottom:-50px;left:0;width:100%;height:50px;line-height:50px;z-index:2;display:none;}
.header .nav dt
a{width:120px;height:50px;display:inline-block;color:#999;} .header .nav
dt a:hover{color:#fff;background:#934f2c;} .header
.nav_bg{background:#e8e8e8;position:absolute;width:100%;left:0;bottom:-51px;height:50px;display:none;}
/**顶部 End**/ </style> <script type="text/javascript"
src="http://www.86y.org/jquery.min.js"></script> <script
type="text/javascript"> /*导航菜 开始*/ //擦除效果
jQuery.extend(jQuery.easing,{easeOutBack: function (x, t, b, c, d, s) {s
= s || 1.3;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;}}); //nav初始化选中
id=navcurr,为默认选中菜单 var navcurr = $(".nav dd");
$("#navselected").css("left", $("#navcurr").index()*90); var objs="";
//nav里的链接hover效果 $(".nav dd").hover(function(){
if(!!$("#navselected").stop(true).animate({left:$(this)[0].offsetLeft},
400, "easeOutBack")) {
$(this).siblings().removeClass("crently").end().addClass("crently");
$(this).find("a").hide().fadeIn(0); $(".snav div").hide();
if($("#data"+$(this).index()).length>0) {
$("#data"+$(this).index()).show(); $(".nav dt,.nav_bg").show(); } else {
$("#data"+$(this).index()).hide(); $(".nav dt,.nav_bg").hide(); }
objs=$(this); } }); $(".nav dl").hover(function(){ //$(".nav
dt").show(); },function(){ if($(".nav dt").css("display")!="none") {
$(".nav dt,.nav_bg").hide(); } $(objs).removeClass("crently");
$("#navcurr").addClass("crently");
$("#navselected").stop(true).animate({left:$("#navcurr").index()*90},
300, "easeOutBack"); }); /*导航菜 结束*/ </script> </body> </html>
(完)
原文链接：http://www.86y.org/art_detail.aspx?id=761
