<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="wrap">
<div class="logo">
<h1><a href="#"><img src="images/code.png"></a></h1>
</div>
<p>鼠标移入侧边栏，二级菜单3D展开</br>鼠标hover背景变色</br>鼠标移入二维码背景变色</p>
<div style="text-align:center;margin:50px 0; font-size:20px; color:#ffffff;" >
适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。<br><br>
来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a>
</div>
</div>
<div class="nav-main">
<div class="nav-box">
<div class="nav">
<ul class="nav-ul">
<li><a href="#" class="home"><span>首页</span></a></li>
<li><a href="#" class="develop"><span>H5开发</span></a></li>
<li><a href="#" class="wechat"><span>微信推广</span></a></li>
<li><a href="#" class="case"><span>项目案例</span></a></li>
<li><a href="#" class="news"><span>信息资讯</span></a></li>
<li><a href="#" class="contact"><span>关于我们</span></a></li>
</ul>
</div>
<div class="nav-slide">
<div class="nav-slide-o"></div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
<li><a href="#"><span>微信开发</span></a></li>
</ul>
</div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>微信关注</span></a></li>
<li><a href="#"><span>微信关注</span></a></li>
<li><a href="#"><span>微信关注</span></a></li>
<li><a href="#"><span>微信关注</span></a></li>
<li><a href="#"><span>微信关注</span></a></li>
<li><a href="#"><span>微信关注</span></a></li>
<li><a href="#"><span>微信关注</span></a></li>
<li><a href="#"><span>微信关注</span></a></li>
</ul>
</div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>网站设计</span></a></li>
<li><a href="#"><span>网站设计</span></a></li>
<li><a href="#"><span>网站设计</span></a></li>
<li><a href="#"><span>网站设计</span></a></li>
<li><a href="#"><span>网站设计</span></a></li>
<li><a href="#"><span>网站设计</span></a></li>
<li><a href="#"><span>网站设计</span></a></li>
<li><a href="#"><span>网站设计</span></a></li>
<li><a href="#"><span>网站设计</span></a></li>
</ul>
</div>
<div class="nav-slide-o">
<ul>
<li><a href="#"><span>企业建站</span></a></li>
<li><a href="#"><span>企业建站</span></a></li>
<li><a href="#"><span>企业建站</span></a></li>
<li><a href="#"><span>企业建站</span></a></li>
<li><a href="#"><span>企业建站</span></a></li>
<li><a href="#"><span>企业建站</span></a></li>
<li><a href="#"><span>企业建站</span></a></li>
<li><a href="#"><span>企业建站</span></a></li>
<li><a href="#"><span>企业建站</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var thisTime;
$('.nav-ul li').mouseleave(function(even){
thisTime = setTimeout(thisMouseOut,1000);
})
$('.nav-ul li').mouseenter(function(){
clearTimeout(thisTime);
var thisUB = $('.nav-ul li').index($(this));
if($.trim($('.nav-slide-o').eq(thisUB).html()) != "")
{
$('.nav-slide').addClass('hover');
$('.nav-slide-o').hide();
$('.nav-slide-o').eq(thisUB).show();
}
else{
$('.nav-slide').removeClass('hover');
}
})
function thisMouseOut(){
$('.nav-slide').removeClass('hover');
}
$('.nav-slide').mouseenter(function(){
clearTimeout(thisTime);
$('.nav-slide').addClass('hover');
})
$('.nav-slide').mouseleave(function(){
$('.nav-slide').removeClass('hover');
})
})
</script>
</body>
</html>
jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效.zip
版权申诉
160 浏览量
2023-09-23
09:55:35
上传
评论
收藏 46KB ZIP 举报
jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效.zip （4个子文件） 
js 
jquery-1.9.1.min.js 90KB css index.css 6KB
index.html 5KB images 
code.png 10KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
