侧边导航栏练习(前端)

ps酷教程

已于 2022-07-16 11:37:37 修改

阅读量1.9k

点赞数 5

分类专栏：前端学习文章标签：前端 css css3

于 2022-07-16 10:10:17 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/125816268

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

仵老大代码gitee链接：https://gitee.com/wulaoda/html_css_js_demo

实现的效果

在这里插入图片描述

代码

在写的过程中，有几个需要注意的，
1、主要是使用了flex布局，这种布局里面的主轴排列方式，来控制图标和菜单文字水平排列和垂直排列，以及它们的居中。
2、宽度(100%)应该要给到a标签，让整个菜单区域都能点击。
3、收缩的过程中，发现文字在宽度变窄的过程中，它会换行，非常突兀，所以要加个nowrap不让文字换行，
4、使用transition过渡，并且在勾选复选框时，使用同时修改它们的宽度。
5、还有一点也是最眼前一亮的，原来复选框和css选择器，还可以这样用的？！！！

index2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./test.css">
</head>

<body>

    <div class="navbar">
        <input checked type="checkbox" id="cb">
        <label for="cb">
            <i class="fa fa-bars"></i>
        </label>
        <ul>
            <li>
                <a href="#">
                    <img src="./images/1.png" alt="">
                    <span>您好,管理员</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-home"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-gift"></i>
                    <span>礼物中心</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-heartbeat"></i>
                    <span>健康状况</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-paper-plane"></i>
                    <span>消息中心</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-shield"></i>
                    <span>安全设置</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-area-chart "></i>
                    <span>统计图表</span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

test.css

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
html,body,.navbar {
    height: 100%;
}

body {
    background-color: #fff;
    overflow: hidden;
}
.navbar input[type=checkbox]{
    display: none;
}
.navbar > label {
    background-color: rgb(237, 237, 237);
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 70px;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    font-size: 20px;
    transition: all 0.5s;
}

.navbar > label i {
    cursor: pointer;
}

.navbar ul {
    background-color: rgb(42, 63, 84);
    width: 70px;
    height: 100%;
    transition: all 0.5s;
    overflow: hidden;
}

.navbar ul li {
    height: 70px;
}

.navbar ul li:first-child span {
    display: none;
}

.navbar ul li:first-child a img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.navbar ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(209,209,209);
    height: 100%;
    width: 100%;
}

.navbar ul li a:hover {
    background-color: rgb(53, 73, 93);
    color: #fff;
} 

.navbar ul li a i {
    font-size: 22px;
}

.navbar ul li a span {
    font-size: 13px;
    white-space: nowrap;
}

.navbar input[type=checkbox]:checked + label {
    left: 200px;
}

.navbar input[type=checkbox]:checked ~ ul {
    width: 200px;
}

.navbar input[type=checkbox]:checked ~ ul li a {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.navbar input[type=checkbox]:checked ~ ul li i {
    margin-left: 15px;
    margin-right: 15px;
    font-size:18px
}

.navbar input[type=checkbox]:checked ~ ul li span {
    font-size: 15px;
}

.navbar input[type=checkbox]:checked ~ ul li:first-child img {
    margin-left: 10px;
    margin-right: 10px;
}

.navbar input[type=checkbox]:checked ~ ul li:first-child span {
    display: block;
}