react如何实现浮动菜单

本篇内容介绍了“react如何实现浮动菜单”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业秦淮免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

react实现浮动菜单的方法:1、利用onMouseOver和onMouseLeave来监听鼠标的变化;2、在样式中设置父类及子类的position值;3、设置父类值为relative,子类值为absolute,并在菜单的css中加入“z-index:999;”;4、通过控制display来控制显示与否即可。

React中hover悬浮菜单的做法

对于悬浮菜单,主要是借助html标签的事件机制,或者hover来实现,先看下效果图:

react如何实现浮动菜单

当鼠标放在名字上时,弹出菜单,离开时,菜单消失。

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如何实现浮动菜单
URL地址:http://scyanting.com/article/jiihsc.html

其他资讯