css折叠日期时间线时间轴效果代码
代码语言：html
所属分类：布局界面
代码描述：css折叠日期时间线时间轴效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.timeline {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAcSURBVHjaYnz9+vV/BjTAxIAFUCgIAAAA//8DAILHA8pW2pZ5AAAAAElFTkSuQmCC) repeat-y 10px;
width: 80px;
float: left;
}
.year li .year-button {
cursor: pointer;
background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -175px no-repeat;
height: 25px;
padding-left: 22px;
margin-left: 8px;
line-height: 25px;
}
.year li .year-button:hover {
background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -29px no-repeat
}
.year>.active .year-button {
background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px 0px no-repeat;
color: #FFF;
}
.year>.active .year-button:hover {
background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px 0px no-repeat;
color: #FFF;
}
.month {
display: none;
margin-left: 7px;
}
.active>.month {
display: block
}
.month>li {
cursor: pointer;
height: 25px;
padding-right: 25px;
line-height: 25px;
text-align: right;
}
.month>li a {
color: #000000;
}
.month>li.active {
background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -89px no-repeat;
}
.month>li.active a {
color: #FFF;
}
.month>li:hover {
background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -119px no-repeat;
}
.month>li.active:hover {
background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -89px no-repeat;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
//隐藏所有子栏目（除第一个栏目外）
$(".year:not(:first)").find(".month").hide();
//点击大栏目
$(".year>li").click(function(){
$("li.active",$(this).parent()).removeClass("active");
$(this).addClass("active");
$("ul>li:first",this).addClass("active");
});
$(".month>li").click(function(){
var $ul=$(this).parent();
$ul.find(".active").removeClass("active");
$(this).addClass("active");
return false;
});
});
</script>
</head>
<body>
<div class="box">
<div class="timeline">
<ul class="year">
<!--year-->
<li>
<div class="year-button"> 2016 </div>
<ul class="month">
<li><a href="#">12月</a></li>
<li><a href="#">11月</a></li>
<li><a href="#">10月</a></li>
<li><a href="#">9月</a></li>
<li><a href="#">8月</a></li>
<li><a href="#">7月</a></li>
<li><a href="#">6月</a></li>
<li><a href="#">5月</a></li>
<li><a href="#">4月</a></li>
<li><a href="#">3月</a></li>
<li><a href="#">2月</a></li>
<li><a href="#">1月</a></li>
</ul>
<!--month-->
</li>
<!--year-->
<li class="active">
<div class="year-button"> 2015 </div>
<ul class="month">
<li class="active"><a href="#">5月</a></li>
<li><a href="#">12月</a></li>
<li><a href="#">11月</a></li>
<li><a href="#">10月</a></li>
<li><a href="#">9月</a></li>
<li><a href="#">8月</a></li>
<li><a href="#">7月</a></li>
<li><a href="#">6月</a></li>
<li><a href="#">5月</a></li>
<li><a href="#">4月</a></li>
<li><a href="#">3月</a></li>
<li><a href="#">2月</a></li>
<li><a href="#">1月</a></li>
</ul>
<!--month-->
</li>
<!--year-->
<li>
<div class="year-button"> 2014 </div>
<ul class="month">
<li><a href="#">12月</a></li>
<li><a href="#">11月</a></li>
<li><a href="#">10月</a></li>
<li><a href="#">9月</a></li>
<li><a href="#">8月</a></li>
<li><a href="#">7月</a></li>
<li><a href="#">6月</a></li>
<li><a href="#">5月</a></li>
<li><a href="#">4月</a></li>
<li><a href="#">3月</a></li>
<li><a href="#">2月</a></li>
<li><a href="#">1月</a></li>
</ul>
<!--month-->
</li>
<!--year-->
<li>
<div class="year-button"> 2013 </div>
<ul class="month">
<li><a href="#">12月</a></li>
<li><a href="#">11月</a></li>
<li><a href="#">10月</a></li>
<li><a href="#">9月</a></li>
<li><a href="#">8月</a></li>
<li><a href="#">7月</a></li>
<li><a href="#">6月</a></li>
<li><a href="#">5月</a></li>
<li><a href="#">4月</a></li>
<li><a href="#">3月</a></li>
<li><a href="#">2月</a></li>
<li><a href="#">1月</a></li>
</ul>
<!--month-->
</li>
<!--year-->
<li>
<div class="year-button"> 2012 </div>
<ul class="month">
<li><a href="#">12月</a></li>
<li><a href="#">11月</a></li>
<li><a href="#">10月</a></li>
<li><a href="#">9月</a></li>
<li><a href="#">8月</a></li>
<li><a href="#">7月</a></li>
<li><a href="#">6月</a></li>
<li><a href="#">5月</a></li>
<li><a href="#">4月</a></li>
<li><a href="#">3月</a></li>
<li><a href="#">2月</a></li>
<li><a href="#">1月</a></li>
</ul>
<!--month-->
</li>
<!--year-->
<li>
<div class="year-button"> 2011 </div>
<ul class="month">
<li><a href="#">12月</a></li>
<li><a href="#">11月</a></li>
<li><a href="#">10月</a></li>
<li><a href="#">9月</a></li>
<li><a href="#">8月</a></li>
<li><a href="#">7月</a></li>
<li><a href="#">6月</a></li>
<li><a href="#">5月</a></li>
<li><a href="#">4月</a></li>
<li><a href="#">3月</a></li>
<li><a href="#.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0