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
520
Webpack FTW
k9ordon
1
600
Javascript Event Emitter
k9ordon
0
71
responsive view - viennajs 2013-08
k9ordon
0
56
Other Decks in Technology
See All in Technology
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
Azure AI ことはじめ
tsubakimoto_s
0
130
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
71
8.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Rails Girls Zürich Keynote
gr2m
93
13k
Music & Morning Musume
bryan
43
5.9k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
The World Runs on Bad Software
bkeepers
PRO
63
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Scaling GitHub
holman
458
140k
Web Components: a chance to create the future
zenorocha
307
41k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
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