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
550
Webpack FTW
k9ordon
1
630
Javascript Event Emitter
k9ordon
0
74
responsive view - viennajs 2013-08
k9ordon
0
57
Other Decks in Technology
See All in Technology
C++26 エラー性動作
faithandbrave
2
660
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
150
Storage Browser for Amazon S3
miu_crescent
1
120
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
160
AIのコンプラは何故しんどい?
shujisado
1
190
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
生成AIのガバナンスの全体像と現実解
fnifni
1
180
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
1
230
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
A designer walks into a library…
pauljervisheath
204
24k
How STYLIGHT went responsive
nonsquared
95
5.2k
Building Your Own Lightsaber
phodgson
103
6.1k
The Cost Of JavaScript in 2023
addyosmani
45
7k
Bash Introduction
62gerente
608
210k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
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