Wie eine Seite Toggle-Menü reagieren bauen Menü-Header in

Question

Reagieren

Alle:

Im ziemlich neu zu reagieren, ich frage mich, wie kann ich einen Header Menu implementieren + Side-Menükomponente Layout in Reaktion?

Es soll so etwas sein:

den orangefarbenen Kopfmenüpunkt klicken, Seitenmenü entsprechend (den dunkelgrauen Teil auf der linken Seite gibt es keine den dunkelgrauen Teil Anfang gezeigt, zeigt nur, wenn Klick nach Element im Header-Menü) wird angezeigt, klicken Sie erneut auf das gleiche Element, es wird nach links schieben, um umzuschalten. Und der Inhaltsbereich wird automatisch skaliert.

Irgendwelche Hilfe über, wie man dies umsetzt, wird geschätzt, es muss nicht eine Gesamtlösung sein, etwas wie wie man klickt und seitliches Menü toggelt, rutscht oder wie die rechte Seite skaliert, wenn linkes Menü herausrutscht, oder so ähnlich.

Danke

Answer 1

Theres zu viel in dieser Frage, um eine vollständige Antwort zu geben. Also werde ich nur ein einfaches Layout-Design ohne Code geben. Sie sollten in der Lage sein, den Code selbst mit diesem Setup zu schreiben, da es sehr einfach sein sollte.

Sie benötigen eine Hauptkomponente, die den Header, die Seitenleiste und den Inhalt der Seite darstellt.

Die Header-Hauptkomponente muss basierend auf den Header-Klicks einen offenen oder geschlossenen Status verarbeiten. so . Das Props.onClick wird an die Header-Komponente übergeben und die Hauptkomponente muss dies erfassen und einen Status festlegen.

this.setState({sidebarOpen: !this.state.sidebarOpen}); Dies wird einen Toggle-Effekt für den Status für den Klick summieren. Wenn Sie jetzt rendern, legen Sie einfach einen Klassennamen basierend auf diesem Status fest.

let sidebarClassname = this.state.sidebarOpen ? 'sidebar open' : 'sidebar'; 
let contentClassname = this.state.sidebarOpen ? 'content open' : 'content'; 

und übergeben Sie das durch auf dem Rendern zu Ihrer Komponente.

<Sidebar className={sidebarClassname}

<Content className={contentClassname}

von hier sollten Sie die Komponenten-Rendering haben und die Seitenleiste sollte eine aktive Klasse bekommen, wenn Sie auf die Überschrift klicken. dann müssen Sie es nur

stylen es sollte das Layout selbst ziemlich einfach sein.

css

.header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 60px; 
} 
.sidebar { 
    position: absolute; 
    top: 60px; 
    left: -300px; 
    height: 100%; 
    width: 300px; 
    transition: left .3s ease-in-out; 
} 
.content { 
    position: absolute; 
    top: 60px; 
    left: 0; 
    right: 0; 
    height: 100%; 
    transition: left .3s ease-in-out; 
} 

, die ziemlich geradlinig sein sollte. Sie müssen die Seitenleiste aus der Seite positionieren und der Inhalt muss die Seite füllen

der coole Teil hier ist, wenn Sie eine aktive Klasse erhalten (dh open) sollten Sie in der Lage sein, die linke Position einzustellen, um die Folie zu erstellen in-Effekt (weil wir den CSS-Übergang auf der linken Seite Eigenschaft.

.sidebar.open { 
    left: 0; 
} 
.content.open { 
    left: 300px; 
} 

Sample Fiddle