J'essaie de rendre mon menu de hamburger plus petit (à la fois en hauteur et en largeur), et j'essaie depuis un certain temps et je l'ai rendu un peu plus petit, mais pour une raison quelconque, je ne peux pas comprendre comment le rendre plus petit. J'ai aussi du mal à essayer de faire un cercle parfait autour de lui. Est-ce que quelqu'un peut m'aider? J'ai trouvé ce code dans un codepen et l'ai un peu ajusté, mais j'ai du mal à le faire juste.

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

Code 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;
}
0
Annah Isenberg 22 nov. 2019 à 00:10

1 réponse

Meilleure réponse

Vous devrez modifier toutes les propriétés CSS appropriées pour obtenir la taille que vous recherchez. Vous les avez répartis sur de nombreuses règles différentes et utilisez le positionnement/les marges absolus d'une manière étrange, donc ce n'est pas simple, mais j'ai fait une tentative de base ici

Vous devez réduire le width du div du menu principal, le height de ses pseudo-éléments, ainsi que leur marge et les marges que vous utilisez pour le positionner à l'intérieur du div, puis ajouter un frontière.

1
Chris B. 21 nov. 2019 à 21:38