Skip to content

Commit 9723d2c

Browse files
author
Fred Heusschen
committed
version 2.0.0
compatible with mmenu.js version 9
1 parent e0a467a commit 9723d2c

10 files changed

+10847
-309
lines changed

‎dist/mburger.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+154-134
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,71 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="author" content="www.frebsite.nl" />
6-
<meta name="viewport" content="width=device-width user-scalable=no" />
7-
<meta name="robots" content="noindex, nofollow" />
8-
9-
<title>mburger, CSS animated hamburgers!</title>
10-
11-
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
12-
<link type="text/css" rel="stylesheet" href="bin/demo.css" />
13-
<link type="text/css" rel="stylesheet" href="dist/mburger.css" />
14-
15-
<script type="module" src="dist/mburger.js"></script>
16-
</head>
17-
<body>
18-
<div id="page">
19-
20-
<h1>mburger</h1>
21-
<p>A small collection of CSS animated hamburgers.
22-
All set up to work out of the box with the mmenu.js plugin.
23-
Click a hamburger to see the animation.
24-
More info <a href="https://www.mmenujs.com/mburger" target="_blank">here</a>.</p>
25-
26-
<div class="xmpls">
27-
28-
<div class="xmpl">
29-
<button class="mburger mburger--collapse">
30-
<b></b>
31-
<b></b>
32-
<b></b>
33-
</button>
34-
<span>collapse</span>
35-
</div>
36-
<div class="xmpl">
37-
<button class="mburger mburger--spin">
38-
<b></b>
39-
<b></b>
40-
<b></b>
41-
</button>
42-
<span>spin</span>
43-
</div>
44-
<div class="xmpl">
45-
<button class="mburger mburger--squeeze">
46-
<b></b>
47-
<b></b>
48-
<b></b>
49-
</button>
50-
<span>squeeze</span>
51-
</div>
52-
<div class="xmpl">
53-
<button class="mburger mburger--tornado">
54-
<b></b>
55-
<b></b>
56-
<b></b>
57-
</button>
58-
<span>tornado</span>
59-
</div>
60-
61-
</div>
62-
63-
<pre>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="author" content="www.frebsite.nl" />
6+
<meta name="viewport" content="width=device-width user-scalable=no" />
7+
<meta name="robots" content="noindex, nofollow" />
8+
9+
<title>mburger, CSS animated hamburgers!</title>
10+
11+
<link
12+
type="text/css"
13+
rel="stylesheet"
14+
href="http://fonts.googleapis.com/css?family=Pacifico"
15+
/>
16+
<link type="text/css" rel="stylesheet" href="bin/demo.css" />
17+
<link type="text/css" rel="stylesheet" href="dist/mburger.css" />
18+
19+
<script type="module" src="dist/mburger.js"></script>
20+
</head>
21+
<body>
22+
<div id="page">
23+
<h1>mburger</h1>
24+
<p>
25+
A small collection of CSS animated hamburgers. All set up to
26+
work out of the box with the mmenu.js plugin. Click a hamburger
27+
to see the animation. More info
28+
<a href="https://www.mmenujs.com/mburger" target="_blank"
29+
>here</a
30+
>.
31+
</p>
32+
33+
<div class="xmpls">
34+
<div class="xmpl">
35+
<button class="mburger mburger--collapse">
36+
<b></b>
37+
<b></b>
38+
<b></b>
39+
</button>
40+
<span>collapse</span>
41+
</div>
42+
<div class="xmpl">
43+
<button class="mburger mburger--spin">
44+
<b></b>
45+
<b></b>
46+
<b></b>
47+
</button>
48+
<span>spin</span>
49+
</div>
50+
<div class="xmpl">
51+
<button class="mburger mburger--squeeze">
52+
<b></b>
53+
<b></b>
54+
<b></b>
55+
</button>
56+
<span>squeeze</span>
57+
</div>
58+
<div class="xmpl">
59+
<button class="mburger mburger--tornado">
60+
<b></b>
61+
<b></b>
62+
<b></b>
63+
</button>
64+
<span>tornado</span>
65+
</div>
66+
</div>
67+
68+
<pre>
6469
&lt;html&gt;
6570
&lt;head&gt;
6671
&lt;style type="text/css" rel="stylesheet" href="dist/mburger.css"&gt;
@@ -73,56 +78,71 @@ <h1>mburger</h1>
7378
&lt;/button&gt;
7479
&lt;/body&gt;
7580
&lt;/html&gt;
76-
</pre>
77-
78-
<h3>Customize the hamburger</h3>
79-
<p>By default, the hamburger adopts to its environment pretty good,
80-
the bars scale to fit and inherit their <code>color</code> for the parent element.</p>
81-
<p>The hamburger is pretty easy to customize too,
82-
just override some of the CSS values and variables.</p>
83-
84-
<div class="xmpls">
85-
<div class="xmpl">
86-
<button class="reset custom-button-1">
87-
<span class="mburger mburger--spin">
88-
<b></b>
89-
<b></b>
90-
<b></b>
91-
<span>Menu</span>
92-
</span>
93-
</button>
94-
</div>
95-
96-
<div class="xmpl">
97-
<button class="custom-button-2 mburger mburger--spin">
98-
<b></b>
99-
<b></b>
100-
<b></b>
101-
</button>
102-
</div>
103-
104-
</div>
105-
106-
<p>For more examples and the full documentation, please visit: <a href="https://www.mmenujs.com/mburger" target="_blank">mmenujs.com/mburger</a>.</p>
107-
108-
<br />
109-
110-
<h3>Native webcomponent</h3>
111-
<p>Note that -at the time of writing (early 2019)- the native webcomponent is only (fully) supported in Chrome.</p>
112-
113-
<div class="xmpls">
114-
<div class="xmpl">
115-
<m-burger fx="collapse"></m-burger>
116-
<span>collapse</span>
117-
</div>
118-
119-
<div class="xmpl">
120-
<m-burger fx="spin"></m-burger>
121-
<span>spin</span>
122-
</div>
123-
</div>
124-
125-
<pre>
81+
</pre
82+
>
83+
84+
<h3>Customize the hamburger</h3>
85+
<p>
86+
By default, the hamburger adopts to its environment pretty good,
87+
the bars scale to fit and inherit their <code>color</code> for
88+
the parent element.
89+
</p>
90+
<p>
91+
The hamburger is pretty easy to customize too, just override
92+
some of the CSS values and variables.
93+
</p>
94+
95+
<div class="xmpls">
96+
<div class="xmpl">
97+
<button class="reset custom-button-1">
98+
<span class="mburger mburger--spin">
99+
<b></b>
100+
<b></b>
101+
<b></b>
102+
<span>Menu</span>
103+
</span>
104+
</button>
105+
</div>
106+
107+
<div class="xmpl">
108+
<button class="custom-button-2 mburger mburger--spin">
109+
<b></b>
110+
<b></b>
111+
<b></b>
112+
</button>
113+
</div>
114+
</div>
115+
116+
<p>
117+
For more examples and the full documentation, please visit:
118+
<a href="https://www.mmenujs.com/mburger" target="_blank"
119+
>mmenujs.com/mburger</a
120+
>.
121+
</p>
122+
123+
<br />
124+
125+
<h3>Native webcomponent</h3>
126+
<p>
127+
Note: If you want to run these examples locally, you need to run
128+
them through a local web server. Otherwise the
129+
<code>&lt;script type=&quot;module&quot;&gt;</code> will be
130+
blocked by CORS policy.
131+
</p>
132+
133+
<div class="xmpls">
134+
<div class="xmpl">
135+
<m-burger fx="collapse"></m-burger>
136+
<span>collapse</span>
137+
</div>
138+
139+
<div class="xmpl">
140+
<m-burger fx="spin"></m-burger>
141+
<span>spin</span>
142+
</div>
143+
</div>
144+
145+
<pre>
126146
&lt;html&gt;
127147
&lt;head&gt;
128148
&lt;script type="module" src="dist/mburger.js"&gt;&lt;/script&gt;
@@ -131,27 +151,27 @@ <h3>Native webcomponent</h3>
131151
&lt;m-burger fx="spin" menu="my-menu"&gt;&lt;/m-burger&gt;
132152
&lt;/body&gt;
133153
&lt;/html&gt;
134-
</pre>
135-
136-
</div>
137-
138-
<script>
139-
document.addEventListener('click', ( evnt ) => {
140-
var target = evnt.target;
141-
let xmpl = target.closest('.xmpl');
142-
if ( xmpl ) {
143-
let webcomponent = xmpl.querySelector( 'm-burger' );
144-
if ( webcomponent ) {
145-
if ( webcomponent.getAttribute( 'state' ) ) {
146-
webcomponent.removeAttribute( 'state' );
147-
} else {
148-
webcomponent.setAttribute( 'state', 'cross' );
149-
}
150-
} else {
151-
xmpl.classList.toggle( 'mm-wrapper_opened' );
152-
}
153-
}
154-
});
155-
</script>
156-
</body>
154+
</pre
155+
>
156+
</div>
157+
158+
<script>
159+
document.addEventListener("click", (evnt) => {
160+
var target = evnt.target;
161+
let xmpl = target.closest(".xmpl");
162+
if (xmpl) {
163+
let webcomponent = xmpl.querySelector("m-burger");
164+
if (webcomponent) {
165+
if (webcomponent.getAttribute("state")) {
166+
webcomponent.removeAttribute("state");
167+
} else {
168+
webcomponent.setAttribute("state", "cross");
169+
}
170+
} else {
171+
xmpl.classList.toggle("mm-wrapper--opened");
172+
}
173+
}
174+
});
175+
</script>
176+
</body>
157177
</html>

0 commit comments

Comments
 (0)