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
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
300
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
120
CoRL 2025 Survey
harukiabe
1
240
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
160
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
3
1.3k
AI時代、“平均値”ではいられない
uhyo
8
2.1k
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
360
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
630
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
2
1.8k
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
140
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
120
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Pragmatic Product Professional
lauravandoore
36
7k
A Tale of Four Properties
chriscoyier
161
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Scaling GitHub
holman
463
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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