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(
            <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'},来控制




  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值