Hi,

I've recently been experimenting with four small screen responsive menu systems.

Two are JavaScript dependent and two are pure HTML/CSS.

While I prefer having as few dependencies as possible, after reading Responsive Navigation Patterns I feel that the Toggle menu solution is most suited to this particular site's requirements.

Toggle menu functionality has been added to the Zen Grid Framework which is seriously convenient.

However, (and perhaps it's something I am overlooking) the framework Toggle Menu functionality does not appear to have any fallback if JS is switched off in a user's browser.

When I test locally there does not appear to be any way to view menu items within the Toggle menu when JS is switched off, all I get is the toggle menu trigger - I can no longer access menu items (toggle menu content). As far as I can tell the same issue also arises with the "Select Box" mobile menu if JS is switched off.

I'm currently looking at various workarounds for this but (and I'm finally getting to the point) it would obviously be great to see some level of fallback/graceful degradation built into the framework if Toggle Menu or Select Box mobile menus are enabled and JS is switched off.

Thanks for your consideration.

Kind regards
John

Hey John,

Sure thing.

Ive added it to the feature list for future releases.

What would be the ideal behaviour with JS disabled? Im assuming we can't just use css3 to do this since its likely to be either old or non mainstream browsers you are targeting.

Hi Anthony,

Thanks for adding this to your future feature list. Appreciated.

As for ideal behaviour with JS disabled - first and foremost I would place emphasis on functionality as opposed to aesthetics.

I'm thinking something along the lines of Seth Warburton's "OneWeb" template. With this template a user still has access to menu items regardless of JS status.

And that's basically all I think that's required. Nothing fancy, no frippery, no smooth transitions - just plain, functional html (ul) fallback if JS is disabled.

As there is still a distinct lack of responsive Joomla templates ( present company excluded ) I've listed some other non-Joomla examples for reference:

Hybrid WP theme - smooth drop-down/select list mobile menu - switches to standard navigation (sans transition) and still fully accessible when JS is disabled.

My Opera - no transition effects on drop-down/select list mobile menu (so rather abrupt) - but fully accessible when JS is disabled.

Perhaps the best example is the toggle menu functionality on the Cognition : Happy Cog blog.
This is similar in function to the Zen Grid Framework Toggle Menu. However, when JS is disabled the toggle nav icon is hidden and the toggle menu (sans transition) defaults to an open state instead of closed - thus navigation is perfectly accessible.

I hope this is helpful Anthony and illustrates what I have in mind.

Thanks again & kind regards
John

Thanks John,

I have always found it important to include a functional fallback and I'm happy I am not alone here. I agree, it doesn't have to be pretty as long as it works. Pretty can always be layered on later.

Happy Cog's site is pretty awesome isn't it?

Hey Seth,

I agree completely. I appreciate that most people these days will have JS enabled, I'm thinking more of niche/edge cases (and browsers) where, for whatever reason, JS is disabled. I still want users to be able to navigate my site regardless. Belt & braces I guess. Like you say, "pretty" can be added later with a light dusting of CSS.

In my research I've looked at a lot of sites/frameworks and examined myriad mobile/small screen navigation systems. From what I can ascertain most (responsive) sites that make use of JS for mobile/small screen navigation don't employ any safe/functional fallback, which is kind of interesting. I don't know if this is an exemplification of building for modern browsers only, or perhaps I'm overestimating the amount of users who potentially have JS disabled. Maybe I'm looking to solve a problem, that doesn't really exist, or exists in such small numbers as to be negligible. However I am a big proponent of graceful degradation/progressive enhancement. I've stopped building pixel-perfect/replica sites in IE/6/7/8 - but I still build sites that are functional, navigable and usable within the restrictions/limitations of these browsers.

For the moment I'm going to add my own fallback (still experimenting though I'll go for the simplest solution) but would be great to see it built into the framework. It might also give the framework an edge/advantage over those frameworks that don't degrade with functional navigation should JS be disabled.

As for Happy Cog - yeah lovely site, though I'd expect nothing less from the godfather himself.

Thanks Seth & kind regards

John