Skip to content

Instantly share code, notes, and snippets.

@webmasterkai

webmasterkai/mobile-menu.md

Last active August 29, 2015 14:15
Show Gist options
  • Save webmasterkai/68467e330051703f4d73 to your computer and use it in GitHub Desktop.
Save webmasterkai/68467e330051703f4d73 to your computer and use it in GitHub Desktop.
Download ZIP
Tech spec for mobile menu
Raw
mobile-menu.md
  • When the menu is hidden we say that the menu has the state is closed. {menuOpen: false}
  • When the menu is visible we say that the menu has the state open. {menuOpen: true}
  • The default state of the menu is closed {menuOpen: false} when window width is less than 767px.
  • When the screen shrinks we hide the menu after it crosses the boundry.

Open/Close Toggle

  • The toggle element is added to the DOM when the inner width of the window is less than 767px.
  • Clicking the toggle element changes the boolean state of the menu this.setState({menuOpen: !this.state.menuOpen}).
  • Increasing window width beyond 766 will trigger menu open {menuOpen: true}.

Closed

  • ul.name is removed from DOM. The toggle element is still available when screen size small.
  • show-menu removed from element.
  • Can only be closed when the width is < 767px.

Open

  • show-menu class is added to the element.
  • ul.name is added to the DOM.
@bjornmeansbear
Copy link

I think so it could be animated via CSS, we originally used the button to toggle a class on/off?

@webmasterkai
Copy link
Author

Do we want click or hover for the mobile toggle?
Does the entire

element get removed when the menu is closed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment