HTML5 details/summary树形菜单效果实例页面

回到相关文章 »

效果：

我的视频

爆肝工程师的异世界狂想曲

tv1-720p.mp4

tv2-720p.mp4

tv3-720p.mp4

tv4-720p.mp4

tv5-720p.mp4

tv6-720p.mp4

tv7-720p.mp4

tv8-720p.mp4

tv9-720p.mp4

tv10-720p.mp4

七大罪

七大罪B站00合集.mp4

珍藏动漫网盘地址.txt

我们的小美好.mp4

代码：

CSS代码：

/* 隐藏默认三角 */
::marker {
    font-size: 0;
}
details {
    padding-left: 20px;
}
summary::before {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    border: 1px solid #999;
    background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center;
    background-size: 2px 10px, 10px 2px;
    vertical-align: -2px;
    margin-right: 6px;
    margin-left: -20px;
}
[open] > summary::before {
    background: linear-gradient(to right, #999, #999) no-repeat center;
    background-size: 10px 2px;
}

HTML代码：

<details>
    <summary>我的视频</summary>
    <details>
        <summary>爆肝工程师的异世界狂想曲</summary>
        <div>tv1-720p.mp4</div>
        <div>tv2-720p.mp4</div>
        ...
        <div>tv10-720p.mp4</div>
    </details>
    <details>
        <summary>七大罪</summary>
        <div>七大罪B站00合集.mp4</div>
    </details>
    <div>珍藏动漫网盘地址.txt</div>
    <div>我们的小美好.mp4</div>
</details>