当前位置: 首页 > 前端笔记 > CSS > CSS3 Accordion Menu
2014年19八月

CSS3 Accordion Menu

连续3天没有更新内容了,在想是不是要砍掉哪些没啥用的栏目。今天在网上找了一个设计稿,写了一下,算是一个基本的实例教程。

主要有几个点,雪碧图的用法、CSS3投影、CSS3的动画的应用、如何让demo在屏幕的最中央。上代码和实例,注释在代码中。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Accordion Menu</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
body { margin:0; padding:0; font-family:"微软雅黑","Microsoft Yahei",Simsun,"宋体",Arial,Helvetica,sans-serif; font-size:12px; background:#282828; }
#menu { width:675px; height:350px; position:absolute; left:50%; top:50%; margin:-175px 0 0 -337px; background:url(images/background.jpg) no-repeat 0 0; border-radius:10px; } /* position:absolute; left:50%; top:50%; margin:-175px 0 0 -337px; 就能让对象在屏幕的正中间*/
.accordion { width:218px; margin:42px auto 0; padding:0; background:#222931; border:1px #181e26 solid; border-radius:8px; box-shadow:3px 5px 5px rgba(0,0,0,0.5);/*CSS3投影*/ overflow:hidden; }
.accordion .p-ul { width:100%; float:left; clear:both; margin:0; padding:0; list-style:none; }
.accordion .item { width:100%; float:left; clear:both; margin:0; padding:0; list-style:none; border-top:1px #4a4e5a solid; border-bottom:1px #1e2127 solid; height:37px; }
.accordion .item:nth-child(2)/*CSS3选择器 表示是第二个item*/ { animation:run 0.6s linear 1 forwards; } /*动画名称 动画时间 运动方式 次数 forwards:这个是把最有一帧转成关键帧,使动画在这里停止,如果没有设置这个属性,最后会还原到第一帧状态*/
@keyframes run {
form { height:37px;	} 
to { height:143px; }
}
.accordion .p-link { height:37px; line-height:37px; display:block; background:#383d49; background:linear-gradient(to bottom,#3c414d,#363a46); color:#c9d1e3; text-decoration:none; font-size:13px; position:relative; }
.accordion .p-link:hover { background:#363a46; background:linear-gradient(to bottom,#363a46,#202020); }
.accordion .p-link .icon { margin:8px 8px 0 8px; }
/*雪碧图的应用*/
.accordion .icon { width:24px; height:24px; float:left; background-image:url(images/icon.png); background-repeat:no-repeat; }
.accordion .icon-userhead { background-position:0 0; }
.accordion .icon-message { background-position:-24px 0; }
.accordion .icon-setting { background-position:0 -24px; }
.accordion .icon-logout { background-position:-24px -24px; }
.accordion .icon-arrow { width:0; height:0; border:3px #616b7c solid; border-color:transparent transparent transparent #616b7c; background:none; margin:13px 8px 0 18px; }
.accordion .item-count { position:absolute; background:#595f6e; padding:0 10px; border-radius:5px; right:8px; top:8px; line-height:20px; font-size:11px; box-shadow:1px 1px 1px rgba(0,0,0,0.5); }
.accordion .sub { width:100%; float:left; clear:both; padding:5px 0; list-style:none; }
.accordion .sub-item { width:100%; float:left; clear:both; margin:0; padding:0; list-style:none; }
.accordion .sub-link { line-height:32px; display:block; color:#c9d1e3; text-decoration:none; font-size:12px; transition:background 600ms linear; }
.accordion .sub-link:hover { background:#181818; }
.accordion strong { font-weight:normal; }
</style>
</head>

<body>
<div id="menu">
	<div class="accordion">
		<ul class="p-ul">
			<li class="item">
				<a href="#" class="p-link"><i class="icon icon-userhead"></i><strong>用户中心</strong></a>
			</li>
			<li class="item">
			<a href="#" class="p-link"><i class="icon icon-message"></i><strong>信息中心</strong><span class="item-count">32</span></a>
				<ul class="sub">
					<li class="sub-item">
						<a href="#" class="sub-link"><i class="icon icon-arrow"></i><strong>系统消息</strong></a>
					</li>
					<li class="sub-item">
						<a href="#" class="sub-link"><i class="icon icon-arrow"></i><strong>优惠活动</strong></a>
					</li>
					<li class="sub-item">
						<a href="#" class="sub-link"><i class="icon icon-arrow"></i><strong>参与主题</strong></a>
					</li>
				</ul>
			</li>
			<li class="item">
				<a href="#" class="p-link"><i class="icon icon-setting"></i><strong>系统设置</strong></a>
			</li>
			<li class="item">
				<a href="#" class="p-link"><i class="icon icon-logout"></i><strong>退出登录</strong></a>
			</li>
		</ul>
	</div>
</div>
</body>
</html>

CSS3动画需要留在最后一帧上就要这样:animation:run 0.6s linear 1 forwards;

查看在线演示:CSS3 Accordion Menu.html,打包下载文件:CSS3 Accordion Menu.rar

文章信息

  • 发布日期:2014年08月19日 09:31:53
  • 固定地址:http://www.estorm.cn/notes/css/2014-08-19/CSS3-accordion-menu.html