#139 Advanced Navbar Dropdown Menu
Previously we created a responsive layout with a Sidebar.
On a small screen we will hide the sidebar and display a dropdown mobile-only menu instead.
To make the user experience seamless, it will follow a few common practices:
- close dropdown by clicking Escape
- close dropdown if screen size is more than sm (768 px)
- hide
main
area and display ONLY dropdown on page - blur
main
- disable scrolling of
body
content
I also think that this lesson is a GREAT resource on understanding how StimulusJS works.
Episode source code: https://github.com/corsego/138-tailwind-layout/commit/46658fd185b55e14140faa56a9671ba9f02c124a
Based on this blogpost: https://blog.corsego.com/tailwindcss-dropdown
0:00 Working demo
1:07 Mobile dropdown menu works on other websites
2:36 Dropdow menu HTML and CSS
7:05 Stimuls Navbar controller to open/close dropdown
10:28 Auto close dropdown menu on big screen
13:00 Blur background when dropdown is open
14:16 Disable background scroll
15:05 Hide main content when dropdown open
15:52 Close menu with keyboard
16:54 Dropdown menu style options
18:02 Steal dropdown style from Tailwind wbsite
0
Featured in playlists
![#138 Responsive Layout with Sidebar and Navbar](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg5MCwicHVyIjoiYmxvYl9pZCJ9fQ==--20f38afc454180eb5a08327b9629d846e64c1849/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#139 Advanced Navbar Dropdown Menu](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkwMCwicHVyIjoiYmxvYl9pZCJ9fQ==--cd4b7cf897374899e30004392d15c095c38f9999/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#140 Click outside to close Menu with Stimulus-Use](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1OCwicHVyIjoiYmxvYl9pZCJ9fQ==--7ca40fc28c88f131fd3eb23fbe0b8c8518c3c577/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
Stop copypasting CSS and Javascript UI elements!
Learn to write your own!
Really, there are like 50 classes that you need to remember and you're set for life!