本实例效果是由jQuery实现的超牛的背景移动导航菜单效果，菜单效果设计非常沉稳大方,鼠标悬停时菜单项高亮显示。
难点在一个要选中为当前效果同时指向子菜单时又不失去当前效果。
本实例效果图如下：
源代码如下：
<!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/js/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>
(完)
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)
copyright ©2010-86y.org - ALL RIGHTS RESERUED -TEMPLATE CREATED BY CHARRY-may 3,2010 粤ICP备13053249号-1谷歌地图
