CSS3 垂直树状图——运用 :before 和 :after

最新推荐文章于 2021-02-23 09:55:21 发布

水色陀螺

最新推荐文章于 2021-02-23 09:55:21 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用纯CSS创建树状结构菜单的方法。通过巧妙地运用CSS伪元素及过渡效果，实现了菜单项展开与收起的平滑动画。文章详细解释了如何通过`:before`和`:after`伪元素绘制分支线，并展示了如何处理不同层级菜单项间的布局与样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    *{
        margin:0;
        padding:0;
    }
    .tree ul{
        padding-top:20px;
        position: relative;
        webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition:all .3s;
    }
    .tree li{
        float:left;
        list-style: none;
        text-align: center;
        position: relative;
        padding:20px 5px 0 5px;
        webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition:all .3s;
    }
    /*利用::before,::after作分支线*/
    .tree li::before,.tree li::after{
        content:"";
        position: absolute;
        top:0;
        right:50%;
        width:50%;
        height:20px;
        border-top:1px solid #ccc;
    }
    .tree li:after{
        right:auto;
        left:50%;
        border-left:1px solid #ccc;
    }
    .tree li:first-child::before,.tree li:last-child::after{
        border:0 none;
    }
    .tree li:last-child::before{
        border-right:1px solid #ccc;
        -webkit-border-radius: 0 10px 0 0;
        -moz-border-radius: 0 10px 0 0;
        border-radius: 0 10px 0 0;
    }
    .tree li:first-child::after{
        -webkit-border-radius: 10px 0 0 0;
        -moz-border-radius: 10px 0 0 0;
        border-radius: 10px 0 0 0;
    }

    /*删除仅只有一个分支的分支线*/
    .tree li:only-child::before,.tree li:only-child::after{
        border:none;
    }
    .tree li:only-child{
        padding-top:0;
    }

    /*添加仅只有一个分支的下分支线*/
    .tree ul ul::before{
        content:"";
        position: absolute;
        top:0;
        left:50%;
        border-left:1px solid #ccc;
        width:0;
        height:20px;
    }
    .tree a{
        display: inline-block;
        border:1px solid #ccc;
        padding: 5px 10px;
        color:#666;
        text-decoration: none;
        padding:10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition:all .3s;
    }
    /*添加选中状态*/
    .tree li a:hover,.tree li a:hover+ul li a{
        background-color: #c8e4f8;
        color: #000;
        border: 1px solid #94a0b4;
    }
    .tree li a:hover+ul li:after,.tree li a:hover+ul li:before,.tree li a:hover+ul::before,.tree li a:hover+ul ul::before{
        border-color: #94a0b4;
    }
    </style>
<div class="tree">
    <ul>
        <li><a href="#">parent</a>
            <ul>
                <li><a href="#">child</a>
                    <ul>
                        <li><a href="#">Grant child</a></li>
                    </ul>
                </li>
                <li><a href="#">child</a>
                    <ul>
                        <li><a href="#">Grant child</a></li>
                        <li><a href="#">Grant child</a>
                            <ul>
                                <li><a href="#">Great Grant child</a></li>
                                <li><a href="#">Great Grant child</a></li>
                                <li><a href="#">Great Grant child</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Grant child</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>