div+css实现多级分类点击展开收起效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现多级分类点击展开收起效果代码,无js代码,纯css+div实现。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ionicons.min.css"> <style> summary { display: block; cursor: pointer; outline: 0 } summary::-webkit-details-marker { display: none } body { background-color: #191c1e; color: white; font-size: 1.6rem; font-family: arial; margin: 0; padding: 3rem } .tree-nav__item { display: block; white-space: nowrap; color: #ccc; position: relative } .tree-nav__item.is-expandable::before { border-left: 1px solid #333; content: ""; height: 100%; left: .8rem; position: absolute; top: 2.4rem; height: calc(100% - 2.4rem) } .tree-nav__item .tree-nav__item { margin-left: 2.4rem } .tree-nav__item.is-expandable[open]>.tree-nav__item-title::before { font-family: "ionicons"; transform: rotate(90deg) } .tree-nav__item.is-expandable>.tree-nav__item-title { padding-left: 2.4rem } .tree-nav__item.is-expandable>.tree-nav__item-title::before { position: absolute; will-change: transform; transition: transform 300ms ease; font-family: "ionicons"; color: #fff; font-size: 1.1rem; content: "\f125"; left: 0; display: inline-block; width: 1.6rem; text-align: center } .tree-nav__item-title { cursor: pointer; display: block; outline: 0; color: #fff; font-size: 1.5rem; line-height: 3.2rem } .tree-nav__item-title .icon { display: inline; padding-left: 1.6rem; margin-right: .8rem; color: #666; font-size: 1.4rem; position: relative } .tree-nav__item-title .icon::before { top: 0; position: absolute; left: 0; display: inline-block; width: 1.6rem; text-align: center } .tree-nav__item-title::-webkit-details-marker { display: none } </style> </head> <body> <nav class="tree-nav"><a class="tree-nav__item-title"><i class="icon ion-scissors"></i>THE INHERITANCE </a><a class="tree-nav__item-title"><i class="icon ion-android-star"></i>The Willful Princess and the Piebald Prince </a> <details class="tree-nav__item is-expandable" open=""> <summary class="tree-nav__item-title">The Realm of the Elderlings</summary> <details class="tree-nav__item is-expandable" open=""> <summary class="tree-nav__item-title">The Six Duchies</summary> <details class="tree-nav__item is-expandable" open=""> <summary class="tree-nav__item-title">The Farseer Trilogy</summary> <div class="tree-nav__item"> <table style="width:100%"> <tbody> <tr> <th>IP Address</th> <th>Object Name</th> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0