ハンバーガーメニューその2

Document

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <header>
        <div class="site-menu-button">
            <div class="in">
                <div class="line l-1"></div>
                <div class="line l-2"></div>
                <div class="line l-3"></div>
            </div>
        </div>
        <div class="site-menu-contents">
            <nav class="site-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main></main>
    <footer>

    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="index.js"></script>
</body>

</html>

.site-menu-button {
    position: relative;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: wheat;
    z-index: 100;
}

.in {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.line {
    width: 25px;
    height: 1px;
    background-color: black;
    transition: 0.6s;
}

.l-1 {
    transform: translate(0px, -5px) scale(1, 1);
}

.l-2 {
    transform: translate(0px, 0px) scale(1, 1);
    transition: none;
}

.l-3 {
    transform: translate(0px, 5px) scale(1, 1);
}

.site-menu-button.active .l-1 {
    transform: translate(0px, 1px) scale(1, 1) rotate(45deg);
}

.site-menu-button.active .l-2 {
    transform: translate(0px, 0px) scale(1, 0);
}

.site-menu-button.active .l-3 {
    transform: translate(0px, -1px) scale(1, 1) rotate(-45deg);
}


.site-menu-contents {
    position: fixed;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    transition: 0.6s;
　　z-index: 99;
}

.site-menu-contents.active {
    bottom: 0;
}

.site-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

$(function() {
    $('.site-menu-button').click(function () {
        $(this).toggleClass('active');
        $('.site-menu-contents').toggleClass('active');
    });
});