I have added a "more" button to the bottom left of my website to reveal a menu.
Upon clicking the button, the plus sign changes to an x.
I would like the page to disable click and scroll actions when the plus sign is clicked.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle"></i>
<i class="fa-inverse fas fa-plus" data-fa-transform="shrink-6"></i>
</span>
</div>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-menu-action">
<li><a href="/profile" data-drupal-link-system-path="profile"><i class="fas fa-id-card fa-lg"></i> Create my profile</a></li>
</ul>
</div>
Below is my CSS code:
.overlay-is-navbar-collapse {
overflow: hidden;
pointer-events: none;
}
Here is my JavaScript file:
(function ($) {
$('#dropdown-menu-action').on('show.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hide.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});
})(window.jQuery);
UPDATE
The code above is not functioning as intended. When I click outside the menu, it closes but the body class remains.
$('#dropdown-menu-action').on('click', () => {
$('body').toggleClass('overlay-is-navbar-collapse');
});
I have also tried the following code, but it does not work:
$('#dropdown-menu-action').on('shown.bs.dropdown', function () {
$('body').addClass('overlay-is-navbar-collapse');
});
$('#dropdown-menu-action').on('hidden.bs.dropdown', function () {
$('body').removeClass('overlay-is-navbar-collapse');
});