css3 accordian
1.linear-gradient(#003040,#002535);< /span>
CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。参考http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html
2.
源代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>20130829-1</title>
<script type="text/javascript" src=\'#\'" //thecodeplayer.com/uploads/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
src=\'#\'" //thecodeplayer.com/uploads/js/prefixfree-1.0.7.js">
</script>
<script type="text/javascript" >
$(document).ready(function(){
$("#accordian h3").click(function(){
$("#accordian ul ul").slideUp();
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
</script>
<style type="text/css">
/*custom font for text*/
@import url((http://fonts.googleapis.com/css?family=Nunito);
/*css import*/
@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
*{margin:0;padding:0;}
body{
background:#4eb889;
font-family:Nunito,arial,verdana;
}
#accordian{
background:#004050;
width:250px;
margin:100px auto 0 auto;
color:white;
box-shadow:
0 5px 15px 1px rgba(0,0,0,0.6),
0 0 200px 1px rgba(255,255,255,0.5);
}
#accordian h3{
font-size:12px;
line-height:34px;
padding:0 10px;
cursor:pointer;
background:#003040;
linear-gradient(#003040,#002535);< /p>
}
#accordian h3 span{
font-size:16px;
margin-right:10px;
}
#accordian h3:hover{
text-shadow:0 0 1px rgba(255,255,255,0.7);
}
/*list item*/
#accordian li{
list-style-type:none;
}
/*links*/
#accordian ul ul li a{
color:white;
text-decoration:none;/*取消下划线效果*/
font-size:11px;
line-height:27px;
display:block;
padding:0 15px;
transition:all 0.15s;
}
#accordian ul ul {
display:none;
}
#accordian li.active ul{
display:block;
}
/*hover effect on links*/
#accordian ul ul li a:hover{
background:#003545;
border-left:5px solid lightgreen;
}
</style>
</head>
<body>
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li><a href="#">Reports</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Graphs</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<!-- we will keep this LI open by default -->
<li class="active">
<h3><span class="icon-tasks"></span>Tasks</h3>
<ul>
<li><a href="#">Today's tasks</a></li>
<li><a href="#">Urgent</a></li>
<li><a href="#">Overdues</a></li>
<li><a href="#">Recurring</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Calendar</h3>
<ul>
<li><a href="#">Current Month</a></li>
<li><a href="#">Current Week</a></li>
<li><a href="#">Previous Month</a></li>
<li><a href="#">Previous Week</a></li>
<li><a href="#">Next Month</a></li>
<li><a href="#">Next Week</a></li>
<li><a href="#">Team Calendar</a></li>
<li><a href="#">Private Calendar</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li>
<h3><span class="icon-heart"></span>Favourites</h3>
<ul>
<li><a href="#">Global favs</a></li>
<li><a href="#">My favs</a></li>
<li><a href="#">Team favs</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</ul>
</div>
</body>
</html>