У меня есть меню, которое отображает верхнюю часть текущей страницы после нажатия на значок гамбургера, который использует Glamour для CSS.
Меню анимируется справа от экрана и работает отлично, однако я изо всех сил пытаюсь его активировать, как только в любом месте в Меню нажата.
Анимация написана (animateOut), но мне нужна помощь с кодом во время анимации внутри и снаружи в зависимости от щелчка:
- Меню гамбургера щелкнуло → слайды меню справа.
- В любом месте в контейнере меню щелкнут → меню переместится вправо.
HamburgerMenu.js
CSS
const cssHamburgerMenuIcon = css({
position: 'absolute',
height: 20,
width: 20,
right: 20,
marginTop: 20,
})
const animateIn = css.keyframes({
'0%': {
transform: 'translateX(100%)'
},
'100%': {
transform: 'translateX(0%)'
}
})
const animateOut = css.keyframes({
'0%': {
transform: 'translateX(0%)'
},
'100%': {
transform: 'translateX(100%)'
}
})
const cssHamburgerMenu = css({
display: 'flex',
position: 'absolute',
flexDirection: 'column',
height: '100%',
width: 250,
right: 0,
top: 0,
zIndex: 1,
color: 'white',
backgroundColor: hamburgerGrey,
fontFamily: 'Century Gothic',
fontSize: '19px',
// animation
animation: '${animateIn} 0.5s',
})
const cssHamburgerList = css({
listStyleType: 'none',
lineHeight: '47px',
})
const cssHamburgerListItem = css({
})
"КОД"
class HamburgerMenu extends Component {
constructor(props) {
super(props)
this.state = {
menuVisible: false,
}
}
render() {
const menuVisible = this.state.menuVisible
return(
menuVisible ?
<div className={cssHamburgerMenu} onClick={() =>this.setState({ menuVisible: false })}>
<ul className={cssHamburgerList}>
<li className={cssHamburgerListItem}>Home</li>
<li className={cssHamburgerListItem}>News</li>
<li className={cssHamburgerListItem}>About us</li>
<li className={cssHamburgerListItem}>More</li>
</ul>
</div>
: (
<img
className={cssHamburgerMenuIcon}
src={HamburgerMenuIcon}
onClick={() => this.setState({ menuVisible: true})
}
/>
)
)
}
}
export default HamburgerMenu