html+css伸缩侧边栏

最新推荐文章于 2024-07-23 16:23:26 发布

不只是月亮

最新推荐文章于 2024-07-23 16:23:26 发布

阅读量1.2k

点赞数 2

分类专栏： html+css 文章标签： css html

本文链接：https://blog.csdn.net/sisseJ/article/details/122654098

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css本部分

    <nav>
        <ul class="menus">
            <li class="li">
                <i class="fa fa-th-large" aria-hidden='true'></i>
                基础组件
                <ul>
                    <li>周一 Monday</li>
                    <li>周二 Tuesday</li>
                    <li>周三 Wednesday</li>
                    <li>周四 Thursday</li>
                    <li>周五 Friday</li>
                    <li>周六 Saturday</li>
                    <li>周日 Sunday</li>
                </ul>
            </li>
            <li class="li">
                <i class="fa fa-th-list" aria-hidden='true'></i>
                表单组件
                <ul>
                    <li>一月：Januaryv</li>
                    <li>二月：February</li>
                    <li>三月:March </li>
                    <li>四月：April</li>
                    <li>五月：May</li>
                    <li>六月：June </li>
                    <li>七月：July</li>
                    <li>八月：August</li>
                    <li>九月：September</li>
                  
                </ul>
            </li>
            <li class="li">
                <i class="fa fa-handshake-o" aria-hidden='true'></i>
                反馈组件
                <ul>
                    <li>java</li>
                    <li>javaScript</li>
                    <li>html</li>
                    <li>es6</li>
                    <li>spring</li>
                    <li>ajax</li>
                    
                </ul>
            </li>
            <li class="li">
                <i class="fa fa-wpexplorer" aria-hidden='true'></i>
                展示组件
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                </ul>
            </li>
        </ul>
    </nav>

css部分

* {
    margin:0;
    padding:0;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2387b6;
}
ul {
    list-style: none;
}
nav {
    position: fixed;
    width: 300px;
    height: 650px;
    background-color: #c584d3;
}
.menus {
    margin: 50px 0;
    color: #fff;
}
.li {
    letter-spacing: 2px;
    font-size: 17px;
    font-weight: 600;
    padding: 16px 0;
    transition: 0.3s;
}
.menus li:hover{
    background-color: rgb(230, 18, 177);
}
.li .fa{
    font-size: 20px;
    width: 50px;
    height: 20px;
    text-align: 5px;
    margin-left: 5px;
}
.li ul{
    width: 0px;
    height: 550px;
    padding: 50px 0;
    position: absolute;
    background: rgb(75, 6, 63);
    top: 0;
    right: 0;
    overflow: hidden;
    transition: 0.3s;
}
.li ul li{
    padding:16px 24px;
    white-space: nowrap;
    transition: 0.3s;
}
.li:hover ul{
    width: 250px;
}
.li ul li:hover{
    background-color: rgb(14, 13, 13);
}