手機常見的選單按鈕開啟與關閉的動態-我是一個金艾吉

手機常見的選單按鈕開啟與關閉的動態

按鈕 icon 預設為常見的 humburger 三條線，點擊之後以動態方式變成 ⨉

重點：

$('.icon').click(function () {
$('.icon').toggleClass('active');
}); //狀態切換
三條線的位置以絕對位置捉取
轉變成⨉的動態
#dailycss_20210726 .icon.active .hamburger:before {
    top: 0;
    transform: rotate(45deg);
}
#dailycss_20210726 .icon.active .hamburger:after {
    top: 0;
    transform: rotate(135deg);
}

效果演示：

HTML 與 JQUERY：

<!doctype html>
<html>
<head>
    <title>手機選單開啟按鈕 ICON 變化</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20210726">
    <div class="icon">
        <div class="hamburger"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function () {
            $('.icon').click(function () {
                $('.icon').toggleClass('active');
            });
        });
    </script>
</body>
</html>

CSS：

#dailycss_20210726 {
    margin: 0;
    padding: 0;
    background: #ff5c40;
}

#dailycss_20210726 .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    cursor: pointer;
}

#dailycss_20210726 .hamburger {
    width: 50px;
    height: 6px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: .5s;
}

#dailycss_20210726 .hamburger:before,
#dailycss_20210726 .hamburger:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 6px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: .5s;
}

#dailycss_20210726 .hamburger:before {
    top: -16px;
}

#dailycss_20210726 .hamburger:after {
    top: 16px;
}

#dailycss_20210726 .icon.active .hamburger {
    background: rgba(0, 0, 0, 0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

#dailycss_20210726 .icon.active .hamburger:before {
    top: 0;
    transform: rotate(45deg);
}

#dailycss_20210726 .icon.active .hamburger:after {
    top: 0;
    transform: rotate(135deg);
}

來源：