js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 导航菜单

css3实现酷炫导航条制作鼠标悬停下拉二级导航菜单特效代码

发布时间:2016-01-25 17:47:35    您是第0位浏览者

本js特效代码兼容:ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

css3实现酷炫导航条制作鼠标悬停下拉二级导航菜单特效代码
<!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>css3实现酷炫导航条制作鼠标悬停下拉二级导航菜单特效代码</title>    
		<script type="text/javascript" src="js/prefixfree.min.js"></script>    
		<style type="text/css">    
			*{margin:0;padding:0;list-style-type:none}    
			a,img{border:0}    
			.cf:after,.cf:before{content:" ";display:table}    
			.cf:after{clear:both}    
			.menu{margin:50px auto;width:800px;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}    
			.menu>li{background:#34495e;float:left;position:relative;transform:skewX(25deg)}    
			.menu a{display:block;text-align:center;color:#fff;text-transform:uppercase;text-decoration:none;font-family:Arial,Helvetica;font-size:14px}    
			.menu li:hover{background:#e74c3c}    
			.menu>li>a{transform:skewX(-25deg);padding:1em 2em}    
			.submenu{position:absolute;width:200px;left:50%;margin-left:-100px;transform:skewX(-25deg);transform-origin:left top}    
			.submenu li{background-color:#34495e;position:relative;overflow:hidden}    
			.submenu>li>a{padding:1em 2em}    
			.submenu>li::after{content:'';position:absolute;top:-125%;height:100%;width:100%;box-shadow:0 0 50px rgba(0,0,0,.9)}    
			.submenu>li:nth-child(odd){transform:skewX(-25deg) translateX(0)}    
			.submenu>li:nth-child(odd)>a{transform:skewX(25deg)}    
			.submenu>li:nth-child(odd)::after{right:-50%;transform:skewX(-25deg) rotate(3deg)}    
			.submenu>li:nth-child(even){transform:skewX(25deg) translateX(0)}    
			.submenu>li:nth-child(even)>a{transform:skewX(-25deg)}    
			.submenu>li:nth-child(even)::after{left:-50%;transform:skewX(25deg) rotate(3deg)}    
			.submenu,.submenu li{opacity:0;visibility:hidden}    
			.submenu li{transition:.2s ease transform}    
			.menu>li:hover .submenu,.menu>li:hover .submenu li{opacity:1;visibility:visible}    
			.menu>li:hover .submenu li:nth-child(even){transform:skewX(25deg) translateX(15px)}    
			.menu>li:hover .submenu li:nth-child(odd){transform:skewX(-25deg) translateX(-15px)}    
		</style>    
	</head>    
	<body>	    
		<ul class="menu cf">    
			<li><a href="http://www.jstxdm.com/">网站首页</a></li>    
			<li>    
				<a href="http://www.jstxdm.com/">关于我们</a>    
				<ul class="submenu">    
					<li><a href="http://www.jstxdm.com/">公司介绍</a></li>    
					<li><a href="http://www.jstxdm.com/">企业资质</a></li>    
					<li><a href="http://www.jstxdm.com/">荣誉证书</a></li>    
					<li><a href="http://www.jstxdm.com/">联系我们</a></li>    
				</ul>    
			</li>    
			<li><a href="http://www.jstxdm.com/">产品中心</a></li>    
			<li>    
				<a href="http://www.jstxdm.com/">成功案例</a>    
				<ul class="submenu">    
					<li><a href="http://www.jstxdm.com/">公司介绍</a></li>    
					<li><a href="http://www.jstxdm.com/">企业资质</a></li>    
					<li><a href="http://www.jstxdm.com/">荣誉证书</a></li>    
					<li><a href="http://www.jstxdm.com/">联系我们</a></li>    
				</ul>    
			</li>    
			<li><a href="http://www.jstxdm.com/">客户留言</a></li>    
		</ul>    
	</body>    
</html>



导航条

jquery.ScrollNav精美滑动菜单导航条特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

js特仿flash导航条鼠标悬停上下文字滑动特效

jquery实现网站注册动态步骤导航条特效

jquery实现导航条宽度随二级菜单宽度变化的特效代码

css3实现酷炫导航条制作鼠标悬停下拉二级导航菜单特效代码

jQuery实现适合手机移动端应用的导航条菜单特效代码