找回密码
当前位置：前端开发者 > CSS > 正文

Web前端纯CSS树形菜单

2018-09-05 23:14:29 分类：CSS 阅读(836) 评论(0)

开发好看前端框架 微信网页开发前端框架 浏览器前端开发的框架

html结构：
ul.tree
li.tree-node
label
input.node-check
div.node-content
i.node-icon
……
span.node-text
ul.tree
……
css 代码片段

.tree {
    list-style: none;
    padding-left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tree > .tree-node .tree {
    display: block;
    overflow-y: hidden;
    max-height: 300px;
    height: auto;
    -webkit-transition: max-height 0.5s ease-in;
    -moz-transition: max-height 0.5s ease-in;
    -o-transition: max-height 0.5s ease-in;
    -ms-transition: max-height 0.5s ease-in;
    transition: max-height 0.5s ease-in;
}
.tree-node {
    margin-top: -3px;
}
.tree input.node-check {
    display: none;
}
.tree > .tree-node > label {
    cursor: pointer;
}
.tree .node-content {
    display: inline-block;
}
.tree .node-content > .node-text {
    font-size: 12px;
    line-height: 14px;
    font-family: arial, verdana, Microsoft YaHei, Tahoma, Simsun, sans-serif;
    margin-left: -4px;
}
.tree .node-content > .node-text:hover {
    color: #00a000;
}
.node-icon {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}
.node-check:checked + .node-content > .tree {
    max-height: 0;
}
.node-check:checked + .node-content > .icon-folder {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/folder.gif);
}
.node-check:checked + .node-content > .icon-expand {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end-plus-nl.gif);
}
.icon-expand {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end-minus-nl.gif);
}
.icon-minus {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-minus.gif);
}
.icon-elbow {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow.gif);
}
.icon-elbow-line {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-line.gif);
}
.icon-elbow-end {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end.gif);
}
.icon-file {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/leaf.gif);
}
.icon-folder {
    background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/folder-open.gif);
}

html 代码片段

