I have project where it is must to use Mmenu js which is js library. Here is the link
document.addEventListener("DOMContentLoaded", () => {
new Mmenu("#menu", {
offCanvas: {
position: "left",
},
theme: "light",
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/9.1.0/mmenu.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/9.1.0/mmenu.js"></script>
<nav id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/work">Our work</a></li>
<li>
<span>About us</span>
<ul>
<li><a href="/about/history">History</a></li>
<li>
<span>The team</span>
<ul>
<li><a href="/about/team/management">Management</a></li>
<li><a href="/about/team/sales">Sales</a></li>
<li><a href="/about/team/development">Development</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>Services</span>
<ul>
<li><a href="/services/design">Design</a></li>
<li><a href="/services/development">Development</a></li>
<li><a href="/services/marketing">Marketing</a></li>
</ul>
</li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Here is the code. It not working at all. What I see is just an error in the console.
Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute')
Please help me out with this. I have even tried previous versions but still its not working. I am using Chrome 99.
I tried to reproduce your issue and made some changes in it. Hope that's how you wanted it to work.
Working Code Snippet.
document.addEventListener("DOMContentLoaded", () => {
new Mmenu("#menu", {
offCanvas: {
position: "left",
},
theme: "light",
});
}); <link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/9.1.0/mmenu.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/9.1.0/mmenu.js"></script>
<!-- The page -->
<div class="page">
<div class="mh-head Sticky">
<a href="#menu" class="mh-text">demo</a>
</div>
</div>
<nav id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/work">Our work</a></li>
<li>
<span>About us</span>
<ul>
<li><a href="/about/history">History</a></li>
<li>
<span>The team</span>
<ul>
<li><a href="/about/team/management">Management</a></li>
<li><a href="/about/team/sales">Sales</a></li>
<li><a href="/about/team/development">Development</a></li>
</ul>
</li>
</ul>
</li>
<li>
<span>Services</span>
<ul>
<li><a href="/services/design">Design</a></li>
<li><a href="/services/development">Development</a></li>
<li><a href="/services/marketing">Marketing</a></li>
</ul>
</li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>