本篇內容介紹了“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(
            
                {username}