How to build a side toggle menu respond to header menu in React

问题

All:

Im pretty new to React, I wonder how can I implement a Header Menu + Side Menu component layout in React?

It should be something like:

Click the orange header menu item, according side menu(the dark grey part on the left, there is no the dark grey part shown initial, only show when click according item in the header menu) will show up, click same item again, it will slide left to toggle. And the content area will auto scale.

Any help about how to implement this will be appreciated, it does not have to be a total solution, somethign like how to click and side menu toggle slide out or how scale the right side when left side menu slide out, or something like that.

Thanks

回答1:

Theres too much in this question to give a full answer. So I'm just going to give a simple layout design with no code. You should be able to write the code yourself with this setup as it should be very straight forward.

you need a main component that renders the Header, Sidebar and Content of the page.

the header main component needs to handle an open or closed state based on the header clicks. so header item onClick(this.props.onClick). the props.onClick is passed to the header component and the main component needs to capture that and set a state.

this.setState({sidebarOpen: !this.state.sidebarOpen}); this will sumulate a toggle effect on the state for the click. now when you render just set a className based on that state.

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

and pass that through on the render to your component.

<Sidebar className={sidebarClassname}

<Content className={contentClassname}

from here you should have the components rendering and the sidebar should be getting an active class when you click on the header. then you just need to style it

the layout itself should be fairly simple.

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;
}

that should be pretty straight forward. you need to position the sidebar out of the page and the content needs to fill the page

the cool part here is when you get an active class (i.e open) you should be able to adjust the left position to create the slide in effect (because we added the css transition on the left property.

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

Sample Fiddle

来源：https://stackoverflow.com/questions/36874685/how-to-build-a-side-toggle-menu-respond-to-header-menu-in-react

标签

reactjs