Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to hamburger

How to hamburger

Slides for hamburger walkthrough in karriere.at frontend chapter

Klemens Gordon

April 05, 2016
Tweet

More Decks by Klemens Gordon

Other Decks in Technology

Transcript

  1. requirements - hamburger is sticky - when menu is open

    content preserves its scroll position + Content and menu are in body (for native scrolling behaviour) + fadeIn/fadeOut aka animations
  2. Lvl 1 Menu is display none Content is display block

    Hamburger is fixed STATE: MENUE_CLOSE
  3. Lvl 1 Menu is display none Content is display block

    Hamburger is clicked STATE: MENUE_CLOSE
  4. Lvl 1 Menu is display block Content is display none

    close is fixed Hamburger is hidden STATE: MENUE_OPEN
  5. Lvl 2 Menu is display none Content is display block

    Hamburger is fixed STATE: MENUE_CLOSE
  6. Lvl 2 Menu is display none Content is display block

    Hamburger is clicked var contentScrollPosition = content.scrollTop; STATE: MENUE_CLOSE
  7. Lvl 2 Menu is display none Content is display none

    close is fixed Hamburger is hidden STATE: MENUE_OPEN
  8. Lvl 3 Menu is display none Content is display block

    Hamburger is fixed STATE: MENUE_CLOSE
  9. Lvl 3 Menu is fixed for animation Content is display

    block Hamburger is clicked var contentScrollPosition = content.scrollTop; STATE: MENUE_WILL_OPEN
  10. Lvl 2 Menu is display block Content is display none

    close is fixed Hamburger is hidden STATE: MENUE_OPEN