रिएक्ट में एक होवर प्रभाव मेनू बनाना - एचटीएमएल, सीएसएस, प्रतिक्रियाएं

मुझे स्लाइड-आउट मेनू बनाने की आवश्यकता है, इन चित्रों में से कुछ जैसा:

संपादित करें: मैंने सीएसएस का उपयोग करने की कोशिश की लेकिन मेरा साइड-बार अभ्यस्त नहीं दिखा, यह मेरा सीएसएस कोड है:

.SideBar{
position: absolute;
left: -80px;
transition: 0.4s;
width: 80px;
font-size: 15px;
color: white;
transition: 0.3s

} .SideBar:hover{ left: 0; }

उत्तर:

OnHover का उपयोग करें, और फिर जब होवर पर होगा, तो स्थिति बदलें। परिवर्तन की स्थिति के बाद आप कंडिटिटोन का उपयोग कर सकते हैं।

कुछ इस तरह:

render() {
return (
<div>(this.state.isHovered) ? (<a>openedmenu</a>) :(<a onHover={this.hover.bind(this)}>closed menu</a>)</div>
)
}


hover() {
this.setState({isHovered:true})
}

और फिर आप अपने स्वयं के द्वारा प्रयोग कर सकते हैं