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

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>

        )}

Answer 1

您必须调整所有适当的 CSS 属性才能获得所需的大小。你让它们分布在许多不同的规则上，并且以一种奇怪的方式使用绝对定位/边距，所以这并不简单，但我在这里做了一个基本的尝试您需要减少width主菜单 div 的height，其伪元素的 ，以及减少它们的边距和用于将其定位在 div 内的边距，然后添加边框。