CSS 边栏 sidebar 的制作

程序员文章站 2022-07-06 15:21:56

1. 准备一个 div，内置一个 ul 无序列表给这个 div 一个 sidebar 的 class

完整 HTML + CSS 在文章末尾

1. 考虑一个整体框架，页面由 sidebar 边栏和 main 主体内容组成

以下是 HTML 代码框架，分为两个 div，一个是 sidebar，一个是 main；

完整 HTML 在文章末尾

<div class="sidebar">
    <ul>
        <li>
            <a href="#">
                <i class="fa fa-users"></i>
                <span>用户管理</span>
            </a>
            ...
        </li>
    </ul>
</div>
<div class="main">
    主体内容
</div>

2. 定义 sidebar 的 CSS 样式

完整 CSS 样式在末尾（style.css），下面是分析，获取源码直接滚动到最后。

.sidebar {
    position: fixed;
    left: 0;
    top: 0;

    width: 60px;
    height: 100%;

    background-color: black;
    
    transition: 0.3s;
}

1. 使用 position: fixed，固定定位，不会随着滚动条滚动

2. width: 60px，为 icon 图标预留的宽度，即 sidebar 收缩时的最小宽度

3. transition: 0.3s，增加渐变效果，在 sidebar 伸缩时不会那么“生硬”

悬浮宽度展开，也就是从 60px 到 200px

.sidebar:hover {
    width: 200px;
}

3. 修饰 sidebar 的每一个列表

.sidebar ul li {
    position: relative;

    width: 100%;
    height: 60px;

    list-style: none;
}

1. position: relative，定位，此处只是为了显示增加一个定位，但没有设置 top 等偏移量，因此这里位置不会变化

2. width: 100%，宽度，继承自祖先元素

3. height: 60px，保持宽度一致为 60px

4. list-style: none，去除 <li>前面的小圆点

sidebar 列表 hover 增加背景

风格一：荧光棒

.sidebar ul li:hover {
    background-color: #06EB00;
    box-shadow: 0 0 20px 20px #06EB00;
}

风格二：纯色

.sidebar ul li:hover {
    background-color: #06EB00;
}

如果有更好的方式，可以自定义风格

每个列表主要是由一个 <a> 标签组成，<a> 标签下有 <i> 和 <span>

.sidebar ul li a {
    position: relative;

    display: block;
    width: 100%;
    height: 60px;
    overflow: hidden;

    color: yellowgreen;
    text-decoration: none;
    white-space: nowrap;
}

1. display: block，变成块元素，设置宽高。

2. overflow: hidden，过渡过程中，隐藏文字。

2. color: white，文字默认颜色

3. text-decoration: none，去除 <a> 标签的文字修饰。

4. white-space: nowrap; 不换行

如果不设置 overflow: hidden，则会看到如下画面

如果不设置 white-space: nowrap，则会在 sidebar 伸缩时看到如下过渡

为 <a> 标签下的 <i> 标签增加样式

.sidebar ul li a i {
    position: absolute;
    left: 0;
    top: 0;
    
    width: 60px;
    height: 60px;

    line-height: 60px;
    text-align: center;
}

1. position: absolute，绝对布局，设置宽高。宽高均为 60px

2. line-height: 60px，保持与 height 一致，图标垂直居中。

3. text-align: center，图标水平居中。

为 <a> 标签下的 <span> 增加样式

.sidebar ul li a span {
    position: absolute;
    left: 60px;
    top: 0;
    right: 0;

    height: 60px;

    line-height: 60px;
    text-align: start;
}

1. position: absolute，绝对布局，左偏移 60px，右偏移 0，宽度自动占据剩余

2. line-height: 60px，与高度一致，文字垂直居中

3. text-align: start，文字左对齐

4. 定义 main 的样式

.main {
    position: absolute;
    left: 60px;
    top: 0;
    right: 0;

    transition: 0.3s;
}

.main.active {
    left: 200px;
}

.main

1. position: absolute，绝对布局，默认 left: 60px，right: 0，宽度占据剩余

2. transition: 0.3s，附带过渡效果，防止“生硬”

.main.active

1. 当 .main 同时具有 .active 时，left: 60px 变为 left: 200px，即展开 sidebar，后面通过 JS 控制是否携带 active 样式

5. 使用 JS 控制 sidebar 的伸缩

给 sidebar 添加 onmouseover 和 onmouseout 事件

<div class="sidebar" onmouseover="toggle()" onmouseout="toggle()">

事件定义如下：

function toggle() {
    document.querySelector(".sidebar").classList.toggle("active");
    document.querySelector(".main").classList.toggle("active");
}

classList.toggle() 函数可以切换元素是否携带 class

HTML 代码

<!DOCTYPE HTML>
<html>

<head>
    <title>sidebar</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <div class="sidebar" onmouseover="toggle()" onmouseout="toggle()">
        <ul>
            <li>
                <a href="#">
                    <i class="fa fa-users"></i>
                    <span>用户管理</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-folder-open"></i>
                    <span>文件管理</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-music"></i>
                    <span>音频管理</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-youtube-play"></i>
                    <span>视频管理</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-sitemap"></i>
                    <span>架构管理</span>
                </a>
            </li>
        </ul>
    </div>

    <div class="main">
        填充文字
    </div>
    <script>
        function toggle() {
            document.querySelector(".sidebar").classList.toggle("active");
            document.querySelector(".main").classList.toggle("active");
        }
    </script>
</body>

</html>

CSS 代码

html, body, ul, li, a {
    margin: 0;
    padding: 0;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;

    width: 60px;
    height: 100%;

    background-color: black;

    transition: 0.3s;
}

.sidebar:hover {
    width: 200px;
}

.sidebar ul li {
    position: relative;

    width: 100%;
    height: 60px;

    list-style: none;
}

.sidebar ul li:hover {
    background-color: #06EB00;
}

.sidebar ul li a {
    position: relative;

    display: block;
    width: 100%;
    height: 60px;
    overflow: hidden;

    color: yellowgreen;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar ul li a i {
    position: absolute;
    left: 0;
    top: 0;
    
    width: 60px;
    height: 60px;

    line-height: 60px;
    text-align: center;
}

.sidebar ul li a span {
    position: absolute;
    left: 60px;
    top: 0;
    right: 0;

    height: 60px;

    line-height: 60px;
    text-align: start;
}


.main {
    position: absolute;
    left: 60px;
    top: 0;
    right: 0;

    transition: 0.3s;
}

.main.active {
    left: 200px;
}

本文地址：https://blog.csdn.net/qq_39291919/article/details/112438827

CSS 边栏 sidebar 的制作

HTML 代码

CSS 代码

CSS3制作炫酷的自定义发光文字

CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

推荐10个CSS3 制作的创意下拉菜单效果

纯CSS3制作的鼠标悬停时边框旋转

纯CSS制作的新闻网站中的文章列表

网页制作中十个最好的CSS hacks

使用css3制作登录表单的步骤

ps制作逼真漂亮的蓝色五边形钻石

【实战】如何通过html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）

premiere怎么制作直线两边延伸的动画?