circular-menu
Version:
cool,highly interactive circular menu
371 lines (358 loc) • 14.5 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>circular-menu</title>
<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="../dist/css/circular-menu.css">
<style>
.cn-menu1 {
position: absolute;
left: 20%;
top: 50%;
}
.cn-menu2 {
position: absolute;
left: 40%;
top: 50%;
}
.cn-menu3 {
position: absolute;
left: 60%;
top: 50%;
}
.cn-menu4 {
position: absolute;
left: 80%;
top: 50%;
}
.rect-icon {
background: #fff;
display: inline-block ;
}
.circle-icon {
background: #f94321;
display: inline-block ;
border-radius: 50%;
}
.my-icon{
background: url("./images/circular-menu.png");
}
.icon1 {
background-position: 0 0;
}
.icon2 {
background-position: 0 -56px;
}
.icon3 {
background-position: 0 -116px;
}
html,
body {
height: 100%;
}
body {
background: #52be7f;
color: #fff;
}
</style>
</head>
<body>
<div id="circle-menu1" class="cn-menu1"></div>
<div id="circle-menu2" class="cn-menu2"></div>
<div id="circle-menu3" class="cn-menu3"></div>
<div id="circle-menu4" class="cn-menu4"></div>
</body>
</html>
<script src="../dist/js/circular-menu.js"></script>
<script>
var ele = document.querySelector('#circle-menu1');
var cmenu = CMenu(ele)
.config({
totalAngle: 360,//deg,
spaceDeg: 1,//deg
background: "#323232",
backgroundHover: "#123321",
//pageBackground: "#52be7f",
percent: 0.32,//%
diameter: 300,//px
position: 'top',
horizontal: true,
//start: -45,//deg
animation: "into",
menus: [
{
title: 'menu1',
icon: 'fa fa-circle',
href: {
url: "http://github.com",
blank: false
},
click: function (e, data) {
console.log(123);
},
menus: [
{
title: 'menu1-1',
icon: 'fa fa-circle',
menus: [
{
title: 'menu1-1',
icon: 'fa fa-circle',
menus: [
{
title: 'menu1-1',
icon: 'fa fa-circle'
},
{
title: 'menu1-2',
icon: 'fa fa-cc-visa'
}
]
},
{
title: 'menu1-2',
icon: 'fa fa-cc-visa'
}
]
},
{
title: 'menu1-2',
icon: 'fa fa-cc-visa'
}
]
},
{
disabled: true,
title: '菜单2',
icon: 'my-icon icon1',
href: '#2'
},
{
title: 'menu3',
disabled: function(){
return true;
},
icon: '',
href: '#3'
},
{
title: '菜单4',
icon: 'my-icon icon2',
href: '#4',
menus: [
{
title: 'menu4-1',
icon: 'fa fa-circle'
},
{
title: 'menu4-2',
icon: 'fa fa-cc-visa'
},
{
title: 'menu4-3',
icon: 'fa fa-cc-visa'
},
{
title: 'menu4-1',
icon: 'fa fa-circle'
},
{
title: 'menu4-2',
icon: 'fa fa-cc-visa'
},
{
title: 'menu4-3',
icon: 'fa fa-cc-visa'
}
]
}, {
title: 'menu5',
icon: '',
href: '#5',
menus: [
{
title: 'menu1-1',
icon: 'fa fa-circle'
},
{
title: 'menu1-2',
icon: 'fa fa-cc-visa'
}
]
},
{
title: '菜单6',
icon: '',
href: '#6',
menus: [
{
title: 'menu6-1',
icon: 'fa fa-circle'
}
]
},
{
title: 'menu7',
icon: 'my-icon icon3',
href: '#7'
},
{
title: '菜单8',
icon: '',
href: '#8'
}
]
});
setTimeout(function () {
cmenu
.styles({
//top: '200px',
//left: '600px'
})
.show();
}, 1000);
var cmenu2 = CMenu("#circle-menu2")
.config({
totalAngle: 360,//deg,
spaceDeg: 0,//deg
background: "#323232",
pageBackground: "#52be7f",
percent: 0.32,//%
diameter: 300,//px
position: 'top',
horizontal: true,
//start: -45,//deg
animation: "into",
menus: [
{
title: 'menu1',
icon: 'rect-icon',
href: '#1'
},
{
title: '菜单2',
icon: 'circle-icon',
href: '#2'
},
{
title: 'menu3',
icon: 'fa fa-cc-visa',
href: '#3'
},
{
title: '菜单4',
icon: ['fa fa-gg-circle', '#11efab'],
href: '#4'
}, {
title: 'menu5',
icon: ['fa fa-bicycle', '#f2d1a3'],
href: '#5'
},
{
title: '菜单6',
icon: 'fa fa-comment',
href: '#6'
},
{
title: 'menu7',
icon: 'fa fa-tree',
href: '#7'
},
{
title: '菜单8',
icon: 'fa fa-google-wallet',
href: '#8'
}
]
});
var cmenu3 = CMenu("#circle-menu3")
.config({
totalAngle: 180,//deg,
spaceDeg: 0,//deg
background: "#323232",
pageBackground: "#52be7f",
percent: 0.32,//%
diameter: 300,//px
position: 'top',
horizontal: true,
//start: -45,//deg
animation: "into",
menus: [
{
title: 'menu1',
icon: 'rect-icon',
href: '#123'
},
{
title: '菜单2',
icon: 'circle-icon',
href: ''
},
{
title: 'menu3',
icon: 'fa fa-cc-visa',
href: ''
},
{
title: '菜单4',
icon: ['fa fa-gg-circle', '#11efab'],
href: ''
}
]
}).show();
var cmenu4 = CMenu("#circle-menu4")
.config({
totalAngle: 180,//deg,
spaceDeg: 0,//deg
background: "#323232",
pageBackground: "#52be7f",
percent: 0.32,//%
diameter: 300,//px
position: 'top',
horizontal: true,
//start: -45,//deg
animation: "into",
menus: [
{
title: 'menu1',
icon: '',
href: '#123'
},
{
title: '菜单2',
icon: '',
href: ''
},
{
title: 'menu3',
icon: '',
href: ''
},
{
title: '菜单4',
icon: '',
href: ''
}, {
title: 'menu5',
icon: '',
href: ''
},
{
title: '菜单6',
icon: '',
href: ''
},
{
title: 'menu7',
icon: '',
href: ''
},
{
title: '菜单8',
icon: '',
href: ''
}
]
}).show();
</script>