收缩展开菜单 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>收缩展开菜单</title>
	<style type="text/css">
		p,ul,li{padding:0;margin:0;list-style: none;}
		#box{font-size: 12px;color:#00c;width:58px;margin: 0 auto;}
		p{width: 58px;height: 24px;line-height: 24px;padding-left: 3px;background: #C5CCC9;}
		ul{width:56px;border:1px solid #9a99ff;display: none;margin-top:3px;}
		a{text-decoration: none;display:block;height:24px;line-height: 24px;text-align: center;color:#00c;}
		a:hover{background: #d9e1f6;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById('btn');
			var oUl=document.getElementById('ul1');

			oBtn.onclick=function(){
				if (oUl.style.display=='block') {
					oUl.style.display='none';
				}else{//none
					oUl.style.display='block';
				};
			}
		}
	</script>
</head>
<body>
<!-- 如果菜单显示就把他隐藏，如果菜单隐藏就显示出来 -->
	<div id="box">
		<p id="btn">输入法</p>
		<ul id="ul1" style="display:block;">
			<li><a href="#">手写</a></li>
			<li><a href="#">拼音</a></li>
			<li><a href="#">关闭</a></li>
		</ul>
	</div>
</body>
</html>

 

查看范例

posted @ 2017-01-16 11:41  Mr_W_Blog  阅读(226)  评论(0)    收藏  举报