我在codepen上发现了这个令人惊叹的循环菜单。链接：https://codepen.io/juslwk/pen/xgbDB.
我想把它用于reactjs。我是一个完全的反应初学者。当我试图复制代码以先试用时，没有出现循环菜单。只是一堆导航列表项目。此外，对于我的小项目，我不需要像在链接中那样按下按钮来显示菜单。我希望整个菜单中间的按钮总是在那里。所以我没有使用JS，他们必须让它关闭和打开。
我复制了下面的html代码，我使用的CSS如下：
class App extends React.Component {
constructor (props){
super(props)
}
render (){
return (
<div class="container">
<div class="component">
<h2>Hi</h2>
<button class="cn-button" id="cn-button">Menu</button>
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li><a href="#"><span>Furniture</span></a></li>
<li><a href="#"><span>Transport</span></a></li>
<li><a href="#"><span>Gift</span></a></li>
<li><a href="#"><span>Clothes</span></a></li>
<li><a href="#"><span>Games</span></a></li>
<li><a href="#"><span>Stationary</span></a></li>
<li><a href="#"><span>Toys</span></a></li>
<li><a href="#"><span>Books</span></a></li>
<li><a href="#"><span>Login</span></a></li>
<li><a href="#"><span>Register</span></a></li>
<li><a href="#"><span>Sell</span></a></li>
</ul>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />,
document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>谢谢你的帮助。
这是那个沙箱项目的克隆。如果您不想使用按钮切换菜单，那么您所需要做的就是将类名opened-nav添加到<div className="cn-wrapper opened-nav" id="cn-wrapper">元素中。它应该始终保持打开状态，如果您选择将其保留为默认打开状态，那么只需删除下面组件的状态管理即可。
这一切都取决于你想做什么，但克隆如下：
function MenuComponent() {
const[menuOpen, setMenuOpen] = React.useState(false);
const wrapper = document.getElementById("cn-wrapper");
function toggleMenu()
{
setMenuOpen(!menuOpen);
}
React.useEffect(()=>
{
if(wrapper)
{
if(menuOpen)
wrapper.classList.add("opened-nav");
else
wrapper.classList.remove("opened-nav");
}
},[menuOpen]);
return (
<div className="container csstransforms">
<div className="component">
<h2>Hi</h2>
<button className="cn-button" onClick={toggleMenu} id="cn-button">Menu</button>
<div className="cn-wrapper" id="cn-wrapper">
<ul>
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li><a href="#"><span>Furniture</span></a></li>
<li><a href="#"><span>Transport</span></a></li>
<li><a href="#"><span>Gift</span></a></li>
<li><a href="#"><span>Clothes</span></a></li>
<li><a href="#"><span>Games</span></a></li>
<li><a href="#"><span>Stationary</span></a></li>
<li><a href="#"><span>Toys</span></a></li>
<li><a href="#"><span>Books</span></a></li>
<li><a href="#"><span>Login</span></a></li>
<li><a href="#"><span>Register</span></a></li>
<li><a href="#"><span>Sell</span></a></li>
</ul>
</div>
</div>
</div>
);
}
ReactDOM.render(<MenuComponent />,
document.getElementById("root"));@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
* {
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
body {
background: #52be7f;
color: #fff;
}
.component {
position: relative;
margin-bottom: 3em;
height: 15em;
background: rgba(0,0,0,0.05);
font-family: 'Lato', Arial, sans-serif;
}
.component > h2 {
position: absolute;
overflow: hidden;
width: 100%;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
font-weight: 300;
font-style: italic;
font-size: 12em;
opacity: 0.1;
cursor: default;
}
.cn-button {
position: absolute;
top: 100%;
left: 50%;
z-index: 11;
margin-top: -2.25em;
margin-left: -2.25em;
padding-top: 0;
width: 4.5em;
height: 4.5em;
border: none;
border-radius: 50%;
background: none;
background-color: #fff;
color: #52be7f;
text-align: center;
font-weight: 700;
font-size: 1.5em;
text-transform: uppercase;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
.csstransforms .cn-wrapper {
position: absolute;
top: 100%;
left: 50%;
z-index: 10;
margin-top: -13em;
margin-left: -13.5em;
width: 27em;
height: 27em;
border-radius: 50%;
background: transparent;
opacity: 0;
-webkit-transition: all .3s ease 0.3s;
-moz-transition: all .3s ease 0.3s;
transition: all .3s ease 0.3s;
-webkit-transform: scale(0.1);
-ms-transform: scale(0.1);
-moz-transform: scale(0.1);
transform: scale(0.1);
pointer-events: none;
overflow: hidden;
}
/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after{
content:".";
display:block;
font-size:2em;
width:6.2em;
height:6.2em;
position: absolute;
left: 50%;
margin-left: -3.1em;
top:50%;
margin-top: -3.1em;
border-radius: 50%;
z-index:10;
color: transparent;
}
.csstransforms .opened-nav {
border-radius: 50%;
opacity: 1;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
pointer-events: auto;
}
.csstransforms .cn-wrapper li {
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
margin-top: -1.3em;
margin-left: -10em;
width: 10em;
height: 10em;
font-size: 1.5em;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform: rotate(75deg) skew(62deg);
-moz-transform: rotate(75deg) skew(62deg);
-ms-transform: rotate(75deg) skew(62deg);
transform: rotate(75deg) skew(62deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
pointer-events: none;
}
.csstransforms .cn-wrapper li a {
position: absolute;
right: -7.25em;
bottom: -7.25em;
display: block;
width: 14.5em;
height: 14.5em;
border-radius: 50%;
background: #429a67;
background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
background: -moz-radial-gradient(transparent 35%, #429a67 35%);
background: radial-gradient(transparent 35%, #429a67 35%);
color: #fff;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 2;
-webkit-transform: skew(-62deg) rotate(-75deg) scale(1);
-moz-transform: skew(-62deg) rotate(-75deg) scale(1);
-ms-transform: skew(-62deg) rotate(-75deg) scale(1);
transform: skew(-62deg) rotate(-75deg) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: auto;
}
.csstransforms .cn-wrapper li a span {
position: relative;
top: 1em;
display: block;
font-size: .5em;
font-weight: 700;
text-transform: uppercase;
}
.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
background: radial-gradient(transparent 35%, #449e6a 35%);
}
.csstransforms .opened-nav li {
-webkit-transition: all .3s ease .3s;
-moz-transition: all .3s ease .3s;
transition: all .3s ease .3s;
}
.csstransforms .opened-nav li:first-child {
-webkit-transform: skew(62deg);
-moz-transform: skew(62deg);
-ms-transform: skew(62deg);
transform: skew(62deg);
}
.csstransforms .opened-nav li:nth-child(2) {
-webkit-transform: rotate(30deg) skew(62deg);
-moz-transform: rotate(30deg) skew(62deg);
-ms-transform: rotate(30deg) skew(62deg);
transform: rotate(30deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(3) {
-webkit-transform: rotate(60deg) skew(62deg);
-moz-transform: rotate(60deg) skew(62deg);
-ms-transform: rotate(60deg) skew(62deg);
transform: rotate(60deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(4) {
-webkit-transform: rotate(90deg) skew(62deg);
-moz-transform: rotate(90deg) skew(62deg);
-ms-transform: rotate(90deg) skew(62deg);
transform: rotate(90deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(5) {
-webkit-transform: rotate(120deg) skew(62deg);
-moz-transform: rotate(120deg) skew(62deg);
-ms-transform: rotate(120deg) skew(62deg);
transform: rotate(120deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(6) {
-webkit-transform: rotate(150deg) skew(62deg);
-moz-transform: rotate(150deg) skew(62deg);
-ms-transform: rotate(150deg) skew(62deg);
transform: rotate(150deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(7) {
-webkit-transform: rotate(180deg) skew(62deg);
-moz-transform: rotate(180deg) skew(62deg);
-ms-transform: rotate(180deg) skew(62deg);
transform: rotate(180deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(8) {
-webkit-transform: rotate(210deg) skew(62deg);
-moz-transform: rotate(210deg) skew(62deg);
-ms-transform: rotate(210deg) skew(62deg);
transform: rotate(210deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(9) {
-webkit-transform: rotate(240deg) skew(62deg);
-moz-transform: rotate(240deg) skew(62deg);
-ms-transform: rotate(240deg) skew(62deg);
transform: rotate(240deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(10) {
-webkit-transform: rotate(270deg) skew(62deg);
-moz-transform: rotate(270deg) skew(62deg);
-ms-transform: rotate(270deg) skew(62deg);
transform: rotate(270deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(11) {
-webkit-transform: rotate(300deg) skew(62deg);
-moz-transform: rotate(300deg) skew(62deg);
-ms-transform: rotate(300deg) skew(62deg);
transform: rotate(300deg) skew(62deg);
}
.csstransforms .opened-nav li:nth-child(12) {
-webkit-transform: rotate(330deg) skew(62deg);
-moz-transform: rotate(330deg) skew(62deg);
-ms-transform: rotate(330deg) skew(62deg);
transform: rotate(330deg) skew(62deg);
}
.no-csstransforms .cn-wrapper {
overflow: hidden;
margin: 10em auto;
padding: .5em;
text-align: center;
}
.no-csstransforms .cn-wrapper ul {
display: inline-block;
}
.no-csstransforms .cn-wrapper li {
float: left;
width: 5em;
height: 5em;
background-color: #fff;
text-align: center;
font-size: 1em;
line-height: 5em;
}
.no-csstransforms .cn-wrapper li a {
display: block;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}
.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
background-color: #f8f8f8;
}
.no-csstransforms .cn-wrapper li.active a{
background-color: #6F325C;
color: #fff;
}
.no-csstransforms .cn-button {
display: none;
}
@media only screen and (max-width: 620px) {
.no-csstransforms li {
width: 4em;
height: 4em;
line-height: 4em;
}
}
@media only screen and (max-width: 500px) {
.no-ccstransforms .cn-wrapper {
padding: .5em;
}
.no-csstransforms .cn-wrapper li {
width: 4em;
height: 4em;
font-size: .9em;
line-height: 4em;
}
}
@media only screen and (max-width: 480px) {
.csstransforms .cn-wrapper {
font-size: .68em;
}
.cn-button {
font-size: 1em;
}
}
@media only screen and (max-width:420px) {
.no-csstransforms .cn-wrapper li {
width: 100%;
height: 3em;
line-height: 3em;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>