菱形导航-带下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是菱形导航-带下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
<base target="_blank">
</head>

<body>
<!-- 代码开始 -->
<div class="box">
	<div class="menu"><p>News</p></div>
	<div class="menu">
		<p>Careers</p>
		<ul>
			<li><a href="#">Citizenship</a></li>
		</ul>
	</div>
	<div class="menu">
		<p>Investors</p>
		<ul>
			<li><a href="#">Overview</a></li>
			<li><a href="#">Global Locations</a></li>
			<li><a href="#">Brand Identity</a></li>
			<li><a href="#">Milestones</a></li>
		</ul>
	</div>
	<div class="menu"><p>Company</p></div>
	<div class="menu">
		<p>Services</p>
		<ul>
			<li><a href="#">Legal</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Press</a></li>
		</ul>
	</div>
</div>
<!-- 代码结束 -->
<style type="text/css">
.footer p{font:normal 12px/2em '微软雅黑';text-align:center;}
</style>
</body>
</html>

JS代码(lrtk.js):

// JavaScript Document$(document).ready(function(){
	//控制每个li的位置$('.menu').each(function(i){
	$(this).children('ul').children('li').each(function(j){
	if(j==0){
	$(this).css({
	'top':'35px','left':'-22px'}
);
}
else{
	$(this).css({
	'top':35+27*j+'px','left':'-'+(22+22*j)+'px'}
);
}
}
);
}
)//触发事件$('.menu').hover(function(){
	$(this).addClass('m_hover');
	$(this).children('ul').show();
}
,function(){
	$(this).removeClass('m_hover');
	$(this).children('ul').hide();
}
)//更改hover状态样式$('.menu ul li').hover(function(){
	$(this).addClass('li_hover');
}
,function(){
	$(this).removeClass('li_hover');
}
)}
)

CSS代码(lrtk.css):

/* 转载请保留版权信息：懒人图库 www.lanrentuku.com */
*{padding:0px;margin:0px;font-family:Arial,Helvetica,sans-serif;font-size:12px;}
ul,li{list-style:none;}
.box{height:35px;}
.menu{width:100px;height:35px;background:url(../images/bg.png) no-repeat;padding:0 26px;margin-left:-25px;float:right;position:relative;}
.m_hover{background-position:0 -40px;}
.menu p{line-height:34px;color:#fff;text-align:center;cursor:pointer;}
.menu ul{display:none;}
.menu ul li{width:106px;height:27px;background:url(../images/bg.png) 0 -80px no-repeat;font:normal 12px/26px Arial;text-align:center;padding:0 20px;position:absolute;}
.menu ul li.li_hover{background-position:0 -112px;}
.menu ul li a:link,.menu ul li a:visited,.menu ul li a:hover{color:#fff;text-decoration:none;display:block;}

附件:下载该文件资源,减少时间成本(增值服务)