<!doctype html>
<head>
    <title>树形菜单</title>
    <meta charset=”utf-8″>
    <style>
        body {
            background: #fefefe;
        }
        .tree {
            list-style: none;
            padding-left: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .tree>.tree-node .tree {
            display: block;
            overflow-y: hidden;
            max-height: 300px;
            height: auto;
            -webkit-transition: max-height .5s ease-in;
            -moz-transition: max-height .5s ease-in;
            -o-transition: max-height .5s ease-in;
            -ms-transition: max-height .5s ease-in;
            transition: max-height .5s ease-in;
        }
        .tree-node {
            margin-top: -3px;
        }
        .tree input.node-check {
            display: none;
        }
        .tree>.tree-node>label {
            cursor: pointer;
        }
        .tree .node-content {
            display: inline-block;
        }
        .tree .node-content>.node-text {
            font-size: 12px;
            line-height: 14px;
            font-family: arial, verdana, Microsoft YaHei, Tahoma, Simsun, sans-serif;
            margin-left: -4px;
        }
        .tree .node-content>.node-text:hover {
            color: #00A000;
        }
        .node-icon {
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            vertical-align: middle;
            width: 16px;
            height: 16px;
        }
        .node-check:checked+.node-content>.tree {
            max-height: 0;
        }
        .node-check:checked+.node-content>.icon-folder {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/folder.gif);
        }
        .node-check:checked+.node-content>.icon-expand {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end-plus-nl.gif);
        }
        .icon-expand {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end-minus-nl.gif);
        }
        .icon-minus {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-minus.gif);
        }
        .icon-elbow {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow.gif);
        }
        .icon-elbow-line {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-line.gif);
        }
        .icon-elbow-end {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/elbow-end.gif);
        }
        .icon-file {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/leaf.gif);
        }
        .icon-folder {
            background-image: url(http://sandbox.runjs.cn/uploads/rs/193/ybc7pl9z/folder-open.gif);
        }
    </style>
</head>
<body>
    <ul class=”tree”>
        <li class=”tree-node”>
            <label>
                <input class=”node-check” type=”checkbox”>
                <div class=”node-content”>
                    <i class=”node-icon icon-expand”></i>
                    <i class=”node-icon icon-folder”></i>
                    <span class=”node-text”>目录1</span>
                    <ul class=”tree”>
                        <li class=”tree-node”>
                            <label>
                                <input class=”node-check” type=”checkbox”>
                                <div class=”node-content”>
                                    <i class=”node-icon icon-elbow-line”></i>
                                    <i class=”node-icon icon-elbow”></i>
                                    <i class=”node-icon icon-file”></i>
                                    <span class=”node-text”>文件1</span>
                                </div>
                            </label>
                        </li>
                        <li class=”tree-node”>
                            <label>
                                <input class=”node-check” type=”checkbox”>
                                <div class=”node-content”>
                                    <i class=”node-icon icon-elbow-line”></i>
                                    <i class=”node-icon icon-elbow”></i>
                                    <i class=”node-icon icon-file”></i>
                                    <span class=”node-text”>文件1</span>
                                </div>
                            </label>
                        </li>
                        <li class=”tree-node”>
                            <label>
                                <input class=”node-check” type=”checkbox”>
                                <div class=”node-content”>
                                    <i class=”node-icon icon-elbow-line”></i>
                                    <i class=”node-icon icon-expand”></i>
                                    <i class=”node-icon icon-folder”></i>
                                    <span class=”node-text”>目录22</span>
                                    <ul class=”tree”>
                                        <li class=”tree-node”>
                                            <label>
                                                <input class=”node-check” type=”checkbox”>
                                                <div class=”node-content”>
                                                    <i class=”node-icon icon-elbow-line”></i>
                                                    <i class=”node-icon icon-elbow”></i>
                                                    <i class=”node-icon icon-file”></i>
                                                    <span class=”node-text”>asadsadsa</span>
                                                </div>
                                            </label>
                                        </li>
                                        <li class=”tree-node”>
                                            <label>
                                                <input class=”node-check” type=”checkbox”>
                                                <div class=”node-content”>
                                                    <i class=”node-icon icon-elbow-line”></i>
                                                    <i class=”node-icon icon-elbow”></i>
                                                    <i class=”node-icon icon-file”></i>
                                                    <span class=”node-text”>asdsads</span>
                                                </div>
                                            </label>
                                        </li>
                                        <li class=”tree-node”>
                                            <label>
                                                <input class=”node-check” type=”checkbox”>
                                                <div class=”node-content”>
                                                    <i class=”node-icon icon-elbow-line”></i>
                                                    <i class=”node-icon icon-elbow”></i>
                                                    <i class=”node-icon icon-file”></i>
                                                    <span class=”node-text”>assgghgsdgh</span>
                                                </div>
                                            </label>
                                        </li>
                                        <li class=”tree-node”>
                                            <label>
                                                <input class=”node-check” type=”checkbox”>
                                                <div class=”node-content”>
                                                    <i class=”node-icon icon-elbow-line”></i>
                                                    <i class=”node-icon icon-elbow-end”></i>
                                                    <i class=”node-icon icon-file”></i>
                                                    <span class=”node-text”>sdfdfsas</span>
                                                </div>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </label>
                        </li>
                    </ul>
                </div>
            </label>
        </li>
        <li class=”tree-node”>
            <label>
                <input class=”node-check” type=”checkbox”>
                <div class=”node-content”>
                    <i class=”node-icon icon-elbow”></i>
                    <i class=”node-icon icon-file”></i>
                    <span class=”node-text”>xxxxx</span>
                </div>
            </label>
        </li>
        <li class=”tree-node”>
            <label>
                <input class=”node-check” type=”checkbox”>
                <div class=”node-content”>
                    <i class=”node-icon icon-expand”></i>
                    <i class=”node-icon icon-folder”></i>
                    <span class=”node-text”>yyyyyy</span>
                    <ul class=”tree”>
                        <li class=”tree-node”>
                            <label>
                                <input class=”node-check” type=”checkbox”>
                                <div class=”node-content”>
                                    <i class=”node-icon”></i>
                                    <i class=”node-icon icon-elbow”></i>
                                    <i class=”node-icon icon-file”></i>
                                    <span class=”node-text”>zzzzzz</span>
                                </div>
                            </label>
                        </li>
                        <li class=”tree-node”>
                            <label>
                                <input class=”node-check” type=”checkbox”>
                                <div class=”node-content”>
                                    <i class=”node-icon”></i>
                                    <i class=”node-icon icon-elbow”></i>
                                    <i class=”node-icon icon-file”></i>
                                    <span class=”node-text”>zzzzzz</span>
                                </div>
                            </label>
                        </li>
                        <li class=”tree-node”>
                            <label>
                                <input class=”node-check” type=”checkbox”>
                                <div class=”node-content”>
                                    <i class=”node-icon”></i>
                                    <i class=”node-icon icon-elbow”></i>
                                    <i class=”node-icon icon-file”></i>
                                    <span class=”node-text”>zzzzzz</span>
                                </div>
                            </label>
                        </li>
                        <li class=”tree-node”>
                            <label>
                                <input class=”node-check” type=”checkbox”>
                                <div class=”node-content”>
                                    <i class=”node-icon”></i>
                                    <i class=”node-icon icon-elbow-end”></i>
                                    <i class=”node-icon icon-file”></i>
                                    <span class=”node-text”>zzzzzz</span>
                                </div>
                            </label>
                        </li>
                    </ul>
                </div>
            </label>
        </li>
    </ul>
</body>
</html>

前端在项目开发中如何选择框架 ui设计web前端开发框架 好未来前端开发框架

» 本文来自：前端开发者 » 《Web前端纯CSS树形菜单》
» 本文链接地址：https://www.rokub.com/5504.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论