抽屉动画

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

抽屉动画：抽屉动画使用使用非常广泛，但最主流的还是运用于隐藏/展示侧边菜单栏。

桌面端运用逻辑：左侧为操作菜单，默认不显示。鼠标点击左上方圆形或者矩形按钮，左侧自动滑出菜单栏，再次点击按钮，菜单栏再次隐藏。

移动端运用逻辑：左侧为操作菜单，默认不显示。需要时向右滑动界面，操作菜单将从侧边缓缓展示出来，不需要时向左滑动界面，操作菜单又将隐藏在侧边而不会占位置，在移动端使用手势比按钮点击来操控菜单呼出，用户体验更好。

最终效果

一、导入 font-awesome 字体库

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">

二、添加 HTML 文件

<input type="checkbox" id="drawer-toggle" name="drawer-toggle" />
<label for="drawer-toggle" id="drawer-toggle-label"></label>
<header>导航栏</header>
<nav id="drawer">
    <ul>
        <li>
            <i class="fa fa-home fa-lg"></i>
            <a href="#">首页</a>
        </li>
        <li>
            <i class="fa fa-folder fa-lg"></i>
            <a href="#">分类</a>
        </li>
        <li>
            <i class="fa fa-star fa-lg"></i>
            <a href="#">收藏</a>
        </li>
        <li>
            <i class="fa fa-cog fa-lg"></i>
            <a href="#">关于</a>
        </li>
    </ul>
</nav>
<div id="page-content">
    <p>主要的内容</p>
</div>

三、添加 CSS 文件

先初始化页面

1. 设置 * 为 box-sizing: border-box
2. 设置 html 和 body 来使整个项目居中
3. 兼容 Chrome 、 Firefox 、IE、Opera 浏览器
   • -moz- 代表 firefox 浏览器私有属性
   • -ms- 代表 IE 浏览器私有属性
   • -webkit- 代表 safari、chrome 私有属性
   • -o- 代表 Opera

* {
    box-sizing: border-box;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

主要的 CSS 代码

#drawer-toggle {
    position: absolute;
    opacity: 0;
}

#drawer-toggle-label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    left: 0px;
    height: 50px;
    width: 50px;
    display: block;
    position: fixed;
    background: rgba(255, 255, 255, .0);
    z-index: 1;
}



#drawer-toggle-label:before {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    width: 24px;
    background: #8d8d8d;
    left: 13px;
    top: 18px;
    box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d;
}

header {
    width: 100%;
    position: fixed;
    left: 0px;
    color:#333;
    background: #efefef;
    padding: 10px 10px 10px 50px;
    font-size: 20px;
    line-height: 30px;
    z-index: 0;
}

#drawer {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100%;
    width: 300px;
    background: #2f2f2f;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

#drawer::-webkit-scrollbar {
    width: 0 !important
}

#page-content {
    margin-left: 0px;
    margin-top: 50px;
    width: 100%;
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
}



#drawer-toggle:checked~#drawer-toggle-label {
    height: 100%;
    width: calc(100% - 300px);
    background: rgba(255, 255, 255, .8);
}

#drawer-toggle:checked~#drawer-toggle-label,
#drawer-toggle:checked~header {
    left: 300px;
}

#drawer-toggle:checked~#drawer {
    left: 0px;
}

#drawer-toggle:checked~#page-content {
    margin-left: 300px;
}


#drawer ul {
    list-style-type: none;
}

#drawer li {
    display: flex;
    align-items: center;
}

#drawer ul a {
    padding: 10px 10px;
    font-size: 14px;
    display: block;
    color: #c7c7c7;
    text-decoration: none;
}

#drawer ul a:hover {
    color: white;
}

#drawer ul i {
    color: #c7c7c7;
    display: block;
}


@media all and (max-width:350px) {

#drawer-toggle:checked~#drawer-toggle-label {
    height: 100%;
    width: 50px;
}

#drawer-toggle:checked~#drawer-toggle-label,
#drawer-toggle:checked~header {
    left: calc(100% - 50px);
}

#drawer-toggle:checked~#drawer {
    width: calc(100% - 50px);
    padding: 20px;
}

#drawer-toggle:checked~#page-content {
    margin-left: calc(100% - 50px);
}

}

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。