Циклическое меню с ReactJS

ProgramBox

Циклическое меню с ReactJS

Post author:admin
Запись опубликована:15 апреля, 2023
Post category:Вопросы по программированию

#css #reactjs

Вопрос:

Я нашел это удивительное круговое меню в codepen. ссылка:https://codepen.io/juslwk/pen/xgbDB.

Я хотел перенять его в reactjs. Я полный новичок в react. Когда я попытался скопировать код, чтобы сначала опробовать его, круговое меню не появилось. просто куча элементов навигационного списка. Кроме того, для моего небольшого побочного проекта мне не нужно нажимать кнопку, чтобы меню отображалось так, как в ссылке. Я хочу, чтобы все меню со средней кнопкой было там всегда.Итак, я не использую 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>

Спасибо за любую помощь.

1. PS: Я добавил CSS-класс «opened-nav», который они используют после класса «cn-wrapper».

2. Потому что вы не включили javascript из примера codepen, поэтому кнопка ничего не делает. И это довольно сложно для новичка, поэтому я бы порекомендовал вам подробнее изучить css-анимацию, если вы хотите создать что-то подобное.

3. @wyfy, я хотел, чтобы круговое меню присутствовало всегда. без использования какой-либо кнопки для его открытия. Думаю, именно в этом и заключается моя проблема.

4. Если вы посмотрите в настройках этого примера, он также использует внешнюю библиотеку, cdnjs поэтому вам также придется включить ее в свое приложение. И в файле js вы видите, что он добавляет динамический classed к html, чтобы у него был «открытый стиль» или «закрытый стиль» . Если вы разберетесь с этими классами и добавите их в свои компоненты, то это может сработать

5. @John не делайте того, что вы сделали, вы найдете людей, которые не собираются этого терпеть. Я просто помогал, потому что у меня было несколько минут, чтобы помочь. Люди здесь хотят помогать другим решать реальные проблемы… мы хотим помочь вам улучшить ваш код, а не создавать код за вас! Добро пожаловать в React, вы найдете эту библиотеку интересной и поставите перед собой цель изучать ее каждый день… Я могу заверить вас, что в течение месяца вы будете далеко.

Ответ №1:

Вот клон этого проекта в изолированной среде. Если вы не хотите переключать меню с помощью кнопки, все, что вам нужно сделать, это добавить имя класса 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: defau<
}

.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>

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Задача.Выполнить(() => { заканчивается, ничего не делая

Qt с несколькими (двумя) графическими слоями или буферами GUI

Для чего нужен URL-адрес jQuery/Ajax getData asp.net