Idea for a touch friendly navigation menu

[JacobPeters]

So I had an idea about how to make a touch friendly navigation system for larger format touch devices. It uses a bare minimum of javascript, and should work on non-touch devices without any. I’m not sure it’s novel or anything, but I just threw a quick demo together on codepen. It’s a tad non-semantic, but if there is some other way to get the intended effect I’d love to see your improvements. I’ll be interested to hear some feedback, even if it’s why it shouldn’t be done like this.

link to CodePen

The hover selectors in the css are commented out to simulate what acts like on a touch device.

[nixnerd]

Wanna make it truly touch friendly? Get rid of the nested (drop-down) items.

[nixnerd]

That would be the IDEAL solution. And to answer your question, there is really no way… not without violating the laws of tap target physics… which is arguably a much more egregious offense.

One method would be this to get more space to work with. But, it won’t work in every situation.

The other way to solve this is a one-page site, in keeping with the most current trends. But, I would argue that two taps/clicks is MUCH easier than scrolling with your thumb for days to find what you want.

The most AESTHETICALLY pleasing method I’ve found is an accordion menu… but it leaves a lot to be desired in terms of how elegant and semantic it is. Often times you’re forced to either NOT call your nav a nav in the markup OR you’re forced to put page content inside a nav. Both suck.

I guess nested menus are just the nature of the beast. But… if you can get away with it, a 4-6 item top-level menu is ideal. For most small sites, this is adequate.

[Author]

Posts