xxxxxxxxxx1
<head>2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>3
</head>4
<div class="collapse" id="navbarToggleExternalContent">5
<div class="bg-dark p-4">6
<h5 class="text-white h4">Collapsed content</h5>7
<span class="text-muted">Toggleable via the navbar brand.</span>8
</div>9
</div>10
<nav class="navbar navbar-dark bg-dark">11
<div class="container-fluid">12
<div class="hamburger">13
<svg data-mdb-toggle="collapse"14
data-mdb-target="#navbarToggleExternalContent" id="icon" viewBox="0 0 800 600">15
<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top"></path>16
<path d="M300,320 L540,320" id="middle"></path>17
<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path>18
</svg>19
</div>20
</div>21
</nav>xxxxxxxxxx1
#icon {2
width: 75px;3
height: 75px;4
cursor: pointer;5
transform: translate3d(0, 0, 0);6
}7
path {8
fill: none;9
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);10
stroke-width: 40px;11
stroke-linecap: round;12
stroke: #a06ba5;13
stroke-dashoffset: 0px;14
}15
path#top,16
path#bottom {17
stroke-dasharray: 240px 950px;18
}19
path#middle {20
stroke-dasharray: 240px 240px;21
}22
.cross path#top,23
.cross path#bottom {24
stroke-dashoffset: -650px;25
stroke-dashoffset: -650px;26
}27
.cross path#middle {28
stroke-dashoffset: -115px;29
stroke-dasharray: 1px 220px;30
}xxxxxxxxxx1
var el = document.querySelector('.hamburger');2
3
el.onclick = function() {4
el.classList.toggle('cross');5
} Console errors: 0