以下是 jQuery鼠标悬停下拉导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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=utf-8" />
<title>jQuery鼠标悬停下拉导航菜单</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/nav.js" type="text/javascript"></script>
</head>
<body>
<div class="rz_bw_nav001_m">
<div class="nav">
<div class="nav_main">
<ul id="nav_all">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul style="display: none;">
<li style="width: 8px;"></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">荣誉资质</a></li>
</ul>
</li>
<li><a href="#">服务项目</a>
<ul style="display: none;">
<li style="width: 28px;"></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">微信开发</a></li>
<li><a href="#">电商商务</a></li>
<li><a href="#">安卓开发</a></li>
<li><a href="#">苹果开发</a></li>
<li><a href="#">动画制作</a></li>
<li><a href="#">艺术设计</a></li>
</ul>
</li>
<li><a href="#">
<div style="_margin-top: 12px;"></div>合作案例</a>
<ul style="display: none;">
<li style="width: 52px;"></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">微信开发</a></li>
<li><a href="#">电商商务</a></li>
<li><a href="#">安卓开发</a></li>
<li><a href="#">苹果开发</a></li>
<li><a href="#">动画制作</a></li>
<li><a href="#">艺术设计</a></li>
</ul>
</li>
<li><a href="#">新闻资讯</a>
<ul style="display: none;">
<li style="width: 340px;"></li>
<li><a href="#">公司动态</a></li>
<li><a href="#">行业新闻</a></li>
</ul>
</li>
<li><a href="#">信息收集</a>
<ul style="display: none;">
<li style="width: 398px;"></li>
<li><a href="#">设计欣赏</a></li>
<li><a href="#">资源共享</a></li>
<li><a href="#">百家杂谈</a></li>
</ul>
</li>
<li><a href="#">养生堂</a>
<ul style="display: none;">
<li style="width: 260px;"></li>
<li><a href="#">开心一刻</a></li>
<li><a href="#">美食餐饮</a></li>
<li><a href="#">世界之醉</a></li>
<li><a href="#">科技之炫</a></li>
<li><a href="#">植物之美</a></li>
<li><a href="#">世界之美</a></li>
<li><a href="#">玩物把件</a></li>
<li><a href="#">养生保健</a></li>
<li><a href="#">心灵鸡汤</a></li>
</ul>
</li>
</ul>
<div class="rz_bw_server_tel">服务热线：138-0000-0000</div>
</div>
</div>
</div>
</body>
</html>
JS代码(nav.js):
$(function (){
var st = 180;
$('#nav_all>li').mouseenter(function (){
$(this).find('ul').stop(false,true).slideDown(st);
}
).mouseleave(function (){
$(this).find('ul').stop(false,true).slideUp(st);
}
);
}
);
CSS代码(menu.css):
@charset "utf-8";body{clear:both;margin:0;}
div,ul,li{margin:0;padding:0;border:0;}
ul,li{list-style-type:none;text-transform:capitalize;}
.rz_bw_nav001_m{clear:both;width:100%;height:39px;background:url(../rz_bw_images/rz_bw_nav001-bg.png);border-bottom:#639ACA solid 2px;}
.nav{font-size:12px;width:990px;margin:0px auto 0;border-bottom:#639ACA solid 1px;height:39px;line-height:39px;position:relative;z-index:1;}
.nav a{text-decoration:none;}
.nav_main{height:39px;padding:0 5px;background:#FFF url(../rz_bw_images/rz_bw_nav001-bg.png) repeat-x 0 top;position:relative;}
#nav_all{height:39px;float:left;line-height:39px;position:relative;z-index:222;}
#nav_all li{text-align:center;float:left;}
#nav_all li a{color:#639ACA;display:inline-block;font-size:14px;font-weight:bold;cursor:pointer;padding:0 20px 0 20px;_padding:0 10px;height:39px;line-height:39px;white-space:nowrap;}
#nav_all li a:hover{background:url(../rz_bw_images/bird.png) center 30px no-repeat;height:39px;line-height:39px;border-top:2px solid #639ACA;overflow:hidden;}
#nav_all li ul{display:none;position:absolute;z-index:99;width:990px;left:-5px;top:40px;}
#nav_all ul li{background-image:none;line-height:32px;height:32px;padding-top:0px;padding:0;}
#nav_all ul li a{background-image:none;padding:0px 10px;margin:0px;height:32px;line-height:32px;color:#fff;font-weight:normal;background:#639ACA;border:none;}
#nav_all ul li a:hover{background-image:none;padding:0px 10px;margin:0px auto;height:30px;line-height:30px;color:#FFF;background:#639ACA;border-top:none;}
.rz_bw_server_tel{font-size:14px;font-family:"微软雅黑","幼圆",sans-serif;color:#fff;float:right;width:200px;height:39px;line-height:39px;text-align:center;background-color:#63aACA;}
分享到QQ
分享到微博
微信扫一扫
