How to hamburger

How to hamburger

Slides for hamburger walkthrough in karriere.at frontend chapter

Be4d34a0c1926f75f805604085fa95f4?s=128

Klemens Gordon

April 05, 2016
Tweet

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