Responsive menu rethinking

Bloke · 2020-07-13 23:21:35

Call me crazy but I have this notion on a site I’m working on to just design out the ridiculous hamburger. From an engagement perspective, it’s irritating to not know what content sections the site offers before clicking a stupid three-line icon to reveal the sections, and then have to click again to visit it.

So I’m looking for strategies to display as many menu items all the time on all screen sizes. It’s the usual menu layout: Logo sec1 sec2 sec3 sec4 sec 5… type of thing on desktop.

Options I’m considering:

Shrink the logo on small screen widths and have a scrollable menu list alongside so at least you can see some of the items and can scroll to reach the less important ones off-screen.
Swap the words out for icons on small widths – although not all menu items lend themselves to iconification.
Shrink the menu font and place the words beneath each icon.
Show a few of the menu items and hide the others behind a ‘…’ link that pops up the rest on tap. The number of items hidden in the ‘…’ can vary based on available width: as more width is available, fewer items appear in the breakout menu, until it’s not needed at all at wider viewports. Kinda Fastmail stylie.
Keep the logo at the top and move the menu to the bottom on small viewports so there’s extra width available for menu items.
Move the menu wholesale to the bottom on small widths.

The latter two intrigue me. Having the menu at the top on desktop/tablet but flicking it to position:fixed; bottom:0; on mobile appeals because you can then use and navigate the site with one hand, operating the menu with a thumb. If the menu is left/right scrollable, that also works with a thumb.

So I think I’m leaning towards a full menu experience along the bottom edge on mobile (with or without logo: I’m not sure yet). Scrollable menu, or icons, or a combination is fine. Then flip the menu/logo to the top for tablet and higher. Probably fixed position there too.

I would like the solution to be as close to pure CSS as I can. I know some solutions (like the ‘…’ menu thing) require JavaScript, but I’d choose those second compared to pure CSS concept.

I’ve hunted the web and found thousands of sites offering things like “the top 50 best responsive menus” but 95% of them revolve around a hamburger, and the remaining 5% use JavaScript. I’m cheesed off with hamburgers. I want the site to behave more like an app via its menu.

Does anyone have any clues, insights, code, tutorials, or wisdom on where I should be looking for achieving any of this? My CSS-fu isn’t up to scratch and I need a leg-up.

Thank you in advance.

Pat64 · 2020-07-14 05:29:41

Hi Stef.

You’re right: hamburger menus are stupid solution but keeping on websites everywhere (https://medium.muz.li/3-good-reason-why-you-might-want-to-remove-that-hamburger-menu-from-your-product-69b9499ba7e2)…

I’m loving menu alternatives inspired by mobile applications positioned at the bottom of the viewport. That’s the model I implemented within one of my lastest clients projects:

The idea with hyphens for other elements suggestion into the navigation part is excellent. Some new CSS properties offer us native sequential scrolling (see more: https://developer.mozilla.org/fr/docs/Web/CSS/scroll-snap-stop)

colak · 2020-07-14 06:09:17

I guess it depends on the size of that menu. If you have 4-5 items, having it at the bottom does indeed make sense but if the menu has more items, I think that the top may be its natural position.

Having said that, did you consider a fixed middle left option? For right-handed people at least, it is where the thumb is naturally located when holding the phone, although this might be a harder solution to implement as it may lessen the width of the readable screen.

philwareham · 2020-07-14 06:39:37

How about the good old <select> menu? I used these a bit in the early days of responsive web. Maybe as part of a sticky/fixed header (or even sticky/fixed footer) might work well.

Bloke · 2020-07-14 08:22:12

@Pat64. Yes, that article was one of a few I read that inspired my rethinking of this annoying piece of UX. The other was when I was explaining to my mum over the phone how to navigate a website and asked her to press the three-line menu. She asked, “Which one?” Of course there’s on in the browser app and one in the website.

Your version for Clos Mirabel is exactly the sort of thing I’m after on mobile. It’s not showing up for me on the live site though – I see a ‘Menu’ (which is actually a nice way of making it more obvious what the three-lines mean!) Do you have any code or tutorials where this is explained as I’m struggling to get the CSS to work and do the scrolling on small widths at the bottom and no scrolling at the top on wider viewports.

That scroll-snap-stop thing looks really handy here so the menu can pause at each item. Gonna experiment with that, thank you. The Mozilla article claims it doesn’t work in Firefox but the demo works for me.

colak/philwareham: Not considered those options. I might fall back on one of those if I can’t get this bottom slider menu to work reliably (or the client doesn’t like it!). There are only 4-5 items in the menu and we’re not planning any more (famous last words).

Thanks for the ideas, guys. If anyone has any other alternatives to the hamburger, I’ll consider anything.

Pat64 · 2020-07-14 10:53:17

Please, Stef, if this kind of model is what you are looking, steal it: it’ll be a pleasure for me ;)

bici · 2020-07-14 15:44:35

Pat64 wrote #324496:

what a gorgeous site!

GugUser · 2020-07-14 23:01:28

Three CSS Alternatives to JavaScript Navigation, Alternative 2: The horizontal scroller.

phiw13 · 2020-07-14 23:11:07

Bloke wrote #324495:

Call me crazy but I have this notion on a site I’m working on to just design out the ridiculous hamburger.

How many menu items do you have ? if it is just a few (=< 6) you could use a small grid (e.g 2 columns and 3 rows) with display: flex; flex-flow: row wrap . I’ve used that with some success on one Japanese site. Works best if the menu-item text-labels are shortish.

(and of course the site label/logo goes on its own row.)

Textpattern CMS

Textpattern CMS support forum

#1 2020-07-13 23:21:35