Your code do work, but you need to make the .toggle visible so that you can click on it. Not pretty, but shows how it could work:
$(function() {
$('.toggle').on('click', function() {
$('.wrapper').toggleClass('open');
});
});
.wrapper {
transform: translateX(0px);
transition: transform .4s ease;
}
.wrapper.open {
transform: translateX(280px);
}
#main-nav {
transform: translateX(-280px);
}
.toggle {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<nav id="main-nav">
<div class="menu-btn toggle">|Menu|</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
</div>
Your code seems to work almost, since JQuery was missing and a overkill in this situation I’ve rewritten it a little. Also needed to add some content for the menu and button to make it visible. The code you showed wasn’t enough to reproduce the problem. 😉
I would also advice to use an actual button tag for interactions like this, for accessibility reasons (native support for keyboard interaction).
If you’re interested: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
const body = document.body; // Get the document body
// Get your menu with a special JS class, prevents accidents when other
// developers will use your code later on (seperate JS functions from styling classes).
const menuToggle = document.querySelector('.js-site-menu');
// Set a classname to use lateron (DRY).
const menuToggleClass = "is-open";
// Add event to listen to.
menuToggle.addEventListener("click", (event) => {
// Get current clicked object/target.
let currentTarget = event.currentTarget;
// Check if opened class is present on body
let menuOpened = body.classList.contains(`${menuToggleClass}`);
// Check if menu is already open.
if (!menuOpened) {
// Adds class to body when not opened
body.classList.add(`${menuToggleClass}`);
} else {
// Removes class from body when menu is already opened
body.classList.remove(`${menuToggleClass}`);
}
});
`/* Used percentages(%) instead of a fixed px size for easier responsive behaviour later on the road. */`
.main-nav {
transform: translateX(-101%);
transition: transform .4s ease;
}
.is-open .main-nav {
transform: translateX(0%);
}
.main-nav_button {
position: absolute;
top: 0;
right: 0;
}
<div class="wrapper">
<button type="button" class="main-nav_button js-site-menu">Menu</button>
<nav class="main-nav">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</nav>
</div>
I want to push my menu with the content also being pushed to the right, but for some reason the JS code doesn’t get the job done. <div class="menu-btn toggle"></div> doesn’t trigger the menu. Can somebody tell me why and how to fix it?
JS
$(function() {
$('.toggle').on('click', function() {
$('.wrapper').toggleClass('open');
});
});
CSS
.wrapper {
transform: translateX(0px);
transition: transform .4s ease;
}
.wrapper.open {
transform: translateX(280px);
}
#main-nav {
transform: translateX(-280px);
}
HTML
<div class="wrapper">
<nav id="main-nav">
<div class="menu-btn toggle"></div>
<ul></ul>
</nav>
</div>
