圆角菜单 CSS 和 jQuery答案

【问题标题】：Corner Circle Menu CSS and jQuery圆角菜单 CSS 和 jQuery
【发布时间】：2016-11-20 05:11:49
【问题描述】：

我正在尝试创建一个圆角菜单，如下图所示：

这是我尝试并取得的成果：

$(".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？

【问题讨论】：

搜索“CSS pie slice”并学习如何做到这一点，然后使用整个圆圈并将它们覆盖在左上角 -> jsfiddle.net/d7vvntmk
是的，这与我正在搜索的内容相似。谢谢你:)

标签： javascript jquery html css menu

【解决方案1】：

创建菜单项的关键是将它们放在一个圆形 div 中，并将圆形 div 设置为溢出隐藏，旋转它们并倾斜它们。查看本教程：http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

【讨论】：