-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
135 lines (124 loc) · 4.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width user-scalable=no" />
<meta name="robots" content="noindex, nofollow" />
<title>mburger, animated hamburgers!</title>
<link
type="text/css"
rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Pacifico"
/>
<link type="text/css" rel="stylesheet" href="demo.css" />
<script src="./dist/mburger/index.js" type="module"></script>
</head>
<body>
<div id="page">
<h1>mburger</h1>
<p>
A webcomponent for animated hamburgers. All set up to work out
of the box with the mmenu.js and mmenu-light plugins. Click a
hamburger to see the animation. More info
<a href="https://www.mmenujs.com/mburger" target="_blank"
>here</a
>.
</p>
<p>
Note: If you want to run these examples locally, you need to run
them through a local web server. Otherwise the
<code><script type="module"></code> will be
blocked by CORS policy.
</p>
<br />
<p>Choose an animation for the examples:</p>
<select id="ease">
<option value="ease">Ease (default)</option>
<option value="elastic">Elastic</option>
<option value="funky">Funky</option>
<option value="shaky">Shaky</option>
</select>
<div class="xmpls">
<div class="xmpl">
<mm-burger
fx="collapse"
title="Toggle state"
role="button"
tabindex="0"
></mm-burger>
<span>collapse</span>
</div>
<div class="xmpl">
<mm-burger
fx="spin"
title="Toggle state"
role="button"
tabindex="0"
></mm-burger>
<span>spin</span>
</div>
<div class="xmpl">
<mm-burger
fx="squeeze"
title="Toggle state"
role="button"
tabindex="0"
></mm-burger>
<span>squeeze</span>
</div>
<div class="xmpl">
<mm-burger
fx="tornado"
title="Toggle state"
role="button"
tabindex="0"
></mm-burger>
<span>tornado</span>
</div>
</div>
<pre>
<html>
<head>
<script type="module" src="dist/mburger.js"></script>
</heady>
<body>
<mm-burger fx="spin"></mm-burger>
</body>
</html>
</pre
>
<p>
For more examples and the full documentation, please visit:
<a href="https://www.mmenujs.com/mburger" target="_blank"
>mmenujs.com/mburger</a
>
</p>
</div>
<script>
const toggle = (event) => {
const burger = event.target
?.closest(".xmpl")
?.querySelector("mm-burger");
if (burger) {
burger.state = burger.state === "cross" ? "bars" : "cross";
}
};
document.addEventListener("click", toggle);
document.addEventListener("keyup", (event) => {
if (event.key === "Enter") {
toggle(event);
}
});
</script>
<script>
const burgers = document.querySelectorAll("mm-burger");
const select = document.querySelector("#ease");
select.addEventListener("change", () => {
burgers.forEach((burger) => {
burger.setAttribute("ease", select.value);
});
});
</script>
</body>
</html>