Css 带有ReactJs的循环菜单

我在codepen上发现了这个惊人的圆形菜单。链接：

我想把它应用到我的生活中。我对react完全是个初学者。当我试图复制代码以首先试用时，没有出现循环菜单。只是一堆导航列表项。另外，对于我的小型项目，我不需要按下按钮使菜单像链接中那样显示。我希望整个菜单和中间的按钮总是在那里。所以我不使用JS，他们必须使它关闭和打开

我复制了下面的html代码，并按原样使用CSS：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
}
渲染（）{
返回(
你好
菜单















);
}
}
ReactDOM.render（，
document.getElementById（“根”）
这是那个沙箱项目的克隆。如果不想使用按钮切换菜单，只需将类名
opened nav
添加到
元素中即可。它应该始终保持打开状态，如果您选择将其作为默认打开状态，那么只需删除下面组件上的状态管理

您想做什么完全取决于您，但克隆如下：


函数MenuComponent（）{
常量[menuOpen，setMenuOpen]=React.useState（false）；
const wrapper=document.getElementById（“cn wrapper”）；
函数切换菜单（）
{
设置菜单打开（！菜单打开）；
}
React.useffect（（）=>
{
if（包装器）
{
如果（菜单打开）
wrapper.classList.add（“打开的导航”）；
其他的
wrapper.classList.remove（“打开的导航”）；
}
}，[menuOpen]）；
返回(
你好
菜单















);
}
ReactDOM.render（，
document.getElementById（“根”）
@导入url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
* { 
位置：相对位置；
-moz框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
列表样式：无；
}
html，
身体{
身高：100%；
}
身体{
背景：#52be7f；
颜色：#fff；
}
.组成部分{
位置：相对位置；
边缘底部：3em；
高度：15公分；
背景：rgba（0,0,0,0.05）；
字体系列：“Lato”，Arial，无衬线；
}
.组件>h2{
位置：绝对位置；
溢出：隐藏；
宽度：100%；
文本对齐：居中；
文本转换：大写；
空白：nowrap；
字体大小：300；
字体：斜体；
字号：12em；
不透明度：0.1；
游标：默认值；
}
.cn按钮{
位置：绝对位置；
最高：100%；
左：50%；
z指数：11；
边缘顶部：-2.25em；
左边距：-2.25em；
填充顶部：0；
宽度：4.5em；
高度：4.5em；
边界：无；
边界半径：50%；
背景：无；
背景色：#fff；
颜色：#52be7f；
文本对齐：居中；
字号：700；
字号：1.5em；
文本转换：大写；
光标：指针；
-webkit背面可见性：隐藏；
}
.cstransforms.cn{
位置：绝对位置；
最高：100%；
左：50%；
z指数：10；
边缘顶部：-13em；
左边距：-13.5em；
宽度：27em；
高度：27em；
边界半径：50%；
背景：透明；
不透明度：0；
-webkit过渡：全部.3s轻松0.3s；
-moz转换：所有.3s轻松0.3s；
过渡：全部.3s缓解0.3s；
-webkit变换：比例（0.1）；
-ms变换：比例（0.1）；
-moz变换：比例（0.1）；
变换：比例（0.1）；
指针事件：无；
溢出：隐藏；
}
/*盖上盖子，防止锚的额外空间被点击*/
.cstransforms.cn包装器：之后{
内容：“.”；
显示：块；
字号：2em；
宽度：6.2米；
身高：6.2米；
位置：绝对位置；
左：50%；
左边距：-3.1米；
最高：50%；
边缘顶部：-3.1米；
边界半径：50%；
z指数：10；
颜色：透明；
}
.cstransforms.opened导航{
边界半径：50%；
不透明度：1；
-webkit过渡：所有.3s轻松；
-moz过渡：全部.3s轻松；
过渡：全部。3秒轻松；
-webkit转换：规模（1）；
-moz变换：比例（1）；
-ms变换：尺度（1）；
变换：比例（1）；
指针事件：自动；
}
.cstransforms.cn{
位置：绝对位置；
最高：50%；
左：50%；
溢出：隐藏；
保证金顶部：-1.3em；
左边距：-10em；
宽度：10em；
高度：10公分；
字号：1.5em；
-webkit过渡：所有.3s轻松；
-moz过渡：全部.3s轻松；
过渡：全部。3秒轻松；
-webkit变换：旋转（75度）倾斜（62度）；
-moz变换：旋转（75度）倾斜（62度）；
-ms变换：旋转（75度）倾斜（62度）；
变换：旋转（75度）倾斜（62度）；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
变换原点：100%100%；
指针事件：无；
}
.cstransforms.cn{
位置：绝对位置；
右：-7.25em；
底部：-7.25em；
显示：块；
宽度：14.5em；
身高：14.5公分；
边界半径：50%；
背景#429a67；
背景：-webkit径向梯度（透明35%，#429a67 35%）；
背景：-莫兹径向梯度（透明）