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
46

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
47

Other Decks in Technology

See All in Technology
A73ed5cefbbd84abd2c5e14a5eb4a339?s=48 ippey
2
210
9cdd446fb259ec93e52d4388f60197f8?s=48 karamem0
1
790
3dfba21f12b674371e38d9535e0ea6df?s=48 udonyuya
1
560
19fc8f6113c5c3d86e6176362ff29479?s=48 kanaugust
PRO
0
120
2ce86e6d959967388c454e179c7a7091?s=48 leaner_tech
0
1.2k
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
1
140
108409e419edd9c842381bf1f05aa8af?s=48 piazza
0
100
Ff1cf99c7a71928f886c3b6c7c95b1da?s=48 masakazu
0
190
24312cfba087ce175856b94b0829a3a9?s=48 uzabase_saas_product
0
100
Cd823abda454a7a2065fe6fe273ae84b?s=48 viva_tweet_x
1
440
40301c0affdf359eaca771713e22b71a?s=48 harshbothra
0
150
70357f859596e494c8373be7a87966b1?s=48 1027kg
0
210

Featured

See All Featured
78b475797a14c84799063c7cd073962f?s=48 holman
288
130k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
311
21k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
258
24k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
63
3.7k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
107
14k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1346
190k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
775
200k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
145
12k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
1.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