单击任何菜单项时如何关闭汉堡菜单

Question

I want to close the menu box when I click the menu item.

There is an input field when it's checked some style run and when it's unchecked the styles disappear. The item menu's link created by react router(single page application)

I cannot use jquery.

import React from 'react';
import { Link } from 'react-router-dom'
import logoNoFrame from '../Assets/img/logo_noFrame.svg'

const Header = ({
  menuItems,
}) => {
  return (
    <header >
      <div className="logoAnimated">
        <Link to="/"><img src={logoNoFrame} alt="Logo" /></Link>
      </div>

start menu for max-width: 700px;

<ul className="menu">
  {menuItems.map(item => {
    return item.isActive && <li key={item.id}>
      <Link to={item.menuAddress}>
        <i className={item.menuClasses}></i>
        <span style={{ whiteSpace: "nowrap" }}>{item.menuTitle}</span>
      </Link>
    </li>
  })}
</ul>

start hamburger menu for min-width: 700px;

<input id="toggle" type="checkbox" />
<label className="toggle-container" htmlFor="toggle">
  <span className="button button-toggle"></span>
</label>
<nav className="nav">
  {menuItems.map(item => {
    return item.isActive &&
      <Link
        key={item.id}
        className="nav-item"
        to={item.menuAddress}
      >
        {item.menuTitle}
    </Link>
  })}
</nav>

end hamburger menu for min-width: 700px;

    </header>
  );
};

export default Header;

CSS style

.menu {
  flex-basis: 35%;
  display: flex;
  min-width: 470px;
  justify-content: flex-end;
  transition: all 0.35s ease;
}

.menu li {
  display: inline-block;
  margin: 0 10px;
  margin-bottom: 16px;
}

.menu li a {
  color: #ff6c2f;
  padding: 0.75rem 0;
  position: relative;
  margin-left: 1rem;
}

.menu li:active > a {
  background-color: transparent;
}

.menu a:before,
.menu a::after {
  height: 2px;
  position: absolute;
  content: '';
  transition: all 0.35s ease;
  background-color: #fff;
  width: 0;
}

.menu a::before {
  top: 0;
  left: 0;
}

.menu a::after {
  bottom: 0;
  right: 0;
}

.menu a:hover,
.menu li:active > a {
  color: #fff;
  transition: all 0.35s ease;
}

.menu a:hover::before,
.menu :active a::before,
.menu a:hover::after,
.menu :active a::after {
  width: 100%;
}
/* Menu Item animations */

@-webkit-keyframes itemMenu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes itemMenu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.menu li {
  opacity: 0;
  -webkit-animation-name: itemMenu;
  animation-name: itemMenu;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.menu li:nth-child(1) {
  animation-delay: 5s;
}

.menu li:nth-child(2) {
  animation-delay: 5.5s;
}

.menu li:nth-child(3) {
  animation-delay: 6s;
}

.menu li:nth-child(4) {
  animation-delay: 6.5s;
}

.menu li:nth-child(5) {
  animation-delay: 7s;
}

.menu li:nth-child(6) {
  animation-delay: 7.5s;
}

/* responsive menu on max-width 600 */

.container-nav {
  position: relative;
  margin: 35px auto 0;
  width: 300px;
  height: 534px;
  background-color: #533557;
  overflow: hidden;
}

.toggle-container {
  position: absolute;
  top: 0;
  right: 0;
}

/* Toggle functionality */

#toggle {
  position: absolute;
  left: -100%;
  top: -100%;
}

#toggle:focus~.toggle-container .button-toggle {
  box-shadow: 0 0 0 8px #0000001a, inset 0 0 0 20px #0000001a;
}

#toggle:checked~.toggle-container .button-toggle {
  box-shadow: 0 0 0 285px #0000001a, inset 0 0 0 20px #0000001a;
}

#toggle:checked~.toggle-container .button-toggle:hover {
  box-shadow: 0 0 0 285px #0000001a, inset 0 0 0 20px #0000001a, 0 0 0 8px #0000001a, inset 0 0 0 20px #0000001a;
}

#toggle:checked~.toggle-container .button-toggle:before {
  transform: translateY(-50%) rotate(45deg) scale(1);
}

#toggle:checked~.toggle-container .button-toggle:after {
  transform: translateY(-50%) rotate(-45deg) scale(1);
}

#toggle:checked:focus~.toggle-container .button-toggle {
  box-shadow: 0 0 0 285px #0000001a, inset 0 0 0 20px #0000001a, 0 0 0 8px #0000001a, inset 0 0 0 20px #0000001a;
}

#toggle:checked~.nav {
  margin-bottom: 100px;
  pointer-events: auto;
  transform: translate(-50px, 50px);
}

#toggle:checked~.nav .nav-item {
  color: #EC7263;
  letter-spacing: 0;
  height: 40px;
  line-height: 40px;
  margin-top: 0;
  opacity: 1;
  transform: scaleY(1);
  transition: 0.5s, opacity 0.1s;   
}

