HTML5折叠卡片式下拉菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5折叠卡片式下拉菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5折叠卡片式下拉菜单代码</title>
<link rel='stylesheet' href='css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<br><br><br>
<div class="container">
		<div class="card-drop">
			<a class='toggle' href="#">
				<i class='fa fa-suitcase'></i> 
				  <span class='label-active'>站长之家</span>
			</a>
			<ul>
				  <li class='active'>
						<a data-label="Everyting" href="#"><i class='fa fa-suitcase'></i> 首页</a>
				  </li>
				  <li>
						<a data-label="Design" href="#"><i class='fa fa-magic'></i> jQuery特效</a>
				  </li>
				<li >
						<a data-label="UI-UX" href="#"><i class='fa fa-bolt'></i> CSS3特效</a>
				  </li>
				  <li>
						<a data-label="Print" href="#"><i class='fa fa-tint'></i> HTML5特效</a>
				  </li>
				<li>
						<a data-label="Photography" href="#"><i class='fa fa-camera-retro'></i> 音效下载</a>
				</li>
				<li>
						<a data-label="Photography" href="#"><i class='fa fa-camera-retro'></i> flash动画</a>
				</li>                  
			</ul>
		</div>
	</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
(function ($) {
	var cards = $('.card-drop'), toggler = cards.find('.toggle'), links = cards.find('ul>li>a'), li = links.parent('li'), count = links.length, width = 100;
	li.each(function (i) {
		$(this).css('z-index', count - i);
	});
	function setClosed() {
		li.each(function (index) {
			$(this).css('top', index * 4).css('width', width - index * 0.5 + '%').css('margin-left', index * 0.25 + '%');
		});
		li.addClass('closed');
		toggler.removeClass('active');
	}
	setClosed();
	toggler.on('mousedown', function () {
		var $this = $(this);
		if ($this.is('.active')) {
			setClosed();
		} else {
			$this.addClass('active');
			li.removeClass('closed');
			li.each(function (index) {
				$(this).css('top', 60 * (index + 1)).css('width', '100%').css('margin-left', '0px');
			});
		}
	});
	links.on('click', function (e) {
		var $this = $(this), label = $this.data('label');
		icon = $this.children('i').attr('class');
		li.removeClass('active');
		if ($this.parent('li').is('active')) {
			$this.parent('li').removeClass('active');
		} else {
			$this.parent('li').addClass('active');
		}
		toggler.children('span').text(label);
		toggler.children('i').removeClass().addClass(icon);
		setClosed();
		e.preventDefault;
	});
}(jQuery));
</script>
</body>
</html>

CSS代码(styles.css):

@import url(https://fonts.useso.com/css?family=Roboto:300,500);html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline;}
html{line-height:1;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle;}
q,blockquote{quotes:none;}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none;}
a img{border:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body{background-color:#ecf0f1;overflow:hidden;font-family:'Roboto',sans-serif;font-size:1em;}
.container{max-width:800px;margin:0 auto;padding:0 15px;}
header{padding:3.5rem 10%;background-color:#fff;margin-bottom:2.5rem;text-align:center;}
header svg{max-width:50px;display:inline-block;fill:#1abc9c;vertical-align:middle;}
header h1,header h2,header p{color:#2c3e50;margin-bottom:1rem;}
header h1{font-weight:300;color:#1abc9c;letter-spacing:-0.2rem;font-size:4rem;text-shadow:0 1px 0 rgba(255,255,255,0.8);}
header h2{font-size:1.5rem;margin-bottom:0;}
header h2 span{font-weight:300;display:inlie-block;padding:0 8px;font-size:80%;color:#fff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
header h2 span.js{background-color:#E4A128;}
header h2 span.css{background-color:#0070BB;}
header h2 span.heart{background-color:#EB304A;}
p{line-height:1.8;text-align:left;font-weight:300;font-size:1.2rem;}
.card-drop{position:relative;margin:0 auto;-moz-perspective:800px;-webkit-perspective:800px;perspective:800px;background:rgba(0,0,0,0.1);}
.card-drop a{display:block;width:100%;padding:20px 0 20px 20px;height:60px;text-decoration:none;color:#217dbb;background-color:#fafafa;border:1px solid #ddd;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}
/*.card-drop a i{display:inline-block;width:20px;}
*/
.card-drop > a.toggle{position:relative;z-index:100;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-moz-transform-origin:50% 0%;-ms-transform-origin:50% 0%;-webkit-transform-origin:50% 0%;transform-origin:50% 0%;-moz-transition:linear 0.1s;-o-transition:linear 0.1s;-webkit-transition:linear 0.1s;transition:linear 0.1s;}
.card-drop > a.toggle:active{-moz-transform:rotateX(60deg);-webkit-transform:rotateX(60deg);transform:rotateX(60deg);}
.card-drop > a.toggle:active:after{-moz-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg);}
.card-drop > a.toggle:before,.card-drop > a.toggle:after{content:"";position:absolute;}
.card-drop > a.toggle:before{right:25px;top:50%;margin-top:-2.5px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,0.8);}
.card-drop > a.toggle.active:before{transform:rotate(180deg);}
.card-drop ul{position:absolute;height:100%;top:0;display:block;width:100%;}
.card-drop ul li{margin:0 auto;-moz-transition:all,ease-out 0.3s;-o-transition:all,ease-out 0.3s;-webkit-transition:all,ease-out 0.3s;transition:all,ease-out 0.3s;position:absolute;top:0;z-index:0;width:100%;}
.card-drop ul li a{border-top:none;}
.card-drop ul li a:hover{background-color:#4aa3df;color:#f3f9fd;}
.card-drop ul li.active a{color:#fff;background-color:#258cd1;cursor:default;}
.card-drop ul li.closed a:hover{cursor:default;background-color:#3498db;}

附件:下载该文件资源,减少时间成本(增值服务)