以下是 jQuery Hover响应下拉导航菜单栏js特效代码 的示例演示效果:
部分效果截图:
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 Hover响应下拉导航菜单栏代码</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/head.css" />
</head>
<body>
<!-- 公司页头-->
<div class="global-nav">
<div class="container">
<!--收藏关注start-->
<ul class="global-nav-left">
<li><b></b><a onclick="myAddFavorite()" href="#">收藏内容</a></li>
<li>
<div class="weixinshowPic"> <i class="i-qrcode"></i>关注站长
<div class="wx_box"><span class="arrow"><i class="layer1"></i><i class="layer2"></i></span></div>
</div>
</li>
</ul>
<!--收藏关注end-->
<div class="global-nav-right">
<a class="global-nav-right_a" target="_blank" href="#"> <i class="ico global-nav-right_i" title="vip"></i> <span style="float:left">创业项目</span> </a>
<div class="dropdown ">
<a href="#" class="dropdown-main"> <i class="ico helper-sprite-menu"></i> <span>网站导航</span> <i class="ico helper-sprite-dropdown"></i> </a>
<div class="dropdown-main_after"></div>
<div class="dropdown-sub" style="display:none;">
<div class="dropdown-sub_box">
<div class="menu_links2015">
<a href="#" target="_blank"><img src="picture/menu-bd2.jpg" data-tangram-ori-src="picture/menu-bd2.jpg"> </a>
<a href="#" target="_blank"><img src="picture/menu-bd3.jpg" data-tangram-ori-src="picture/menu-bd3.jpg"> </a>
<a href="#" target="_blank"><img src="picture/menu-bd4.jpg" data-tangram-ori-src="picture/menu-bd4.jpg"> </a>
</div>
<div class="menu_nav2015">
<p class="menu_nav2015_p1">
<span><a target="_blank" href="#">餐饮小吃</a></span>
<a target="_blank" href="#">火锅</a>
<a target="_blank" href="#">韩式餐饮</a>
<a target="_blank" href="#">烤鱼</a>
<a target="_blank" href="#">香锅</a>
<a target="_blank" href="#">快餐</a>
<a target="_blank" href="#">饮品</a>
<a target="_blank" href="#">小吃</a>
<a target="_blank" href="#">面食</a>
</p>
<p class="menu_nav2015_p2">
<span><a target="_blank" href="#">饰品礼品</a></span>
<a target="_blank" href="#">DIY礼品</a>
<a target="_blank" href="#">工艺礼品</a>
<a target="_blank" href="#">节庆礼品</a>
<a target="_blank" href="#">生活超市</a>
</p>
<p class="menu_nav2015_p3">
<span><a target="_blank" href="#">服装鞋帽</a></span>
<a target="_blank" href="#">男士专属</a>
<a target="_blank" href="#">精品折扣</a>
<a target="_blank" href="#">精品童装</a>
<a target="_blank" href="#">品牌服装</a>
<a target="_blank" href="#">女装</a>
<a target="_blank" href="#">日韩服饰</a>
</p>
<p class="menu_nav2015_p4">
<span><a target="_blank" href="#">家居建材</a></span>
<a target="_blank" href="#">家居日用</a>
<a target="_blank" href="#">装饰装修</a>
<a target="_blank" href="#">室内环保</a>
<a target="_blank" href="#">特色家居</a>
<a target="_blank" href="#">建筑贴膜</a>
<a target="_blank" href="#">灯具灯箱</a>
</p>
<p class="menu_nav2015_p5">
<span><a target="_blank" href="#">环保机械</a></span>
<a target="_blank" href="#">节能环保</a>
<a target="_blank" href="#">节能设备</a>
<a target="_blank" href="#">专利技术</a>
<a target="_blank" href="#">机械设备</a>
<a target="_blank" href="#">汽车服务</a>
<a target="_blank" href="#">设备养护</a>
<a target="_blank" href="#">室内排毒</a>
</p>
<p class="menu_nav2015_p6">
<span><a target="_blank" href="#">教育网络</a></span>
<a target="_blank" href="#">自助建站</a>
<a target="_blank" href="#">网络商城</a>
<a target="_blank" href="#">网上创业</a>
<a target="_blank" href="#">教育培训</a>
<a target="_blank" href="#">学生用品</a>
<a target="_blank" href="#">幼儿早教</a>
<a target="_blank" href="#">少儿教育</a>
<a target="_blank" href="#">益智玩具</a>
</p>
<p class="menu_nav2015_p7">
<span><a target="_blank" href="#">美容保健</a></span>
<a target="_blank" href="#">美容</a>
<a target="_blank" href="#">化妆品</a>
<a target="_blank" href="#">养生馆</a>
<a target="_blank" href="#">美体瘦身</a>
<a target="_blank" href="#">保健用品</a>
</p>
<p class="menu_nav2015_p8">
<span><a target="_blank" href="#">特色项目</a></span>
<a target="_blank" href="#">新奇特</a>
<a target="_blank" href="#">生活服务</a>
<a target="_blank" href="#">数码娱乐</a>
<a target="_blank" href="#">休闲娱乐</a>
<a target="_blank" href="#">娱乐游戏</a>
<a target="_blank" href="#">电影院</a>
<a target="_blank" href="#">儿童乐园</a>
<a target="_blank" href="#">文具店</a>
</p>
</div>
</div>
</div> <a class="global-nav-right_a" href="#">返回首页</a> </div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.weixinshowPic').hover(function() {
$(this).addClass('weixinshowPic-hover');
}, function() {
$(this).removeClass('weixinshowPic-hover');
});
$('.dropdown').hover(function() {
$(this).addClass('dropdown-hover');
$(".dropdown-sub").show('slow');
}, function() {
$(this).removeClass('dropdown-hover');
});
});
</script>
</body>
</html>
CSS代码(head.css):
@charset "utf-8";*{margin:0px;padding:0px;list-style-type:none;}
img{border:0;}
a{text-decoration:none;}
body{font-size:12px;font-family:'SimSun',Arial,Helvetica,sans-serif;color:#666666;background-color:#FFFFFF;}
.clearfix:after{clear:both;content:"";display:block;height:0;_height:1%;visibility:hidden;}
.clearfix{*zoom:1;}
.global-nav{height:30px;position:relative;z-index:111;background-color:#f2f2f2;}
.fl{float:left;width:auto;}
.fr{float:right;width:auto;}
.cb{clear:both;}
.none{display:none;}
.container{width:1000px;margin:0 auto;}
.ico{background:url(../images/ico.png) no-repeat;_background:url(../images/ico.gif) no-repeat;}
.global-nav-left{float:left;}
.global-nav-left li{position:relative;padding-right:20px;z-index:1112;line-height:30px;float:left;}
.global-nav-left li b{transition:transform 0.2s ease-in 0s;background:url(../images/ico.png) -33px -1px no-repeat;cursor:pointer;height:13px;display:block;float:left;margin-right:2px;margin-top:8px;width:13px;}
.global-nav-left li:hover b{transform:rotate(720deg);}
.global-nav-left a{display:inline-block;line-height:30px;color:#656565;}
.weixinshowPic{width:71px;line-height:30px;color:#656565;cursor:pointer;}
.weixinshowPic .i-qrcode{background:url(../images/ico.png) -48px 0px no-repeat;display:inline;float:left;height:12px;margin-top:9px;margin-right:5px;width:12px;}
.weixinshowPic .wx_box{background:url(../images/ico.png) no-repeat -43px -15px #fff;border:1px solid #ddd;box-shadow:0 0 10px rgba(0,0,0,0.12);height:84px;left:-15px;position:absolute;top:28px;width:84px;display:none;}
.weixinshowPic-hover .wx_box{display:block;}
.weixinshowPic .wx_box .arrow{height:16px;left:50%;margin-left:-8px;position:absolute;top:-16px;width:16px;}
.weixinshowPic .wx_box .arrow i{border-style:dashed dashed solid;border-width:8px;height:0;left:0;overflow:hidden;position:absolute;top:0;width:0;}
.weixinshowPic .wx_box i.layer1{border-color:transparent transparent #ddd;top:-1px;}
.weixinshowPic .wx_box i.layer2{border-color:transparent transparent #fff;}
.global-nav-right{height:30px;float:right;}
.global-nav-right a.global-nav-right_a{line-height:30px;margin-left:20px;float:left;color:#666666;}
i.global-nav-right_i{float:left;width:26px;height:30px;background-position:-25px -100px;}
.dropdown{float:left;height:30px;padding-left:20px;position:relative;z-index:10;}
.dropdown-main{height:30px;float:left;position:relative;z-index:10;color:#666666;}
.dropdown-main i.helper-sprite-menu{float:left;margin-top:10px;margin-right:3px;background-position:-91px -109px;width:14px;overflow:hidden;height:10px;line-height:10px;}
.dropdown-main span{font-family:Arial;line-height:30px;float:left;margin-right:3px;}
.dropdown-main .helper-sprite-dropdown{-webkit-transition:300ms;transition:300ms;}
.helper-sprite-dropdown{float:left;margin-top:11px;overflow:hidden;background-position:-64px -111px;width:9px;height:7px;}
.dropdown-main_after{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background:none repeat scroll 0 0 white;border:1px solid #e1e1e1;border-bottom:0px solid #e1e1e1;box-sizing:content-box;height:28px;left:9px;padding:0 10px;position:absolute;top:-5px;visibility:hidden;width:80px;z-index:1;}
.dropdown-sub{position:absolute;background-color:white;left:0;top:20px;visibility:hidden;opacity:0;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8);-webkit-transition:300ms;transition:300ms;-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;z-index:0;}
.dropdown-sub a{margin-left:0;display:inline;}
.dropdown-hover .dropdown-main_after{visibility:visible;}
.dropdown:hover .dropdown-main .helper-sprite-dropdown{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
.dropdown-hover .dropdown-sub{visibility:visible;opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.dropdown-sub_box{Z-INDEX:10001;RIGHT:-111px;BACKGROUND:#fff;BORDER:#DADADA 1px solid;POSITION:absolute;WIDTH:620px;TOP:3px;padding:10px;}
.menu_links2015{height:50px;}
.menu_links2015 a:last-child img{margin-right:0;}
.menu_links2015 img{float:left;margin-right:14px;}
.menu_nav2015 p{height:39px;line-height:39px;border-bottom:1px solid #EFEFEF;font-size:12px;padding-left:24px;background:url(../images/ico.png) -174px -1px no-repeat;color:#E0CABF;margin:0;}
.menu_nav2015 p:last-child{border-bottom:none;}
.menu_nav2015 p a{line-height:12px;color:#818183;border-left:1px solid #E0CABF;padding:0 6px;font-family:"Microsoft Yahei";}
.menu_nav2015 p a:hover{text-decoration:underline;}
.menu_nav2015 p span{line-height:39px;}
.menu_nav2015 p span a{color:#FF3900;line-height:39px;font-size:12px;border-left:none;}
.menu_nav2015 p.menu_nav2015_p2{background-position:-174px -39px;}
.menu_nav2015 p.menu_nav2015_p3{background-position:-174px -80px;}
.menu_nav2015 p.menu_nav2015_p4{background-position:-174px -120px;}
.menu_nav2015 p.menu_nav2015_p5{background-position:-174px -160px;}
.menu_nav2015 p.menu_nav2015_p6{background-position:-174px -200px;}
.menu_nav2015 p.menu_nav2015_p7{background-position:-174px -240px;}
.menu_nav2015 p.menu_nav2015_p8{background-position:-174px -280px;}
分享到QQ
分享到微博
微信扫一扫
