css实现树形可折叠菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现树形可折叠菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 30px; font-family: sans-serif; background: white; } #fontSizeWrapper { font-size: 16px; } #fontSize { width: 100px; font-size: 1em; } /* ————————————————————– Tree core styles */ .tree { margin: 1em; } .tree input { position: absolute; clip: rect(0, 0, 0, 0); } .tree input ~ ul { display: none; } .tree input:checked ~ ul { display: block; } /* ————————————————————– Tree rows */ .tree li { line-height: 1.2; position: relative; padding: 0 0 1em 1em; } .tree ul li { padding: 1em 0 0 1em; } .tree > li:last-child { padding-bottom: 0; } /* ————————————————————– Tree labels */ .tree_label { position: relative; display: inline-block; background: #fff; } label.tree_label { cursor: pointer; } label.tree_label:hover { color: #666; } /* ————————————————————– Tree expanded icon */ label.tree_label:before { background: #000; color: #fff; position: relative; z-index: 1; float: left; margin: 0 1em 0 -2em; width: 1em; height: 1em; border-radius: 1em; content: '+'; text-align: center; line-height: .9em; } :checked ~ label.tree_label:before { content: '–'; } /* ————————————————————– Tree branches */ .tree li:before { position: absolute; top: 0; bottom: 0; left: -.5em; display: block; width: 0; border-left: 1px solid #777; content: ""; } .tree_label:after { position: absolute; top: 0; left: -1.5em; display: block; height: 0.5em; width: 1em; border-bottom: 1px solid #777; border-left: 1px solid #777; border-radius: 0 0 0 .3em; content: ''; } label.tree_label:after { border-bottom: 0; } :checked ~ label.tree_label:after { border-radius: 0 .3em 0 0; border-top: 1px solid #777; border-right: 1px solid #777; border-bottom: 0; border-left: 0; bottom: 0; top: 0.5em; height: auto; } .tree li:last-child:before { height: 1em; bottom: auto; } .tree > li:last-child:before { display: none; } .tree_custom { display: block; background: #eee; padding: 1em; border-radius: 0.3em; } </style> </head> <body translate="no"> <div id="fontSizeWrapper"> <label for="fontSize">Font size</label> <input type="range" value="1" id="fontSize" step="0.5" min="0.5" max="5" /> </div> <ul class="tree"> <li> <input type="checkbox" checked="checked" id="c1" /> <label class="tree_label" for="c1">Level 0</label> <ul> <li> <input type="checkbox" checked="checked" id="c2" /> <label for="c2" class="tree_label">Level 1</label> <ul> <li><span class="tree_label">Level 2</span></li> <li><span class="tree_label">Level 2</span></li> </ul> </li> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0