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;
    }
    
  • 相关阅读:
    086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础(类和对象)总结
    085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用
    jQuery UI组件库Kendo UI使用技巧小分享
    Kendo UI ListView模板功能,让Web开发更轻松
    UI组件套包DevExpress ASP.NET Core v20.2新版亮点:全新的查询生成器
    Devexpress WinForms最新版开发.NET环境配置Visual Studo和SQL Server对应版本
    全新的桌面应用数据可视化呈现方式,Sankey Diagram控件你了解多少?
    java中的递归方法
    连接数据库查询 将查询结果写入exce文件中
    java连接mysql数据查询数据
  • 原文地址:https://www.cnblogs.com/lhwang/p/3480201.html
Copyright © 2011-2022 走看看