search

broeker / spacebook

💥 Create fast and simple documentation to explain almost anything. Uses Eleventy, Tailwind 2.0, and Alpine JS with an optional Netlify CMS.
https://spacebook.app
MIT License
297 stars 62 forks source link

Menu triggered by hamburger not sticky #27

Open charlesroper opened 3 years ago

charlesroper commented 3 years ago

Describe the bug In my mobile browsers (tried Firefox and Edge on Android) the vertical menu that appears when tapping the hamburger is anchored to the top rather than sticking to the viewport. This is really confusing when scrolled down the page because it seems as if the hamburger does nothing.

To Reproduce Steps to reproduce the behavior:

  1. Go to any page on mobile
  2. Tap on hamburger menu
  3. Scroll down the page
  4. See error

Expected behavior Menus should stick to viewport

Screenshots Screenshot_20210221-214110

broeker commented 3 years ago

Thanks @charlesroper, yeah, that has bugged me a bit also. What do you think of this approach?

https://nextra.vercel.app/

That's kind of what I had in mind, but I think your idea is different. In their case, they made the decision to have the menu open (full screen), or not open at all, with no ability to scroll at all if it is open.

charlesroper commented 3 years ago

That looks like a great approach - very happy with that. 👍

arrowtype commented 3 years ago

Considering suggesting Spacebook for some docs – it looks like a super nice 11ty starter for docs! But, this issue is somewhat of a blocker... for what it's worth, my opinion is that a menu is nice to have open while scrolling/reading on large viewports, but it's fine for it to block content on smaller viewports. If I had to express a preference for small-screen menu UX, it would probably be to leave a bit of the page showing, and for a tap outside the menu to close it. This helps show context, makes it simple to close, and helps prevent scrolling behind it (which can be awkward for users).

I've wrangled with CSS to do somewhat similar things, so I could probably point to some useful CSS-Tricks posts on it, if that would be helpful.

mjhoefer commented 2 years ago

Is this currently on anyone's radar? Or have some direction for what it would take to implement? @arrowtype I'm in agreement with your preferences.

Opening the menu once scrolled down also requires scrolling up to view the menu.