Roderick Lord Roderick Lord - 1 month ago 6
Javascript Question

jQuery Function to bring in "offcanvas" slide-in menu is not working

I have tried and searched the internet dry without any solution to my problem. I have created an list in which I modified to be located off the main screen as a slide-in menu using transform: translate (-100%). When the main navbar collapses into the mobile button, I intend to assign a jQuery function to the button in order to slide-in the offcanvas menu. However, the button does not respond no matter what and I need some aid. Any help is greatly appreciated!

/..The main navbar../
<nav class="main-navigation" role="navigation">
<ul>

<li class="products1"><a href="#2">Products</a></li>
<li class="store1"><a href="#3">Store</a></li>
<li class="about1"><a href="#4">About Us</a></li>
<li class="discover1"><a href="#5">Discover</a></li>
<li class="support1"><a href="#6">Support</a></li>

</ul>
</nav>

<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">

/..The button that dosen't work../
<button class="navbar-toggle pro-toggle pull-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>

/..The menu that I want to slide in but dosen't work../

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">

<li class="products"><a href="#2">Products</a></li>
<li class="store"><a href="#3">Store</a></li>
<li class="about"><a href="#4">About Us</a></li>
<li class="discover"><a href="#5">Discover</a></li>
<li class="support"><a href="#6">Support</a></li>

</ul>
</div>

</div>
</div>
</div>
</div>
</body>

/..The main CSS for the slide-in menu../

<style>
.main-navigation {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: fixed;
text-align: center;
text-decoration: none;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}

.main-navigation.open {
transform: translateX(0);
}

</style>

/..The jQuery function that is supposed to slide-in the menu../

<script>
$(document).ready(function() {
$('.pro-toggle').on('click', function(){
${'.main-navigation').toggleClass('open');
});
});
</script>

Answer

change

from ${'.main-navigation') to $('.main-navigation').