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