xxxxxxxxxx
1
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
2
<!-- Container wrapper -->
3
<div class="container-fluid">
4
<!-- Toggle button -->
5
<div class="hamburger">
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="navbarCenteredExample"
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>
64
65
66
67
<div style="height: 10000px">
68
69
</div>
xxxxxxxxxx
1
#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
}
xxxxxxxxxx
1
var el = document.querySelector('.hamburger');
2
3
el.onclick = function() {
4
el.classList.toggle('cross');
5
}
Console errors: 0