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 »</a></p>
</div>