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;
}

查看全文

相关阅读:
centos7.6 使用yum安装mysql5.7
解决hadoop本地库问题
 docker-compose 启动警告
 docker 安装zabbix5.0 界面乱码问题解决
 docker 部署zabbix问题
 zookeeper 超时问题
 hbase regionserver异常宕机
 (转载)hadoop 滚动升级
 hadoop Requested data length 86483783 is longer than maximum configured RPC length
zkfc 异常退出问题，报错Received stat error from Zookeeper. code:CONNECTIONLOSS

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