-
Notifications
You must be signed in to change notification settings - Fork 0
/
径向菜单.html
106 lines (101 loc) · 2.44 KB
/
径向菜单.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>径向菜单</title>
<style>
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
.wrap{
position:relative;
margin:100px auto;
width:400px;
height:400px;
border:2px solid #ccc;
-webkit-border-radius:50%;
}
#wrap-main{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:65px;
height:40px;
outline:none;
border-radius:5px;
box-shadow:1px 5px 2px #ccc;
font-size:20px;
cursor:pointer;
background-color: #D6B4DC;
}
#menu{
position:relative;
width:100%;
height:100%;
opacity:0;
transform:scale(0);
transition:all 1s ease-out;
}
#menu.active{
opacity:1;
transform:scale(1);
}
#menu>a{
position:absolute;
width:40px;
height:40px;
border:1px solid #000;
border-radius:3px;
text-align:center;
line-height:40px;
color:#666;
font-size:18px;
transform:translate(-50%,-50%);
background-color: orange;
}
</style>
</head>
<body>
<div class="wrap">
<nav id="menu">
<a class="menu-item" href="">一</a>
<a class="menu-item" href="">二</a>
<a class="menu-item" href="">三</a>
<a class="menu-item" href="">四</a>
<a class="menu-item" href="">五</a>
<a class="menu-item" href="">六</a>
</nav>
<button id="wrap-main" type="button">点我</button>
</div>
<script>
var navWrap = document.getElementById('menu'), //菜单容器
navlist = document.getElementsByClassName('menu-item'), //菜单列表
btnMain = document.getElementById('wrap-main'), //按钮
radius = navWrap.offsetWidth / 2, //圆的半径
rdeg = Math.PI / 180, //圆弧度
gap = 360 / navlist.length ; //每个菜单之间的弧度角
//菜单展示
function showMenu(){
var myAngle,
classname;
if(navWrap.className.indexOf('active') < 0){
for(var i = 0;i < navlist.length;i++){
myAngle = i * gap * rdeg; //角度
navlist[i].style.top = radius + radius * Math.sin(myAngle) + 'px';
navlist[i].style.left = radius + radius * Math.cos(myAngle) + 'px';
}
}
classname = navWrap.className;
navWrap.className = classname.indexOf('active') < 0 ? classname += ' active' : classname.replace(/active/g,'');
}
window.onload = function(){
btnMain.onclick = showMenu;
};
</script>
</body>
</html>