How to hamburger

Slides for hamburger walkthrough in karriere.at frontend chapter

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