javascript - 我怎样才能让我的汉堡包菜单更小，并且周围有一个完美的圆形边框？

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 属性才能获得所需的尺寸。你让它们分布在许多不同的规则上，并以一种奇怪的方式使用绝对定位/边距，所以这并不简单，但我做了一个基本的尝试 here

您需要减少主菜单 div 的 width 及其伪元素的 height ，以及减少它们的边距和您正在使用的边距将它放在 div 中，然后添加边框。