Hello everyone. I need a little help with my html code.
I want to load html file (menu.html) inside my index.html file
I am trying to achieve this using JavaScript.
Here is an example how i am trying to achieve this.
this is menu.html file
<!-- Mobile Nav (max width 767px)-->
<div class="mobile-nav">
<!-- Navbar Brand -->
<div class="amado-navbar-brand">
<a href="index.html"><img src="core/img/core-img/drveniproizvodi-logo.png" alt=""></a>
</div>
<!-- Navbar Toggler -->
<div class="amado-navbar-toggler">
<span></span><span></span><span></span>
</div>
</div>
<!-- Header Area Start -->
<header class="header-area clearfix">
<!-- Logo -->
<div class="logo">
<a href="index.html"><img src="core/img/core-img/drveniproizvodi-logo.png" alt=""></a>
</div>
<!-- Social Button -->
<div class="social-info d-flex justify-content-between">
<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
<div class="categories-menu">
<a href="index.html"></a><br>
<a href="subfolder/index.html"></a><br>
<a href="subfolder/index.html"></a><br>
<a href="subfolder/index.html"> </a><br>
<a href="subfolder/index.html"></a><br>
</div>
</header>
<!-- Header Area End -->and this is index.html file
<html>
<head>
<link rel="stylesheet" href="core/css/core-style.css">
<link rel="stylesheet" href="core/style.css">
</head>
<body>
<div id="menu"></div>
<script>
$(function(){
$("#menu").load("menu.html");
});
</script>
</body>
</html>The thing is, the design loads properly. But the functionality doesn't work. When i press the button to open the menu on a mobile device.
BUT when i simply paste the code from menu.html inside index.html works just fine?
Here is a picture how it looks
https://prnt.sc/h-_GWy50wOHN