本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。
react怎么实现浮动菜单?
React中hover悬浮菜单的做法
(资料图片仅供参考)
对于悬浮菜单,主要是借助html标签的事件机制,或者hover来实现,先看下效果图:
当鼠标放在名字上时,弹出菜单,离开时,菜单消失。
1.先说下利用事件机制做法:
在事件机制中,主要利用鼠标的一些事件来监听,具体如下:
可以利用onMouseOver(鼠标进入),onMouseLeave (鼠标离开)来监听鼠标的变化
class UserMenu extends React.Component{ constructor(props){ super(props), this.state={ modalIsOpen:"none", atUserItems:false, } this.contentBtn=this.contentBtn.bind(this), this.programBtn=this.programBtn.bind(this), this.handleMouseOver = this.handleMouseOver.bind(this); this.handleMouseOut = this.handleMouseOut.bind(this); this.userCenter = this.userCenter.bind(this); this.handleMouseUserOver = this.handleMouseUserOver.bind(this); } contentBtn(){ this.context.router.history.push("/details"); } programBtn(){ this.context.router.history.push("/gui"); } handleMouseOver(e){ this.setState({ modalIsOpen: "block", }) } handleMouseOut(){ this.setState({ modalIsOpen: "none", }) } handleMouseUserOver(e){ this.setState({ modalIsOpen: "block", }) } userCenter(){ this.setState({ modalIsOpen: "none", }) } render(){ const {username} = this.props; return( {username} - 个人中心
- 账号设置
- 注销
) } } UserMenu.contextTypes = { router: PropTypes.object.isRequired}; export default UserMenu
登录后复制
同时 需在样式中设置父类及子类的position值,父类值为 relative,子类值为 absolute,同时为使悬浮菜单在最前端显示,菜单的css中需加入 z-index:999;(数值越大,越靠前端,999最大值)
.body{ position:relative}.menus{ display:none; position:absolute; right: 0; z-index:999;} .uname{ color: white; margin-left: 5px; margin-right: 10px; cursor: pointer; padding-top: 25px; padding-bottom: 20px; padding-left: 5px;}.uname:hover{ color: darkorange;}.ul{ width: 120px; background-color: #fff; padding: 10px; border-radius: 8px; -webkit-box-shadow: 0 5px 10px 0 rgba(12,40,46,0.20); box-shadow: 0 5px 10px 0 rgba(12,40,46,0.20);}.li{ list-style: none; height: 40px; display: list-item; cursor: pointer;}.li:hover{ color: darkorange;}
登录后复制
2.如果通过hover判断,需在css中加入 父类:hover .子类{} ,这个样式,然后在其中通过控制display来控制显示与否,
如父组件样式名为A,子组件样式名为B即需这样写: A:hover .B{display:"block"},来控制
推荐学习:《react视频教程》
以上就是react怎么实现浮动菜单的详细内容,更多请关注php中文网其它相关文章!