#toggle:checked~.nav .nav-item :hover {
  color: #fff;
}

#toggle:checked~.nav .nav-item:nth-child(1) {
  transition-delay: 0.15s;
}

#toggle:checked~.nav .nav-item:nth-child(1):before {
  transition-delay: 0.15s;
}

#toggle:checked~.nav .nav-item:nth-child(2) {
  transition-delay: 0.1s;
}

#toggle:checked~.nav .nav-item:nth-child(2):before {
  transition-delay: 0.1s;
}

#toggle:checked~.nav .nav-item:nth-child(3) {
  transition-delay: 0.05s;
}

#toggle:checked~.nav .nav-item:nth-child(3):before {
  transition-delay: 0.05s;
}

#toggle:checked~.nav .nav-item:nth-child(4) {
  transition-delay: 0s;
}

#toggle:checked~.nav .nav-item:nth-child(4):before {
  transition-delay: 0s;
}

#toggle:checked~.nav .nav-item:before {
  opacity: 0;
}

#toggle:checked~.dummy-content {
  padding-top: 30px;
}

#toggle:checked~.dummy-content:before {
  background-color: #0000004d;
}

.button-toggle {
  position: absolute;
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 16px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 100%;
  transition: 0.6s;
  right: 16px;
  top: 9px;
}

.button-toggle:hover {
  box-shadow: 0 0 0 8px #0000001a, inset 0 0 0 20px #0000001a;
}

.button-toggle:before,
.button-toggle:after {
  position: absolute;
  content: '';
  top: 50%;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #EC7263;
  border-radius: 5px;
  transition: 0.5s;
}

.button-toggle:before {
  transform: translateY(-50%) rotate(45deg) scale(0);
}

.button-toggle:after {
  transform: translateY(-50%) rotate(-45deg) scale(0);
}

.nav {
  display: inline-block;
  pointer-events: none;
  transition: 0.5s;
  opacity: 0;
  animation: itemMenu 1s 5s forwards;
}

.nav-item {
  position: relative;
  display: inline-block;
  float: right;
  clear: both;
  color: transparent;
  font-size: 14px;
  letter-spacing: -6.2px;
  height: 7px;
  line-height: 7px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(0.2);
  transition: 0.5s, opacity 1s;
}

.nav-item:nth-child(1) {
  transition-delay: 0s;
}

.nav-item:nth-child(1):before {
  transition-delay: 0s;
}

.nav-item:nth-child(2) {
  transition-delay: 0.05s;
}

.nav-item:nth-child(2):before {
  transition-delay: 0.05s;
}

.nav-item:nth-child(3) {
  transition-delay: 0.1s;
}

.nav-item:nth-child(3):before {
  transition-delay: 0.1s;
}

.nav-item:nth-child(4) {
  transition-delay: 0.15s;
}

.nav-item:nth-child(4):before {
  transition-delay: 0.15s;
}

.nav-item:nth-child(1) {
  letter-spacing: -4px;
}

.nav-item:nth-child(2) {
  letter-spacing: -7px;
}

.nav-item:nth-child(n+4) {
  letter-spacing: -8px;
  margin-top: -7px;
  opacity: 0;
}

.nav-item:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #EC7263;
  transform: translateY(-50%) scaleY(5);
  transition: 0.5s;
}

Answer 1

I find my answer. I set onClick on label tag to run closeMenu function. I also set checkInput into state and fixed in with change input :)

import React from 'react';
import { Link } from 'react-router-dom'

import logoNoFrame from '../Assets/img/logo_noFrame.svg'

class Header extends React.Component {
  state = {
    menuItems: {},
    checkInput: false,
  }

  closeMenu = () => {
    const checkInput = this.state.checkInput
    this.setState (prevState => {
      return {
        ...prevState,
        checkInput: !checkInput
      }
    })
  }

  render(){
    const { menuItems } = this.props

    return (
      <header>
        <div className="logoAnimated">
          <Link to="/">
            <img src={logoNoFrame} alt="Logo" />
          </Link>
        </div>
        <ul className="menu">
          {menuItems.map(item => {
            return item.isActive && 
              <li key={item.id}>
                <Link to={item.menuAddress}>
                  <i className={item.menuClasses}></i>
                  <span style={{ whiteSpace: "nowrap" }}> 
                     {item.menuTitle}
                  </span>
                </Link>
              </li>
            }
          )}
        </ul>
        <input
          id="toggle"
          type="checkbox"
          checked={this.state.checkInput}
        />
        <label 
          className="toggle-container"
          onClick={this.closeMenu}
        >
          <span className="button button-toggle"></span>
        </label>
        <nav className="nav">
          {menuItems.map(item => {
            return item.isActive &&
              <Link
                key={item.id}
                className="nav-item"
                to={item.menuAddress}
                onClick={this.closeMenu}
              >
                {item.menuTitle}
              </Link>
          })}
        </nav>
      </header>
    );
  }
};

export default Header;