How to hamburger

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

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
290
Be4d34a0c1926f75f805604085fa95f4?s=48 k9ordon
1
330
Be4d34a0c1926f75f805604085fa95f4?s=48 k9ordon
0
58
Be4d34a0c1926f75f805604085fa95f4?s=48 k9ordon
0
46

Other Decks in Technology

See All in Technology
7323eb584e04cae0713c137ee9036513?s=48 otty246
0
280
Cfa476ea86b3f372d114ab5eca50425b?s=48 nomizone
0
540
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
120
0b238801605070def81a98cfe8061aee?s=48 shonansurvivors
1
210
116c9c298f57285d2d3b5ac0749f014b?s=48 asatrya
0
110
2cf373725ded741824c50fd571eda6e1?s=48 udzura
0
280
3d08a17662c4c8c0cdc89c73e64d5302?s=48 serkanbingol
1
150
415b1dba0dcda50480d48b6770795f93?s=48 geshomizu
0
180
6ddc65998177a0f05be629dc31321a8f?s=48 kken78
0
420
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
1
110
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
4
620
706ff501573a736401aa4de5adc88e05?s=48 nihonbuson
2
700

Featured

See All Featured
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
268
16k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
223
47k
282d599b414022eba5096510f675b6e2?s=48 chrislema
172
14k
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
337
16k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
225
8.4k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
14k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
16k
Ba530e786553390f3fb271848485681c?s=48 3n
162
22k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
777
240k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
479
150k

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