Responsive Menu Bar Demo

Made with pure HTML, JavaScript, and CSS. Tested in Chrome, Firefox, and mobile Safari.

I mostly made this to test the effect of the menu bar shadow. You have to view this page on a screen or window with a width of 500 pixels or less to see it!

One day when I was browsing the internet, I noticed that a website had a menu bar with a bit of an error. When the menu bar was extending or retracting, I noticed that an empty scroll bar appeared at the bottom of the menu. It reminded me of how reloading gunboots look in Downwell.

I wanted to try intentionally adding it to a menu bar to give it a neat effect. It turned out to look quite nice!

Also, I needed to remake the menu bar I had designed years earlier.