十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇内容介绍了“react如何实现浮动菜单”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业秦淮免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
react实现浮动菜单的方法:1、利用onMouseOver和onMouseLeave来监听鼠标的变化;2、在样式中设置父类及子类的position值;3、设置父类值为relative,子类值为absolute,并在菜单的css中加入“z-index:999;”;4、通过控制display来控制显示与否即可。
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(
同时 需在样式中设置父类及子类的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如何实现浮动菜单”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!