Page 1 of 1
Menu doesn't work on IOS
Posted: Mon Aug 13, 2012 9:41 pm
by 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
Re: Menu doesn't work on IOS
Posted: Mon Aug 13, 2012 9:57 pm
by Dr.CSS
There is no "hover" in iOS so you have to program another alternative for it...
Re: Menu doesn't work on IOS
Posted: Mon Aug 13, 2012 10:42 pm
by crossland
Thanks for your reply.
Is there a stylesheet supplied with CMSMS that supports drop down menus on IOS?
Re: Menu doesn't work on IOS
Posted: Tue Aug 14, 2012 10:15 pm
by Dr.CSS
No there is not...
Re: Menu doesn't work on IOS
Posted: Sat Aug 18, 2012 1:43 pm
by 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.
Re: Menu doesn't work on IOS
Posted: Sun Aug 19, 2012 12:45 am
by 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.