Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How to hamburger
Search
Klemens Gordon
April 05, 2016
Technology
0
63
How to hamburger
Slides for hamburger walkthrough in karriere.at frontend chapter
Klemens Gordon
April 05, 2016
Tweet
Share
More Decks by Klemens Gordon
See All by Klemens Gordon
Yo Building Progressive Framework-less Vanilla Web-applications
k9ordon
0
150
A loosely coupled front-end
k9ordon
2
600
Webpack FTW
k9ordon
1
670
Javascript Event Emitter
k9ordon
0
77
responsive view - viennajs 2013-08
k9ordon
0
60
Other Decks in Technology
See All in Technology
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
420
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
290
Where will it converge?
ibknadedeji
0
210
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
210
実装で解き明かす並行処理の歴史
zozotech
PRO
1
710
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
960
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
200
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
710
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
210
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Faster Mobile Websites
deanohume
310
31k
Typedesign – Prime Four
hannesfritz
42
2.8k
Become a Pro
speakerdeck
PRO
29
5.5k
Navigating Team Friction
lara
190
15k
Site-Speed That Sticks
csswizardry
11
900
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Transcript
HOW TO HAMBURGER
Browser window Content Hamburger
User klicks
Menu is open close
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
Lvl 1 Menu is display none Content is display block
Hamburger is fixed STATE: MENUE_CLOSE
Lvl 1 Menu is display none Content is display block
Hamburger is clicked STATE: MENUE_CLOSE
Lvl 1 Menu is display block Content is display none
close is fixed Hamburger is hidden STATE: MENUE_OPEN
Lvl 1 close is clicked STATE: MENUE_OPEN
Lvl 2 Menu is display none Content is display block
Hamburger is fixed STATE: MENUE_CLOSE
Lvl 2 Menu is display none Content is display block
Hamburger is clicked var contentScrollPosition = content.scrollTop; STATE: MENUE_CLOSE
Lvl 2 Menu is display none Content is display none
close is fixed Hamburger is hidden STATE: MENUE_OPEN
Lvl 2 close is clicked STATE: MENUE_OPEN window.scrollTo(0, contentScrollPosition)
Lvl 3 Menu is display none Content is display block
Hamburger is fixed STATE: MENUE_CLOSE
Lvl 3 Menu is fixed for animation Content is display
block Hamburger is clicked var contentScrollPosition = content.scrollTop; STATE: MENUE_WILL_OPEN
Lvl 2 Menu is display block Content is display none
close is fixed Hamburger is hidden STATE: MENUE_OPEN
Lvl 3 close is clicked STATE: MENUE_WILL_CLOSE window.scrollTo(0, contentScrollPosition) Menu
is fixed for animation Content is display block
PEACE OUT YOLO