Heim > Web-Frontend > Front-End-Fragen und Antworten > So implementieren Sie ein schwebendes Menü in React

So implementieren Sie ein schwebendes Menü in React

藏色散人
Freigeben: 2022-12-27 10:23:30
Original
2377 Leute haben es durchsucht

So implementieren Sie ein schwebendes Menü in React: 1. Verwenden Sie onMouseOver und onMouseLeave, um Mausänderungen zu überwachen. 2. Legen Sie den Positionswert der übergeordneten Klasse und der Unterklasse im Stil fest value auf absolute und fügen Sie „z-index:999;“ zum CSS des Menüs hinzu. 4. Steuern Sie die Anzeige, indem Sie die Anzeige steuern.

So implementieren Sie ein schwebendes Menü in React

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie implementiert man ein schwebendes Menü in React?

So bewegen Sie den Mauszeiger über das schwebende Menü in React

Für das schwebende Menü wird es hauptsächlich mithilfe des Ereignismechanismus des HTML-Tags implementiert, oder wir werfen zunächst einen Blick auf das Rendering:

So implementieren Sie ein schwebendes Menü in React

Wenn Sie die Maus auf den Namen bewegen, wird das Menü angezeigt. Wenn Sie es verlassen, verschwindet das Menü.

1. Lassen Sie uns zunächst über die Verwendung des Ereignismechanismus sprechen:

Im Ereignismechanismus werden einige Ereignisse der Maus hauptsächlich zur Überwachung verwendet, wie folgt:

Sie können onMouseOver (Maus betritt) und onMouseLeave (Maus) verwenden Blätter), um die Maus zu überwachen. Gleichzeitig müssen Sie die Positionswerte der übergeordneten Klasse und der Unterklasse im Stil festlegen. Der Wert der übergeordneten Klasse ist relativ und der Wert der Unterklasse ist absolut . Um das schwebende Menü am Frontend anzuzeigen, muss gleichzeitig der Z-Index zum CSS des Menüs hinzugefügt werden (Je größer der Wert, desto näher am Frontend). Maximaler Wert von 999)

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
Nach dem Login kopieren

2. Wenn es per Hover beurteilt wird, müssen Sie die übergeordnete Klasse hinzufügen: hover , diesen Stil zum CSS, und steuern Sie dann die Anzeige darin, um zu steuern, ob es angezeigt werden soll oder nicht ,

Wenn der Stil der übergeordneten Komponente A und der Stil der untergeordneten Komponente B heißt, müssen Sie Folgendes schreiben: A:hover .B{display:'block'}, um zu steuern

Empfohlenes Lernen: „

reagieren Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein schwebendes Menü in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage