本篇內(nèi)容介紹了“react如何實現(xiàn)浮動菜單”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)秦淮免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

react實現(xiàn)浮動菜單的方法：1、利用onMouseOver和onMouseLeave來監(jiān)聽鼠標(biāo)的變化；2、在樣式中設(shè)置父類及子類的position值；3、設(shè)置父類值為relative，子類值為absolute，并在菜單的css中加入“z-index:999;”；4、通過控制display來控制顯示與否即可。

React中hover懸浮菜單的做法

對于懸浮菜單，主要是借助html標(biāo)簽的事件機制，或者hover來實現(xiàn)，先看下效果圖：

當(dāng)鼠標(biāo)放在名字上時，彈出菜單，離開時，菜單消失。

1.先說下利用事件機制做法：

在事件機制中，主要利用鼠標(biāo)的一些事件來監(jiān)聽，具體如下：

可以利用onMouseOver（鼠標(biāo)進入），onMouseLeave （鼠標(biāo)離開）來監(jiān)聽鼠標(biāo)的變化

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}