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

How to hamburger

Be4d34a0c1926f75f805604085fa95f4?s=47 Klemens Gordon
April 05, 2016
Technology
0
48

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

See All by Klemens Gordon
Be4d34a0c1926f75f805604085fa95f4?s=48 k9ordon
0
120
Be4d34a0c1926f75f805604085fa95f4?s=48 k9ordon
2
330
Be4d34a0c1926f75f805604085fa95f4?s=48 k9ordon
1
360
Be4d34a0c1926f75f805604085fa95f4?s=48 k9ordon
0
59
Be4d34a0c1926f75f805604085fa95f4?s=48 k9ordon
0
48

Other Decks in Technology

See All in Technology
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
0
180
C7d05b5f01acd82fd8520c6dd5e1f243?s=48 waka
0
340
3235eeacb4ddecfba39e1eee75069da2?s=48 taksan0
0
130
2d1ae5ea9354a50d87b46f4503d11f4e?s=48 tuhin1729
0
360
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
470
2d1ae5ea9354a50d87b46f4503d11f4e?s=48 tuhin1729
0
140
7634917a0679d61341cb5cf40dbc7766?s=48 yokawasa
0
270
Eae29f3898341b3daa24eb37249c43f0?s=48 ikeda7010
0
610
7a0bc9670ff654b04d4361a9afd1bba8?s=48 hcrane
3
360
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
PRO
0
180
C78c829ff61f9cfd6fe0b7ac45437672?s=48 amir
1
160
842515eaf8fbb2dfcc75197e7797dc15?s=48 sat
2
240

Featured

See All Featured
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.6k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
41
1.5k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
593
210k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
248
21k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
67
4.4k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
225
48k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
167
19k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
335
29k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
28
2.8k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
3.9k

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