以下是 CSS3实现用户功能菜单特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3实现用户功能菜单特效</title>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="l-main">
<div class="menu">
<header class="menu__header">
<h1 class="menu__header-title">Incoming Messages</h1>
</header>
<div class="menu__body">
<ul class="nav">
<li class="nav__item">
<a href="#" class="nav__item-link is-active">
<i class="fa fa-envelope nav__item-icon"></i>
<span class="nav__item-text">News</span>
<span class="badge badge--warning">32</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<i class="fa fa-flag nav__item-icon"></i>
<span class="nav__item-text">Priority</span>
<span class="badge">8</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<i class="fa fa-space-shuttle nav__item-icon"></i>
<span class="nav__item-text">Assigned</span>
<span class="badge">0/17</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<i class="fa fa-archive nav__item-icon"></i>
<span class="nav__item-text">Archived</span>
<span class="badge">3</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<i class="fa fa-trash nav__item-icon"></i>
<span class="nav__item-text">Deleted</span>
<span class="badge">9</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<span class="nav__item-text">Show all</span>
</a>
</li>
</ul>
</div>
</div>
<div class="menu menu--small">
<header class="menu__header">
<h1 class="menu__header-title">Incoming</h1>
</header>
<div class="menu__body">
<ul class="nav">
<li class="nav__item">
<a href="#" class="nav__item-link is-active">
<i class="fa fa-envelope nav__item-icon"></i>
<span class="badge badge--warning">32</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<i class="fa fa-flag nav__item-icon"></i>
<span class="badge">8</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<i class="fa fa-space-shuttle nav__item-icon"></i>
<span class="badge">0/17</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<i class="fa fa-archive nav__item-icon"></i>
<span class="badge">3</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<i class="fa fa-trash nav__item-icon"></i>
<span class="badge">9</span>
</a>
</li>
<li class="nav__item">
<a href="#" class="nav__item-link">
<span class="nav__item-text">Show all</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS代码(style.css):
body{background:#F4F4F4;font-family:Arial,sans-serif;font-size:14px;font-weight:lighter;}
.l-main{width:530px;margin:0 auto;}
.menu{width:250px;margin:40px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.3);border-radius:5px;float:left;}
.menu__header{background:#4B4F55;border-bottom:1px solid #353A40;border-radius:5px 5px 0 0;}
.menu__header-title{color:#fff;padding:15px;text-shadow:0 1px 0 rgba(0,0,0,0.4);}
.menu__body{border-radius:0 0 5px 5px;}
.menu--small{width:110px;}
.nav{list-style:none;}
.nav__item{position:relative;}
.nav__item-link{padding:10px 15px;text-decoration:none;color:#8B8E93;display:block;border-bottom:1px solid #F0F0F0;}
.nav__item-link:hover{background:#f0f0f0;}
.nav__item-link.is-active{background:#6E757F;color:#fff;border-bottom-color:#4B4F55;box-shadow:0 1px 0 #7A828D inset;}
.nav__item-link.is-active:after{content:'';display:block;position:absolute;top:50%;right:-6px;margin-top:-6px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #6E757F;}
.nav__item-link.is-active .nav__item-icon{color:#fff;}
.nav__item:last-child .nav__item-link{border-bottom:none;}
.nav__item-icon{color:#D2D5DA;width:20px;text-align:center;font-size:18px;margin-right:10px;}
.badge{font-size:12px;padding:2px 8px;border:1px solid #D1D1D1;border-radius:10px;position:absolute;top:10px;right:15px;}
.badge--warning{background:#ED373F;border-color:#ED373F;}
分享到QQ
分享到微博
微信扫一扫
