文章数量
36
访客量
4952
访问量
9817

css特效之汉堡按钮抽屉功能

阅读量:841
更新时间:2023-02-25 16:21:54

效果预览:效果预览
源码下载:关注公众号【RMRF】,回复【css6】可获取源码

一、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>抽屉</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<script>
    function handleInput() {
        const inputDom = document.getElementsByTagName("input")[0]
        const drawerDom = document.getElementsByClassName("drawer-wrapper")[0]
        if (inputDom.checked) {
            drawerDom.setAttribute("class", 'drawer-wrapper open')
        } else {
            drawerDom.setAttribute("class", 'drawer-wrapper close')
        }
    }
</script>
<body>
    <header>
        <label class="burger">
            <input onclick="handleInput()" type="checkbox">
            <span></span>
            <span></span>
            <span></span>
        </label>
    </header>
    <div class="drawer-wrapper">
        <div class="drawer rtl">Hello World!</div>
    </div>
</body>
</html>

二、CSS样式

* {
    padding: 0px;
    margin: 0px;
}

body {
    background-color: #eee;
}

header {
    position: relative;
    height: 60px;
    background-color: #fff;
}

.burger {
    position: absolute;
    cursor: pointer;
    right: 40px;
    top: 15px;
    height: 30px;
    width: 35px;
    z-index: 10000;
}

input[type="checkbox"] {
    display: none;
    visibility: hidden;
}

.burger span {
    position: absolute;
    width: 35px;
    height: 5px;
    display: inline-block;
    background-color: #999;
    border-radius: 100px;
    transition: .3s all;
}

.burger span:nth-of-type(1) {
    top: 0px;
}


.burger span:nth-of-type(2) {
    top: 12px;
}

.burger span:nth-of-type(3) {
    bottom: 0px;
}


input[type]:checked~span:nth-of-type(1) {
    transform: rotate(45deg);
    transform-origin: top left;
    width: 35px;
    left: 3px;

}

input[type]:checked~span:nth-of-type(3) {
    transform: rotate(-45deg);
    transform-origin: top left;
    width: 35px;
    left: -1px;
    box-shadow: 0 0 10px #495057;
}

input[type]:checked~span:nth-of-type(2) {
    transform: translateX(-20px);
    opacity: 0;
}

.drawer-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    transition: 0.3s all;
    opacity: 0;
}

.drawer-wrapper.open {
    visibility: visible;
    opacity: 1;
}

.drawer-wrapper.close {
    visibility: hidden;
}

.drawer-wrapper.open .drawer {
    transform: translate(0, 0);

}

.drawer {
    position: absolute;
    right: 0;
    width: 400px;
    height: 100%;
    overflow: hidden;
    background: #fff;
    transition: 0.3s all;
    transform: translate(100%, 0);
}