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
59
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
530
Webpack FTW
k9ordon
1
620
Javascript Event Emitter
k9ordon
0
71
responsive view - viennajs 2013-08
k9ordon
0
57
Other Decks in Technology
See All in Technology
REST API Design Pitfalls
victorrentea
1
500
仮想化って何だろう
shkoga
0
140
【shownet.conf_】トポロジ図の歩き方
shownet
PRO
0
360
ドメインと向き合う - 旅行予約編
hidenorigoto
4
510
Create Inquiry via Bedrock / 生成 AI で問い合わせ品質は変わるのか?思いついてぱっと作ったものを供養してみる
kazzpapa3
1
190
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
550
VS CodeでF1〜12キーつかってますか? / Do you use the F1-12 keys in VS Code?
74th
1
250
Oracle Cloud Infrastructure:2024年9月度サービス・アップデート
oracle4engineer
PRO
0
340
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.4k
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
310
マルチAWSアカウント間のストリーミングによるデータ同期/AWS SaaS Builders Forum 2024
visional_engineering_and_design
1
110
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
22
13k
Featured
See All Featured
Docker and Python
trallard
40
3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Typedesign – Prime Four
hannesfritz
39
2.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Navigating Team Friction
lara
183
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Automating Front-end Workflow
addyosmani
1365
200k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Into the Great Unknown - MozCon
thekraken
30
1.4k
The Cult of Friendly URLs
andyhume
76
6k
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