我正在尝试创建一个 Angular 圆菜单，如下图所示:
这是我尝试并取得的成果:
$(".menu").click(function(){
$(".menu-items").fadeToggle();
});html,body{
color:#000;
}
.menu{
position:fixed;
left:-100px;
top:-100px;
z-index:9999 !important;
width:200px;
height:200px;
border-radius:50%;
background-color:#3F51B5;
}
.menu .menu-btn{
position:absolute;
bottom:50px;
right:50px;
}
.menu-items{
position:fixed;
top:-100;
left:-100;
z-index:9990 !important;
width:250px;
height:250px;
background:#2979FF;
border-radius:50%;
}<html>
<head>
<title>Corner Circle Menu</title>
</head>
<body>
<div class="menu">
<div class="menu-btn">Menu</div>
</div>
<div class="menu-items">
<div class="menu-item">Item 1</div>
<div class="menu-item">Item 2</div>
<div class="menu-item">Item 3</div>
</div>
</body>
</html>从 2 天开始，我一直在努力实现这一目标，但无法找到任何相关代码或想法或逻辑。谁能解释/指导我这个设计背后的数学和 CSS？
最佳答案
创建菜单项的关键是将它们放在一个圆形div中并将圆形div设置为溢出隐藏，旋转每个菜单项并倾斜它们。 查看本教程:http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
关于javascript - Angular 圆菜单 CSS 和 jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38422412/