1，
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>扇形菜单 </title>
<style>
* {
margin: 0px;
padding: 0px;
user-select: none;
}
body {
position: relative;
margin: 0px;
padding: 0px;
font-size: 14px;
color: #000;
background-repeat: no-repeat;
background-position: center center;
background-color: #F7F8F8;
background-size: 100% 100%;
}
.menuWindow ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
}
.menuWindow ul li {
border-radius: 0 0 300px 0;
width: 0;
height: 0;
}
.menuWindow ul li a {
color: #000;
text-decoration: none;
text-align: center;
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.4);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
.menuWindow ul.p1 li {
position: absolute;
left: 0;
top: 0;
}
.menuWindow ul.p2 {
z-index: -1;
}
.menuWindow li.s2>a {
position: absolute;
display: block;
width: 200px;
padding-left: 200px;
height: 400px;
background: #0b2433;
border-radius: 0 0 400px 0;
font-size: 16px;
color: #306c92;
border-right: 1px solid #009be2;
}
.menuWindow li.s2 span {
padding: 10px;
float: left;
}
.menuWindow li.s2 span:hover {
color: #9ae6ff;
text-shadow: 0 0 24px rgba(107, 194, 255, .64);
}
.menuWindow li.s1 ul.p2 {
-webkit-transform: rotate(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menuWindow {
position: absolute;
left: 200px;
top: 50px;
z-index: 100;
}
.menuWindow {
width: 610px;
height: 900px;
overflow: hidden;
-webkit-transition: 0s 0s;
-moz-transition: 0s 0s;
-ms-transition: 0s 0s;
-o-transition: 0s 0s;
transition: 0s 0s;
}
</style>
</head>
<body>
<div class="menuWindow">
<ul class="p1" style="top: 400px;">
<li class="s1">
<ul id="p2" class="p2">
</ul>
</li>
</ul>
</div>
<script>
var menu = [{
title: '互联网网站资源管理',
},
{
title: '移动互联网应用管理',
},
{
title: '微信公众号监测',
},
{
title: '信息安全风险监测',
},
{
title: '协同联动',
},
{
title: '综合管理',
},
{
title: '智慧党建',
},
{
title: '信息发布',
},
{
title: '共享知识库',
},
{
title: '共享知识库',
}
]
renderMenu(menu);
function renderMenu(menu) {
var lis = '';
const deg = 180;
var p2 = document.getElementById('p2');
for (var i = 0; i < menu.length; i++) {
var sublis = '';
var rotateDeg = deg / menu.length;
lis += '<li class="s2">' +
'<a style="transform: rotate(' + (rotateDeg * i - 90) + 'deg);" ><span onclick="spanClick(this)">' + menu[i].title + ' </span></a>' +
'</li>';
};
p2.innerHTML = lis;
};
function spanClick(e){
console.log(e.textContent);
};
</script>
</body>
</html>
标签：0s,菜单,H50085,title,menu,transform,li,html,menuWindow From： https://www.cnblogs.com/eliteboy/p/16724188.html