我怎樣才能讓我的漢堡菜單更小，並在它周圍有一個完美的圓形邊框？

Question

我正在嘗試使我的漢堡菜單更小（高度和寬度），並且我已經嘗試了一段時間並使其更小但由於某種原因無法弄清楚如何使其更小。 我也在努力嘗試在它周圍制作一個完美的圓形邊框。 有人可以幫我嗎？ 我在 codepen 中找到了這段代碼並對其進行了一些調整，但我正在努力讓它恰到好處。

jsfiddle： https://jsfiddle.net/annahisenberg/ft10ersb/6/

JS代碼：

class Drag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: this.props.x,
      y: this.props.y,
      showMoreOptionsPopup: false,
      showHelpModal: false
    };

    this.reff = React.createRef();

    this.dragMouseDown = this.dragMouseDown.bind(this);
    this.elementDrag = this.elementDrag.bind(this);
    this.closeDragElement = this.closeDragElement.bind(this);
    this.showMoreOptionsPopup = this.showMoreOptionsPopup.bind(this);
  }


  componentDidMount() {
    this.pos1 = 0;
    this.pos2 = 0;
    this.pos3 = 0;
    this.pos4 = 0;
  }

  dragMouseDown(e) {
    e.preventDefault();
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    document.onmouseup = this.closeDragElement;
    document.onmousemove = this.elementDrag;
  };

  elementDrag(e) {
    e.preventDefault();
    this.pos1 = this.pos3 - e.clientX;
    this.pos2 = this.pos4 - e.clientY;
    this.pos3 = e.clientX;
    this.pos4 = e.clientY;
    this.setState({
      y: this.reff.current.offsetTop - this.pos2 + "px",
      x: this.reff.current.offsetLeft - this.pos1 + "px"
    });
  };

  closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  };

  showMoreOptionsPopup() {
    this.setState({
      showMoreOptionsPopup: !this.state.showMoreOptionsPopup
    });
  };

render() {
    return (
      <div>
        {this.state.showMoreOptionsPopup && (
          <div
            id="more_options_popup"
            style={{
              left: this.reff.current.offsetLeft - 170 + "px",
              top: this.reff.current.offsetTop - 130 + "px"
            }}
          >
           <p>Help Doc</p>
           <p>Help Doc 2</p>
           <p>Help Doc 3</p>
          </div>
        )}

            <a
          id="more_options_button"
          className={this.state.showMoreOptionsPopup ? 'open' : null}
          onClick={this.showMoreOptionsPopup}
          style={{ left: this.state.x, top: this.state.y }}
          onMouseDown={this.dragMouseDown}
          ref={this.reff}
        >
          <div></div>
        </a>
      </div>
    );
  }
}

css：

#more_options_button {
    display: block;
    /* position: absolute; */
    width: 50px;
    height: 50px;
    /* top: 50%; */
    /* left: 50%; */
    position: fixed;
    bottom: 149px;
    right: 63px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

#more_options_button.open div {
    background: none;
}

#more_options_button.open div:before, #more_options_button.open div:after {
    top: 0;
}

#more_options_button.open div:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#more_options_button.open div:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* #more_options_button:hover:not(.open) div:before {
    top: -10px;
}

#more_options_button:hover:not(.open) div:after {
    top: 10px;
} */

#more_options_button div,
#more_options_button div:before,
#more_options_button div:after {
    width: 100%;
    height: 4px;
    background: #222222;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease; 
}

#more_options_button div {
    position: relative;
    margin: 20px auto 0;
}

#more_options_button div:before, div:after {
    content: "";
    position: absolute;
}

#more_options_button div:before {
    top: -20px;
}

#more_options_button div:after {
    top: 20px;
}


@keyframes modalFade {
      from {transform: translateY(-50%);opacity: 0;}
      to {transform: translateY(0);opacity: 1;}
}

#more_options_popup {
    position: absolute;
    /* bottom: 201px; */
    /* right: 66px; */
    text-align: right;
    z-index: 9999;
    animation-name: modalFade;
    animation-duration: .3s;
}

#more_options_popup p {
    cursor: pointer;
}

.more_options_icons {
    border-radius: 50% !important;
    border: 1px solid black;
    height: 1.5rem;
    width: 1.5rem;
    text-align: center;
}


#close_help_modal {
    z-index: 9999;
}

.help_icon_ctnr {
    display: flex;
}

.help_popup_grid_col {
    border-right: none !important;
}

.help_popup_grid_col p {
    margin-right: 1rem;
}

Answer 1

您必須調整所有適當的 CSS 屬性以獲得您正在尋找的大小。 你讓它們分布在許多不同的規則上，並且以一種奇怪的方式使用絕對定位/邊距，所以這並不簡單，但我在這里做了一個基本的嘗試

您需要減少主菜單 div 的width ，其偽元素的height ，以及將它們的邊距和您使用的邊距減少到 position 它在 div 內，然后添加邊框。