xxxxxxxxxx
1
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
2
<!-- Container wrapper -->
3
<div class="container-fluid">
4
<!-- Toggle button -->
5
<div class="hamburger ms-auto">
6
<svg data-mdb-toggle="collapse"
7
data-mdb-target="#navbarToggleExternalContent" id="icon" viewBox="0 0 800 600">
8
<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>
9
<path d="M300,320 L540,320" id="middle"></path>
10
<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>
11
</svg>
12
</div>
13
<!-- Collapsible wrapper -->
14
<div
15
class="collapse navbar-collapse justify-content-center"
16
id="navbarToggleExternalContent"
17
>
18
<!-- Left links -->
19
<ul class="navbar-nav mb-2 mb-lg-0">
20
<li class="nav-item">
21
<a class="nav-link active" aria-current="page" href="#">Home</a>
22
</li>
23
<li class="nav-item">
24
<a class="nav-link" href="#">Link</a>
25
</li>
26
<!-- Navbar dropdown -->
27
<li class="nav-item dropdown">
28
<a
29
class="nav-link dropdown-toggle"
30
href="#"
31
id="navbarDropdown"
32
role="button"
33
data-mdb-toggle="dropdown"
34
aria-expanded="false"
35
>
36
Dropdown
37
</a>
38
<!-- Dropdown menu -->
39
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
40
<li>
41
<a class="dropdown-item" href="#">Action</a>
42
</li>
43
<li>
44
<a class="dropdown-item" href="#">Another action</a>
45
</li>
46
<li><hr class="dropdown-divider" /></li>
47
<li>
48
<a class="dropdown-item" href="#">Something else here</a>
49
</li>
50
</ul>
51
</li>
52
<li class="nav-item">
53
<a class="nav-link disabled"
54
>Disabled</a
55
>
56
</li>
57
</ul>
58
<!-- Left links -->
59
</div>
60
<!-- Collapsible wrapper -->
61
</div>
62
<!-- Container wrapper -->
63
</nav>
xxxxxxxxxx
1
.hamburger {
2
position: fixed;
3
z-index: 2;
4
top: -10px;
5
}
6
7
#icon {
8
width: 75px;
9
height: 75px;
10
cursor: pointer;
11
transform: translate3d(0, 0, 0);
12
}
13
path {
14
fill: none;
15
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);
16
stroke-width: 40px;
17
stroke-linecap: round;
18
stroke: #fff;
19
stroke-dashoffset: 0px;
20
}
21
path#top,
22
path#bottom {
23
stroke-dasharray: 240px 950px;
24
}
25
path#middle {
26
stroke-dasharray: 240px 240px;
27
}
28
.cross path#top,
29
.cross path#bottom {
30
stroke-dashoffset: -650px;
31
stroke-dashoffset: -650px;
32
}
33
.cross path#middle {
34
stroke-dashoffset: -115px;
35
stroke-dasharray: 1px 220px;
36
}
xxxxxxxxxx
1
var el = document.querySelector('.hamburger');
2
3
el.onclick = function() {
4
el.classList.toggle('cross');
5
}
Console errors: 0