首頁 > web前端 > 前端問答 > react怎麼實現浮動選單

react怎麼實現浮動選單

藏色散人
發布: 2022-12-27 10:23:30
原創
2375 人瀏覽過

react實現浮動選單的方法:1、利用onMouseOver和onMouseLeave來監聽滑鼠的變化;2、在樣式中設定父類別及子類別的position值;3、設定父類別值為relative,子類別值為absolute,並在選單的css中加入「z-index:999;」;4、透過控制display來控制顯示與否即可。

react怎麼實現浮動選單

本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼實現浮動選單?

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(
            <div className={styles.body} >
                <div className={styles.uname}
                     onMouseOver={this.handleMouseOver}
                     onMouseLeave={this.handleMouseOut}
                >{username}</div>
 
                <div className={styles.menus}
                     style={{display:this.state.modalIsOpen}}
                     onMouseOver={this.handleMouseUserOver}
                     onMouseLeave={this.handleMouseOut}
                >
                    <ul className={styles.ul}>
                        <li className={styles.li} onClick={this.userCenter}>个人中心</li>
                        <li className={styles.li} >账号设置</li>
                        <li className={styles.li} >注销</li>
                    </ul>
                </div>
            </div>
        )
    }
 
}
 
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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板