今日热讯:react怎么实现浮动菜单

时间:2022-12-27 10:03:01       来源:PHP中文网

本教程操作环境: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中文网其它相关文章!

关键词: 相关文章 鼠标离开 弹出菜单