クリックによるスライドメニューが稼働しません

#サイトのスライドメニューが稼働せずどうしたらいいのかわかりません。h1

クリックによってボタンが「三」から「☓」になるアニメーションは稼働するのですが、上か降りてくるスライドが稼働しません。

もしよろしければ教えていただけると嬉しいです。

コードはこちらになります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wp-test</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <header>
        <div class="slide">
            <h1>wp-test</h1>
            <p class="btn-menu">
                <span></span>
                <span></span>
                <span></span>
            </p>
            <nav class="menu">
                <ul>
                    <li><a href="">ホーム</a></li>
                    <li><a href="">企業紹介</a></li>
                    <li><a href="">慈善活動</a></li>
                    <li><a href="">アクセス</a></li>
                    <li><a href="">お問い合わせ</a></li>
                    <li>
                        <form class="search-form" role="search" method="GET" action="">
                            <div class="search-box">
                                <input type="text" class="search-input" name="" placeholder="キーワードを入力してください">
                                <button type="submit" class="button-submit">????</button>
                            </div>
                        </form>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="image">
            <img src="" alt="photo">
            <h1 class="main-title">HELLO WORLD</h1>
        </div>
    </header>

CSS

header {
        text-align: center;
    }
    header h1 {
        margin: 5px;
    }
    .btn-menu {
        display: block;
        width: 42px;
        height: 51px;
        margin: auto 7px auto auto;
        cursor: pointer;
        z-index: 3;
        text-align: center;
    }
    .btn-menu span {
        display: block;
        position: absolute;
        width: 30px;
        border-bottom: solid 3px #eee;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }
    .btn-menu span:nth-child(1) {
        top: 9px;
    }
    .btn-menu span:nth-child(2) {
        top: 18px;
    }
    .btn-menu span:nth-child(3) {
        top: 27px;
    }
    .btn-menu.active span:nth-child(1) {
        top: 18px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .btn-menu.active span:nth-child(2),
    .btn-menu.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    nav.menu {
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        background: rgb(0, 0, 0, 0.4);
        color: rgb(255, 255, 255);
        text-align: center;
        transform: translateY(-100%);
        transition: all 0.8s;
        width: 100%;
    }
    nav.menu ul {
        background: rgb(0, 0, 0, 0.4);
        margin: 0 auto;
        padding: 0;
        width: 100%;
        display: block;
    }
    nav.menu ul li {
        font-size: 1.1em;
        list-style-type: none;
        padding: 0;
        width: 100%;
        border-bottom: 1px dotted rgb(255, 255, 255);
        color: white;
    }
    nav.menu ul li:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
    nav.menu ul li a {
        display: block;
        color: rgb(255, 255, 255);
        padding: 1em 0;
    }
    .menu ul li a:link {
        color: rgb(255, 255, 255);
    }
    .menu ul li a:visited {
        color: rgb(255, 255, 255);
    }
    .menu ul li a:hover {
        color: rgb(6, 250, 197);
        border-bottom: 2px black solid;
    }
    .menu ul li a:active {
        color: rgb(255, 255, 255);
    }
    nav .menu .active {
        transform: translateY(0);
    }

Javascript

$(function() {
    $('.btn-menu').click(function() {
        $(this).toggleClass('active');
        if($(this).hasClass('active')) {
            $('.menu').addClass('active');
        } else {
            $('.menu').removeClass('active');
        }
    });
});