zoukankan html css js c++ java

菜单缩放功能

效果图:

代码如下:

<!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>伸缩菜单</title>
<link href="style.css" type="text/css" rel="stylesheet"  />
<style type="text/css" >
.btn{float:right;cursor:pointer;50px;height:23px;color:#a6a6a6; position:absolute; right:0px; bottom:0px;}
.btnOpen{border:0px;30px;height:23px; background:url("images/ban.jpg") no-repeat 100% 0%;padding-right:12px;}
.btnClose{border:0px;30px;height:23px; background:url("images/ban.jpg") no-repeat -80% 0%;padding-right:12px;}
.none{display:none;}
.height{
	height:25px;overflow:hidden;
	}
.facet-first{94%;}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.9.1.min.js" ></script>
</head>

<body>
<div class="main-width">
	<div class="facets">	
		<div class="facetTools-skin">
			<div class="facetTools-label">已设置的搜索条件</div>
			<div class="facetTools">
				<ul>
					<li class="facetTool">
						<span class="label">分类：</span>
						<a  class="cancelfilter" href="#" title="撤销条件"></a>								
						<a  class="filter" href="#">专科用药</a>	
                        <a  class="filter" href="#">呼吸系统用药</a>		
					</li>
                    <li class="facetTool">
						<span class="label">品牌：</span>
						<a  class="cancelfilter" href="#" title="撤销条件"></a>								
						<a  class="filter" href="#">百草灵</a>	
                        <a  class="filter" href="#">呼吸系统用药</a>		
					</li>
				</ul>
			</div>
		</div>
        <div class="facets-skin">
                    <div class="facet-skin">
                        <div class="facets-label">销售标签</div>
                        <div class="facet">
                                <a href="#">未指定<span>(34)</span></a>
                        </div>
                    </div>
                    <div class="facet-skin">
                        <div class="facets-label">品牌</div>
                        <div id="facet" class="facet height">
                        	<div class="facet-first">
                                <a href="#">云南白药<span>(5)</span></a>
                                <a href="#">神威药业<span>(5)</span></a>
                                <a href="#">感康<span>(5)</span></a>
                                <a href="#">美仑<span>(5)</span></a>
                                <a href="#">乐仁堂<span>(5)</span></a>
                                <a href="#">本草纲目<span>(5)</span></a>
                                <a href="#">云南白药<span>(5)</span></a>
                                <a href="#">神威药业<span>(5)</span></a>
                                <a href="#">感康<span>(5)</span></a>
                                <a href="#">美仑<span>(5)</span></a>
                                <a href="#">乐仁堂<span>(5)</span></a>
                                <a href="#">本草纲目<span>(5)</span></a>
                                <a href="#">云南白药<span>(5)</span></a>
                                <a href="#">神威药业<span>(5)</span></a>
                                <a href="#">感康<span>(5)</span></a>
                                <a href="#">美仑<span>(5)</span></a>
                                <a href="#">乐仁堂<span>(5)</span></a>
                                <a href="#">本草纲目<span>(5)</span></a>
                                <a href="#">云南白药<span>(5)</span></a>
                                <a href="#">神威药业<span>(5)</span></a>
                                <a href="#">感康<span>(5)</span></a>
                                <a href="#">美仑<span>(5)</span></a>
                                <a href="#">乐仁堂<span>(5)</span></a>
                                <a href="#">本草纲目<span>(5)</span></a>
                                <a href="#">云南白药<span>(5)</span></a>
                                <a href="#">神威药业<span>(5)</span></a>
                                <a href="#">感康<span>(5)</span></a>
                                <a href="#">美仑<span>(5)</span></a>
                                <a href="#">乐仁堂<span>(5)</span></a>
                                <a href="#">本草纲目<span>(5)</span></a>
                                <a href="#">云南白药<span>(5)</span></a>
                                <a href="#">神威药业<span>(5)</span></a>
                                <a href="#">感康<span>(5)</span></a>
                                <a href="#">美仑<span>(5)</span></a>
                                <a href="#">乐仁堂<span>(5)</span></a>
                                <a href="#">本草纲目<span>(5)</span></a>
                                <a href="#">云南白药<span>(5)</span></a>
                                <a href="#">神威药业<span>(5)</span></a>
                                <a href="#">感康<span>(5)</span></a>
                                <a href="#">美仑<span>(5)</span></a>
                                <a href="#">乐仁堂<span>(5)</span></a>
                                <a href="#">本草纲目<span>(5)</span></a>
                               </div>
                               <div id="btnOpen" class="btn btnOpen none">展开</div>
                        	   <div id="btnClose" class="btn btnClose none">收缩</div>
                        </div>
                        <!--<input id="btnOpen" type="button" class="btnOpen none"  />
                        <input id="btnClose" type="button" class="btnClose none"  />-->
                        
                    </div>
                    <div class="facet-skin">
                        <div class="facets-label">处方类型</div>
                        <div class="facet">
                                <a href="#">甲类非处方药<span>(26)</span></a>
                                <a href="#">乙类非处方药<span>(4)</span></a>
                                <a href="#">未标示<span>(4)</span></a>
                        </div>
                    </div>
        </div>
	</div> 
</div>
</body>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
  $("#btnOpen").removeClass("none");
  //$("#btnClose").removeClass("none");
  ////展开
  $("#btnOpen").click(function(){
    $(this).addClass("none");
	$("#btnClose").removeClass("none");
	$("#facet").removeClass("height");
  });
  //收缩
  $("#btnClose").click(function(){
    $(this).addClass("none");
	$("#btnOpen").removeClass("none");
	$("#facet").addClass("height");
  });
});
</script>
</html>

