Why isn't my Hamburger menu example code working?

Question

I'm trying to get this hamburger menu to work

Here is the example code source https://www.jqueryscript.net/menu/responsive-multi-level-hamburger-nav.html

I'm using Visual Studio 2019 and am not sure why this is giving me so much trouble? The menu either is expanded completely as text at code launch or it is 3 lines that do not respond when I click on it. The example seems pretty simplistic, but I haven't been able to get it to work like shown in the example.

[

$(document).ready(function () {
    //alert("Menu");
    var display_width = $(window).width();
    var hamburger = $("#hambuger_menu");
    var menu = $("#menubody");
    $(hamburger).click(function (e) {
        menu.toggleClass("open");
        hamburger.toggleClass("open");
    });
    $(".menu_body__item_wrapper li.has_child").each(function (index) {
        $(this).click(function (event) {
            $('.sub-menu').eq(index).slideToggle();
            event.preventDefault();
            event.stopImmediatePropagation();
        });
        $('.sub-menu').click(function (e) {
            e.stopPropagation();
            e.stopImmediatePropagation();
        })
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<style>

    body {
        /*background-image: url('../../images/grandOpening1.jpeg');*/
    }

    /*<script type="text/javascript" >
    $(document).ready(function() {
                alert("ready");
            });
    </script >*/
    /*<script type="text/javascript" src="/wherever/whatever.js" / >*/

</style>


<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/main.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.js"></script>


<div class="humburger" id="hambuger_menu">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>

<section class="menu_body" id="menubody">
    <div class="menu_body__item_wrapper">
        <!-- menu list-->
        <ul class="menu_list">
            <li><a href="#">Home</a></li>
            <!-- have submenu-->
            <li class="has_child">
                <a href="#">About</a>
                <ul class="sub-menu">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Managment</a></li>
                </ul>
            </li>
            <!-- have submenu-->
            <li class="has_child">
                <a href="javascript">Projects</a>
                <ul class="sub-menu">
                    <li><a href="#">Ongoing</a></li>
                    <li><a href="#">Complete</a></li>
                </ul>
            </li>
            <li><a href="#">Brochure</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</section>


@*<script src="/path/to/cdn/jquery.min.js"></script>*@
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/JavaScript.js"></script>
@*<div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>

Answer 1

Grab this, it may help.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Test 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Test 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Test 3</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Answer 2

For anyone else that is having a hard time getting this to work in a project, here is what I did to get it to work in Visual Studio 2019, you'll of course need to match my file/folder structure for the links and scripts, or alter those to match your own file/folder structure inside your project.

The index.cshtml file contents

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title>Responsive Multi-level Hamburger Nav Example</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/style.css">
    <link href="~/Content/style.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />


    <style>
        body {
            background: #f7f7f7;
        }

        .lead {
            font-size: 1.5rem;
            font-weight: 300;
        }

        .container {
            margin: 0 auto;
            max-width: 960px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Responsive Multi-level Hamburger Nav Example</h1>
        
        <p class="lead">A responsive, mobile-friendly, multi-level hamburger navigation system (also called offcanvas menu) written in JavaScript (jQuery) and CSS/CSS3.</p>
    </div>
    <!--  hamburger section-->
    <div class="humburger" id="hambuger_menu">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>


    <!--main menu body-->
    <section class="menu_body" id="menubody">
        <div class="menu_body__item_wrapper">
            <!--    menu list-->
            <ul class="menu_list">
                <li><a href="#">Home</a></li>
                <!--      have submenu-->
                <li class="has_child">
                    <a href="#">About</a>
                    <ul class="sub-menu">
                        <li><a href="#">Who We Are</a></li>
                        <li><a href="#">Managment</a></li>
                    </ul>
                </li>
                <!--      have submenu-->
                <li class="has_child">
                    <a href="javascript">Projects</a>
                    <ul class="sub-menu">
                        <li><a href="#">Ongoing</a></li>
                        <li><a href="#">Complete</a></li>
                    </ul>
                </li>
                <li><a href="#">Brochure</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact Us</a></li>

            </ul>


        </div>
    </section>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/modernizr-2.8.3.js"></script>




    <script src="~/Scripts/JavaScript.js"></script>

    
</body>

</html>

And in the local javascript file

$(document).ready(function () {
    //alert("Menu");
    console.log("in (document).ready function");


    var display_width = $(window).width();
    var hamburger = $("#hambuger_menu");
    var menu = $("#menubody");
    $(hamburger).click(function (e) {
        menu.toggleClass("open");
        hamburger.toggleClass("open");
    });
    $(".menu_body__item_wrapper li.has_child").each(function (index) {
        $(this).click(function (event) {
            $('.sub-menu').eq(index).slideToggle();
            event.preventDefault();
            event.stopImmediatePropagation();
        });
        $('.sub-menu').click(function (e) {
            e.stopPropagation();
            e.stopImmediatePropagation();
        })
    })
});