Mobile button style navigation
I'm updating the format of our conference mini-sites to function like our mobile apps on phones and still function like normal websites otherwise. Along with the top nav bar I will have a mobile icon nav bar for the secctions.
What is the best way to build that?
Should I set it up using a list <ul><li> then setting a flex direction of row or would it be better to set it up in columns with <section><div>, or a completely different way?
11 Replies
Do you have an example image?
I need for it to go into a menu format like this for phones.
What would it look like on desktop? Just a normal navbar with links? Would it be in a menu or just a regular navbar
They want them to go across like the buttons do on our main website.
Personally, if I understand you right, I would just make them 2 separate navigations then and hide them depending on screen size
It'll be easier doing it like that and maintaining it ime than trying to keep it in one structure, since you want the desktop navigation to be in the hero and the mobile one can be outside the hero (in a side menu / hamburger)
That looks more like you'd want grid and not flexbox. If their screen isn't wide enough for 3 abreast then you get wrapping with one on the bottom taking up the entire width.
Or on larger screens you may get 2 on the last row and still same issue: different sizes on those buttons.
I think two separate navigations with the one on top disapearing into a hamburger dropdown. I'm thinking of going back to Kevin's mobile first videos on Youtube and building it mobile first as well instead of desktop first.
I think a grid would work best. I almost find grid easier to use as well.
Here's a fun thing to try: use the popover API and the
dialog element you can make a pop-over menu instead of a hamburger menu. So instead of it sliding in from the side it expands from the middle. Taking as much space as it needs and going away when you touch anywhere else.Also, since you're talking about mobile touch-target menus:
https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/
Smashing Magazine
Accessible Target Sizes Cheatsheet — Smashing Magazine
Practical guidelines to prevent rage taps and rage clicks with accessible tap targets for icons, links and buttons — on desktop and on mobile. With useful techniques and guidelines.
Huge thank you! I was just thinking about sizing and if I'd want to use @media screen to control the number and size of the icons within the rows.