html及css实现侧边栏效果

怪（乖）

已于 2022-02-10 12:02:09 修改

阅读量6.7k

点赞数 5

分类专栏： css记录常用必备文章标签： css html 前端

于 2022-02-10 11:49:58 首次发布

本文链接：https://blog.csdn.net/qq_45429152/article/details/122857563

版权

常用必备同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css记录

4 篇文章 0 订阅

订阅专栏

此文章只讲述鼠标悬停触发侧边栏

一、右侧侧边栏

html：

<div id="side-menu">
        <div id="side-menu-inner">
            this is menu content
        </div>
    </div>

css：

 #side-menu {
            background-color: lightgrey;
            display: block;
            position: fixed;
            top: 0px;
            right: 0px;
            bottom: 0px;
            width: 250px;
            transition: transform 200ms ease-in;
            transform: translateX(calc(-24px + 100%));
        }

        #side-menu:hover {
            transform: translateX(0px);
        }

        #side-menu-inner {
            display: block;
            height: 100%;
            width: calc(-24px + 100%);
            transform: translateX(24px);
            background-color: red;
        }

效果如下：

二、左侧侧边栏

html：

<div id="side-menu">
        <div id="side-menu-inner">
            this is menu content
        </div>
    </div>

css：

  #side-menu {
            background-color: lightgrey;
            display: block;
            position: fixed;
            top: 0px;
            left: 0px;
            bottom: 0px;
            width: 250px;
            transition: transform 200ms ease-in;
            transform: translateX(calc(-100% + 24px));
        }

        #side-menu:hover {
            transform: translateX(0px);
        }

        #side-menu-inner {
            display: block;
            height: 100%;
            width: calc(100% - 24px);
            background-color: red;
        }

效果如下：