在React中创建悬停效果菜单

时间:2017-09-20 08:05:47

标签: html css reactjs

我需要制作一个滑出式菜单,类似于这些图片中的一个:The menu on the right before hovering on it

The menu on the right after hovering on one of the menu items

编辑:我尝试使用css但我的侧栏不会出现,这是我的css代码:

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

}     .SideBar:hover{ left: 0; }

1 个答案:

答案 0 :(得分:1)

使用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})
}

然后你可以通过自己进行实验