当我单击菜单项时,我想关闭菜单框。
在选中某个样式运行并且未选中该样式时,会有一个输入字段消失。 由反应路由器(单页应用程序)创建的项目菜单链接
我无法使用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>
最大宽度的开始菜单:700像素;
<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>
启动汉堡包菜单,最小宽度: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>
最终汉堡菜单的最小宽度:700像素;
</header>
);
};
export default Header;
CSS样式
.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;
}
答案 0 :(得分:0)
我找到了答案。我将onClick设置为标签标签以运行closeMenu函数。我还将checkInput设置为状态,并使用更改输入进行固定:)
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;