样式css

@charset "utf-8";
/* CSS Document */

body{
	padding:0px;
	margin:0px; 
	background-color: #ffffff;
	color: #444444; 
	line-height: 20px; 
	font-size:12px; 
	
}
p,ul,li,dt,dl,dd,table,td,h1,h2,h3,h4,h5{
	padding:0px;
	margin:0px;
	list-style:none;
}
a:link,a:visited,a:active {
	text-decoration:none;
	font-size:12px;
	color:#806F66;
}

a:hover{
	text-decoration:none;
	color:#ff8008;
	cursor:pointer;
}

.main-width{
	980px;
	padding:10px;
	margin:0px auto;}
/*************************facets*******************************************/
.facets{
	border: 1px solid #C6D8E0;
	padding: 8px 14px;
	text-align:left;
	overflow:hidden;
	clear:both;
	zoom:1;
	margin-bottom:10px;	
}
.facets-skin{
	background:#ffffff;
	clear:both;
	overflow:hidden;
	zoom:1;	
}
/*******************facets-label*************************/
.facet-skin{
	100%;
	clear:both;
	zoom:1;
	padding:5px 0px;
	border-top:1px dotted #f2f2f2;
	margin-top:-1px;
	
}
.facets-label{
	10%;
	height:22px;
	line-height:22px;
	font-weight:600;
	float:left;
	clear:left;
	zoom:1;
}
.facet{
/*	margin:0px 5px;*/
/*	clear:right;*/
	float:left;
	line-height:25px;
	zoom:1;
	90%;
	position:relative;
}


.facet .facet-content{
	line-height:22px;
	float:left;
}
.facet .facet-content .ul-text{
	clear:both;
	overflow:hidden;
	zoom:1;
}

.facet .facet-content .ul-text li{
	float:left;
	margin:0px 10px !important;
	height:22px;
	line-height:22px;
}



/******************************条件***********************************/
.facetTools-skin{
	border-bottom:1px dotted #f2f2f2;
	overflow:hidden;
	clear:both;
	zoom:1;
}
.facetTools-label{
	display:block;
	100px;
	float:left;
}
.facetTools{
	float:left;
}
 .facetTool{
	float:left;
	margin-left:10px;
	padding-left:10px;
	height:30px;
	background:url(image/bg-filter.png) no-repeat 0px 0px;
}

.facetTool span.label{
 	display:block;
	float:left;	
 	height:22px;
 	overflow:hidden;
 	color:#999999;
	background:url(image/bg-filter.png) -0px -40px repeat-x;	
 }
 .facetTool a.filter:link,
 .facetTool a.filter:visited,
 .facetTool a.filter:active{
 	display:block;
	float:left;	
 	height:22px;
 	overflow:hidden;
 	padding-right:5px;
	background:url(image/bg-filter.png) -0px -40px repeat-x;	
 }
 .facetTool a.cancelfilter:link,
 .facetTool a.cancelfilter:visited,
 .facetTool a.cancelfilter:active{
	display:block;
	height:22px;
	20px;
	float:left;	
	background:url(image/bg-filter.png) no-repeat right -81px; 	
}


.facet{
	margin-left:0px !important;
	margin-right:0px !important;
	background:url(image/bg-filter.png) -0px -40px repeat-x;

}
.facet a:link,
.facet a:visited,
.facet a:active{
	color:##806F66;
	margin-right:10px;
	display:inline-block;
}
.facet a:link span,
.facet a:visited span,
.facet a:active span,
.facet a span{
	color:#BFBFBF;
}
.facet a:hover{
	color:#ff8008;
}

查看全文

相关阅读:
Hdu 5396 Expression (区间Dp)
Lightoj 1174
codeforces 570 D. Tree Requests (dfs)
codeforces 570 E. Pig and Palindromes (DP)
Hdu 5385 The path
Hdu 5384 Danganronpa (AC自动机模板)
Hdu 5372 Segment Game (树状数组)
Hdu 5379 Mahjong tree (dfs + 组合数)
Hdu 5371 Hotaru's problem (manacher+枚举)
Face The Right Way---hdu3276（开关问题）

原文地址：https://www.cnblogs.com/lhwang/p/3480201.html