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

Be4d34a0c1926f75f805604085fa95f4?s=128

Klemens Gordon

April 05, 2016
Tweet

More Decks by Klemens Gordon

Other Decks in Technology

Transcript

  1. HOW TO HAMBURGER

  2. Browser window Content Hamburger

  3. User klicks

  4. Menu is open close

  5. 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
  6. Lvl 1 Menu is display none Content is display block

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

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

    close is fixed Hamburger is hidden STATE: MENUE_OPEN
  9. Lvl 1 close is clicked STATE: MENUE_OPEN

  10. Lvl 2 Menu is display none Content is display block

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

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

    close is fixed Hamburger is hidden STATE: MENUE_OPEN
  13. Lvl 2 close is clicked STATE: MENUE_OPEN window.scrollTo(0, contentScrollPosition)

  14. Lvl 3 Menu is display none Content is display block

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

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

    close is fixed Hamburger is hidden STATE: MENUE_OPEN
  17. Lvl 3 close is clicked STATE: MENUE_WILL_CLOSE window.scrollTo(0, contentScrollPosition) Menu

    is fixed for animation Content is display block
  18. PEACE OUT YOLO