Menu doesn't work on IOS

[crossland]

Hi. I'm running CMS Made Simple 1.10.3.

When I use the "Navigation: CSSMenu - Horizontal" style sheet, it works on Firefox on the Mac and IE on Windows, but not with IOS. On IOS, none of the drop down menus appear.

Has anybody else encountered this? (I did search on the forum!).
If so, what do I need to change?

The site is located at http://merlin.xssl.net/~wseditor/

Thanks,

Tim

[Dr.CSS]

There is no "hover" in iOS so you have to program another alternative for it...

[crossland]

Thanks for your reply.

Is there a stylesheet supplied with CMSMS that supports drop down menus on IOS?

[Dr.CSS]

No there is not...

[lewishowles]

I wouldn't recommend drop down menus in iOS, or any mobile (even though you can get them to work without any modification), as they're too complex and finicky for a small screen.

There's a great jQuery plugin that turns a well formed navigation into a select menu on mobile devices, which I've used before.

Other than that I'd recommend either an accordion menu on mobiles, or a single level navigation with further navigation items on subsequent pages.

[carasmo]

Code: Select all

// iOS Hover Event Class Fix - http://niteodesign.com/web-design/iphone-ipad-ios-and-the-css-hover-event/
// alternate http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".nav li a").click(function(){  // Update class to point at the head of the list
});
}

This script takes a CSS drop down hover menu and turns it into a click menu on IOS. If your first level item not a link to a page (it's a section header), those users will see the drop menu, if the first level item is a page, they will go to that page. Hover is not an option.