纯css实现可折叠线条树形菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:纯css实现可折叠线条树形菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ background: white; } @charset "UTF-8"; /* TRANSITIONS */ /* COLORS */ /* TREE MENU */ .lk-tree-menu { padding: 10px; list-style: none; } @keyframes slideDown { from { opacity: 0; } to { opacity: 1; } } .lk-tree-menu input { position: absolute; clip: rect(0, 0, 0, 0); } .lk-tree-menu input ~ ul { display: none; padding: 0px; animation: slideDown .5s ease-out; } .lk-tree-menu input:checked ~ ul { display: block; } .lk-tree-menu input:checked ~ label.tree_label:before { content: "–"; } .lk-tree-menu input:checked ~ label.tree_label:after { border-radius: 0 0.3em 0 0; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 0; border-left: 0; bottom: 0; top: 0.5em; height: auto; margin: 5px 0px 0px 1px; } .lk-tree-menu > li:last-child:before { display: none; } .lk-tree-menu li { line-height: 1.2; position: relative; padding: 0 0 1em 1em; list-style: none; } .lk-tree-menu li:last-child:before { height: 1em; bottom: auto; } .lk-tree-menu li:before { position: absolute; top: 0; bottom: 0; left: -0.5em; display: block; width: 0; border-left: 1px solid #606060; content: ""; } .lk-tree-menu li:last-child { padding-bottom: 0; } .lk-tree-menu li ul li { padding: 0.5em 0 0 1em; } .lk-tree-menu label { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; border-radius: 3px; } .lk-tree-menu label.tree_label { cursor: pointer; margin: 0px; width: 100%; padding: 5px; } .lk-tree-menu label:hover { color: white; background: #6ebc20; } .lk-tree-menu label.tree_label:before { background: #609d22; color: #fff; position: relative; z-index: 1; float: left; margin: 0 1em 0 -2.3em; width: 1em; height: 1em; border-radius: 1em; content: "+"; text-align: center; line-height: 0.9em; } .lk-tree-menu label.tree_label:after { border-bottom: 0; } .lk-tree-menu .tree_label { position: relative; display: inline-block; background: #fff; } .lk-tree-menu .tree_label:after { position: abso.........完整代码请登录后点击上方下载按钮下载查看
网友评论0