158 lines
3.9 KiB
HTML
158 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="author" content="www.frebsite.nl" />
|
|
<meta content="width=600px user-scalable=yes" name="viewport" />
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
|
|
<title>mburger, CSS animated hamburgers!</title>
|
|
|
|
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
|
|
<link type="text/css" rel="stylesheet" href="bin/demo.css" />
|
|
<link type="text/css" rel="stylesheet" href="dist/mburger.css" />
|
|
|
|
<script type="module" src="dist/mburger.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="page">
|
|
|
|
<h1>mburger</h1>
|
|
<p>A small collection of CSS animated hamburgers.
|
|
All set up to work out of the box with the mmenu.js plugin.
|
|
Click a hamburger to see the animation.
|
|
More info <a href="https://www.mmenujs.com/mburger" target="_blank">here</a>.</p>
|
|
|
|
<div class="xmpls">
|
|
|
|
<div class="xmpl">
|
|
<button class="mburger mburger--collapse">
|
|
<b></b>
|
|
<b></b>
|
|
<b></b>
|
|
</button>
|
|
<span>collapse</span>
|
|
</div>
|
|
<div class="xmpl">
|
|
<button class="mburger mburger--spin">
|
|
<b></b>
|
|
<b></b>
|
|
<b></b>
|
|
</button>
|
|
<span>spin</span>
|
|
</div>
|
|
<div class="xmpl">
|
|
<button class="mburger mburger--squeeze">
|
|
<b></b>
|
|
<b></b>
|
|
<b></b>
|
|
</button>
|
|
<span>squeeze</span>
|
|
</div>
|
|
<div class="xmpl">
|
|
<button class="mburger mburger--tornado">
|
|
<b></b>
|
|
<b></b>
|
|
<b></b>
|
|
</button>
|
|
<span>tornado</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<pre>
|
|
<html>
|
|
<head>
|
|
<style type="text/css" rel="stylesheet" href="dist/mburger.css">
|
|
</heady>
|
|
<body>
|
|
<button class="mburger mburger--spin" href="#my-menu">
|
|
<b</b>
|
|
<b</b>
|
|
<b</b>
|
|
</button>
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
|
|
<h3>Customize the hamburger</h3>
|
|
<p>By default, the hamburger adopts to its environment pretty good,
|
|
the bars scale to fit and inherit their <code>color</code> for the parent element.</p>
|
|
<p>The hamburger is pretty easy to customize too,
|
|
just override some of the CSS values and variables.</p>
|
|
|
|
<div class="xmpls">
|
|
<div class="xmpl">
|
|
<button class="reset custom-button-1">
|
|
<span class="mburger mburger--spin">
|
|
<b></b>
|
|
<b></b>
|
|
<b></b>
|
|
<span>Menu</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="xmpl">
|
|
<button class="custom-button-2 mburger mburger--spin">
|
|
<b></b>
|
|
<b></b>
|
|
<b></b>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>For more examples and the full documentation, please visit: <a href="https://www.mmenujs.com/mburger" target="_blank">mmenujs.com/mburger</a>.</p>
|
|
|
|
<br />
|
|
|
|
<h3>Native webcomponent</h3>
|
|
<p>Note that -at the time of writing (early 2019)- the native webcomponent is only (fully) supported in Chrome.</p>
|
|
|
|
<div class="xmpls">
|
|
<div class="xmpl">
|
|
<m-burger fx="collapse"></m-burger>
|
|
<span>collapse</span>
|
|
</div>
|
|
|
|
<div class="xmpl">
|
|
<m-burger fx="spin"></m-burger>
|
|
<span>spin</span>
|
|
</div>
|
|
</div>
|
|
|
|
<pre>
|
|
<html>
|
|
<head>
|
|
<script type="module" src="dist/mburger.js"></script>
|
|
</heady>
|
|
<body>
|
|
<m-burger fx="spin" menu="my-menu"></m-burger>
|
|
</body>
|
|
</html>
|
|
</pre>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('click', ( evnt ) => {
|
|
var target = evnt.target;
|
|
let xmpl = target.closest('.xmpl');
|
|
if ( xmpl ) {
|
|
let webcomponent = xmpl.querySelector( 'm-burger' );
|
|
if ( webcomponent ) {
|
|
if ( webcomponent.getAttribute( 'state' ) ) {
|
|
webcomponent.removeAttribute( 'state' );
|
|
} else {
|
|
webcomponent.setAttribute( 'state', 'cross' );
|
|
}
|
|
} else {
|
|
xmpl.classList.toggle( 'mm-wrapper_opened' );
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|