jQuery鼠标悬停3d菜单特效代码下载

jQuery鼠标悬停3d菜单特效代码下载

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/index.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

3. HTML代码

<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;" >
	</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">
	$(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>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到