<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Just some base styles not needed for example to function */
*, html {
font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}
body, form, ul, li, p, h1, h2, h3, h4, h5
{
margin: 0;
padding: 0;
}
body { background-color: #fff; color: #4C4C4C; margin: 60px 0 0; }
img { border: none; }
p
{
font-size: 1em;
margin: 0 0 1em 0;
}
html { font-size: 100%; /* IE hack */ }
body { font-size: 1em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }
/* Branding */
#cssninja
{
position: absolute;
top: 0;
left: 0;
background-color: #18191d;
width: 100%;
height: 40px;
}
#cssninja p
{
text-align: center;
margin: 10px 0 0 0;
}
#cssninja a
{
text-decoration: none;
color: #fff;
padding: 4px 0 9px 28px;
}
#cssninja a:hover
{
text-decoration: underline;
}
#adpack {
text-align: center;
width: 178px;
height: auto;
right: 15px;
top: 60px;
position: fixed;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.05);
padding: 24px 24px 10px;
font-size: 12px;
font-weight: 700;
}
/* CSS Tree menu styles */
ol.tree
{
padding: 0 0 0 30px;
width: 300px;
}
li
{
position: relative;
margin-left: -15px;
list-style: none;
}
li.file
{
margin-left: -1px !important;
}
li.file a
{
background: url(./images/document.png) 0 0 no-repeat;
color: #4C4C4C;
padding-left: 21px;
text-decoration: none;
display: block;
}
li.file a[href *= '.pdf'] { background: url(./images/document.png) 0 0 no-repeat; }
li.file a[href *= '.html'] { background: url(./images/document.png) 0 0 no-repeat; }
li.file a[href $= '.css'] { background: url(./images/document.png) 0 0 no-repeat; }
li.file a[href $= '.js'] { background: url(./images/document.png) 0 0 no-repeat; }
li input
{
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
li input + ol
{
background: url(./images/toggle-small-expand.png) 40px 0 no-repeat;
margin: -0.938em 0 0 -44px; /* 15px */
height: 1em;
}
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label
{
background: url(./images/folder-horizontal.png) 15px 1px no-repeat;
cursor: pointer;
display: block;
padding-left: 37px;
}
li input:checked + ol
{
background: url(./images/toggle-small.png) 40px 5px no-repeat;
margin: -1.25em 0 0 -44px; /* 20px */
padding: 1.563em 0 0 80px;
height: auto;
}
li input:checked + ol > li { display: block; margin: 0 0 0.125em; /* 2px */}
li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
</style>
</head>
<body>
<ol class="tree">
<li>
<label for="folder1">Folder 1</label> <input type="checkbox" checked disabled id="folder1" />
<ol>
<li class="file"><a href="#">File 1</a></li>
<li>
<label for="subfolder1">Subfolder 1</label> <input type="checkbox" id="subfolder1" />
<ol>
<li class="file"><a href="">Filey 1</a></li>
<li>
<label for="subsubfolder1">Subfolder 1</label> <input type="checkbox" id="subsubfolder1" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subsubfolder2">Subfolder 1</label> <input type="checkbox" id="subsubfolder2" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
<li class="file"><a href="">File 3</a></li>
<li class="file"><a href="">File 4</a></li>
<li class="file"><a href="">File 5</a></li>
<li class="file"><a href="">File 6</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder2">Folder 2</label> <input type="checkbox" id="folder2" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder2">Subfolder 1</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder3">Folder 3</label> <input type="checkbox" id="folder3" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder3">Subfolder 1</label> <input type="checkbox" id="subfolder3" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder4">Folder 4</label> <input type="checkbox" id="folder4" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder4">Subfolder 1</label> <input type="checkbox" id="subfolder4" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
<li>
<label for="folder5">Folder 5</label> <input type="checkbox" id="folder5" />
<ol>
<li class="file"><a href="">File 1</a></li>
<li>
<label for="subfolder5">Subfolder 1</label> <input type="checkbox" id="subfolder5" />
<ol>
<li class="file"><a href="">Subfile 1</a></li>
<li class="file"><a href="">Subfile 2</a></li>
<li class="file"><a href="">Subfile 3</a></li>
<li class="file"><a href="">Subfile 4</a></li>
<li class="file"><a href="">Subfile 5</a></li>
<li class="file"><a href="">Subfile 6</a></li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>
诗和远方success
