jquery实现二级菜单下拉效果

日期：2020-06-26 栏目：前端经验浏览：次
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>
<style>
	/* reset */
	body,ul { margin:0; padding:0; }
	li { list-style:none; }
	a { text-decoration:none; }
	
	/* layout */
	.nav {
		width:140px;
	}
	.nav li {
	}
	.nav .navTitle { 
		position:relative;
		display:block; 
		width:140px; 
		height:40px;
		line-height:40px;
		font-size:16px;
		color:#118a11;
		text-align:center;
		background:#f4f9bf;
	}
	.nav .navTitle:hover {
		color:green;
	}
	.nav .triangle {
		display:block;
		position:absolute;
		top:40%;
		right:10%;
		width:0;
		height:0;
		overflow:hidden;
		border-left:6px solid transparent;
		border-right:6px solid transparent;
		border-top:6px solid #118a11;
 
		-webkit-transition: -webkit-transform 0.2s ease-in; /* Safari 和 Chrome */
		-moz-transition:-moz-transform 0.2s ease-in; 	/* Firefox */
		-o-transition:-o-transform 0.2s ease-in; 	/* Opera */
		transition:transform 0.2s ease-in;
	}
	.nav .triangleH {
		-ms-transform:rotate(180deg); 	/* IE 9 */
		-moz-transform:rotate(180deg); 	/* Firefox */
		-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
		-o-transform:rotate(180deg); 	/* Opera */
		transform:rotate(180deg);
 
		-webkit-transition: -webkit-transform 0.2s ease-in; /* Safari 和 Chrome */
		-moz-transition:-moz-transform 0.2s ease-in; 	/* Firefox */
		-o-transition:-o-transform 0.2s ease-in; 	/* Opera */
		transition:transform 0.2s ease-in;
	}
	.nav ul {
		display:blcok;
		width:140px;
	}
	.nav ul li {
	}
	.nav ul li a {
		display:block;
		height:30px;
		line-height:30px;
		font-size:14px;
		text-align:center;
		color:#118a11;
		background:#f4f9bf;
		border-bottom:1px solid #118a11;
	}
	.nav ul li a:hover {
		background:#fff;
	}
	.nav ul .li1 {
		border-top:1px solid #118a11;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('li').hover(function(){
			$(this).find('ul').css('display','block'); 			
			var show = $('.nav ul').css('display');
			if( show == 'block')
			{
				$('.triangle').addClass('triangleH'); 
			}
		}, function(){
			$(this).find("ul").css("display","none"); 
			var show = $('.nav ul').css('display');
			if( show == 'none')
			{
				$('.triangle').removeClass('triangleH');
			}
        });
	});
</script>
</head>
<body>
	<ul class="nav">
        <li>
        	<a href="#" class="navTitle">我的模拟<span class="triangle"></span></a>
            <ul>
                <li class="li1"><a href="#">模拟一</a></li>
                <li><a href="#">模拟二</a></li>
                <li><a href="#">模拟三</a></li>
                <li><a href="#">模拟四</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
转载注明出处：http://www.duanlonglong.com/qdjy/265.html
jquery实现二级菜单下拉效果

相关推荐
