GravityMenu.js is a Javascript library.
Added gravity menu icon to web pages.
Simple and Easy to use.
Pure JavaScript Library.
Using Matter.js. https://github.com/liabru/matter-js
The source code is licensed MIT.
https://labs.manohara.info/gravitymenu/
https://labs.manohara.info/gravitymenu/
Square is recommended for icon images.
<body>
<section id="top"></section>
<section id="contact"></section>
<canvas></canvas>
</body>
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js'></script>
<script defer src='gravitymenu_min.js'></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
garavityMenu({
menu_list:[
['top','#top','image.jpg'],
['contact','#contact','image.jpg'],
],
});
});
</script>
canvas {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
}
<script>
window.addEventListener('DOMContentLoaded', function() {
garavityMenu({
canvas:'canvas',
size:50,
gap:5,
menu_list:[
['top','#top','image.jpg'],
['contact','#contact','image.jpg'],
['social','','image.jpg'], // cond. label=='social' and social=='true'
],
menu_imageSize:500,
social:true,
social_size:40,
social_list:[
['facebook','https://www.facebook.com/sharer.php?u=[page-url]','image.jpg'],
['twitter','https://twitter.com/share?url=[page-url]','image.jpg'],
],
social_imageSize:500,
});
});
</script>
canvas: canvas element, String (default: 'canvas')
size: menu-circle diameter size, Numeric (default(px): 50)
gap: circle gap size, Numeric (default(px): 0)
menu_list: menu-circle's label,link,image-path, Array
menu_imageSize: menu-square-image original width(and height), Numeric (default(px): 500)
social: Social active flag, Boolean (default: false)
social_size: social-icon diameter size, Numeric (default(px): 40)
social_list: social-circle's label,link,image-path, Array
social_imageSize: social-square-image original width(and height), Numeric (default(px): 500)