SOLVED
I successfully resolved the issue :)
The challenge was:
$(function () {
$('.navbar-toggler-button').on('click', function () {
$('.animated-hamburger').toggleClass('open'); //Chrome expert mode says $ is not a function
});
});
And here's how I fixed it:
jQuery(document).ready(function ($) {
$('.navbar-toggler-button').on('click', function () {
$('.animated-hamburger').toggleClass('open');
});
});
This solution might also help someone else in need :)
Thank you to everyone who tried to assist.
Inquiry details:
I require aid with certain animations. Working on Bootstrap 5, my aim is to develop a hamburger menu animation.
The below code excerpts are taken from my website, however, the animations are not functioning as intended. These snippets of code can be found at:
HTML CODE:
<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container-fluid container-fluid-mobile">
<jdoc:include type="modules" name="logo"/>
<button class="navbar-toggler navbar-toggler-button" type="button" data-bs-toggle="collapse" data-bs-target="#navigation"aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-hamburger"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 navbar-right nav-item">
<jdoc:include type="modules" name="navigation" onclick="toggleMenu() />
</ul>
<div class="collapse-show-bottom"></div>
</div>
</div>
</nav>
CSS Code:
.animated-hamburger {
width: 30px !important;
height: 20px !important;
position: relative !important;
margin: 0px !important;
-webkit-transform: rotate(0deg) !important;
-moz-transform: rotate(0deg) !important;
-o-transform: rotate(0deg) !important;
transform: rotate(0deg) !important;
-webkit-transition: .5s ease-in-out !important;
-moz-transition: .5s ease-in-out !important;
-o-transition: .5s ease-in-out !important;
transition: .5s ease-in-out !important;
cursor: pointer !important;
}
.animated-hamburger span {
display: block !important;
position: absolute !important;
height: 3px !important;
width: 100% !important;
border-radius: 9px !important;
opacity: 1 !important;
left: 0 !important;
-webkit-transform: rotate(0deg) !important;
-moz-transform: rotate(0deg) !important;
-o-transform: rotate(0deg) !important;
transform: rotate(0deg) !important;
-webkit-transition: .25s ease-in-out !important;
-moz-transition: .25s ease-in-out !important;
-o-transition: .25s ease-in-out !important;
transition: .25s ease-in-out !important;
}
.animated-hamburger span {
background: #f3e5f5 !important;
}
.animated-hamburger span:nth-child(1) {
top: 0px !important;
-webkit-transform-origin: left center !important;
-moz-transform-origin: left center !important;
-o-transform-origin: left center !important;
transform-origin: left center !important;
}
.animated-hamburger span:nth-child(2) {
top: 10px !important;
-webkit-transform-origin: left center !important;
-moz-transform-origin: left center !important;
-o-transform-origin: left center !important;
transform-origin: left center !important;
}
.animated-hamburger span:nth-child(3) {
top: 20px !important;
-webkit-transform-origin: left center !important;
-moz-transform-origin: left center !important;
-o-transform-origin: left center !important;
transform-origin: left center !important;
}
.animated-hamburger.open span:nth-child(1) {
-webkit-transform: rotate(45deg) !important;
-moz-transform: rotate(45deg) !important;
-o-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
top: 0px !important;
left: 8px !important;
}
.animated-hamburger.open span:nth-child(2) {
width: 0% !important;
opacity: 0 !important;
}
.animated-hamburger.open span:nth-child(3) {
-webkit-transform: rotate(-45deg) !important;
-moz-transform: rotate(-45deg) !important;
-o-transform: rotate(-45deg) !important;
transform: rotate(-45deg) !important;
top: 21px !important;
left: 8px !important;
}
JavaScript code:
$(function () {
$('.navbar-toggler-button').on('click', function () {
$('.animated-hamburger').toggleClass('open');
});
});