I have a site with a Spry menu which works for Android, but does not work on iOS. I have a pure css menu for the same site which works on iOS, but not on Android. Is there any way of getting the page to detect the OS and then pull up the appropriate menu, or page? (By the way - I'm using the most up to date version of Spry, but need the top level menu item to be a link, so there's no way of getting it to work on iOS).
Can anyone help?
Spry version - http://www.apolloensemble.co.uk
Pure css - http://www.apolloensemble.co.uk/indextest.shtml (not quite sorted out yet).
Using Spry 1.7 on DW5.5 - although not for the above site, which uses an earlier version. I set up a test page using spry 1.7 which didn't tick enough of the boxes, and I've since trashed it. The problem with even this version of spry is that on iPads etc the top level menu item goes straight to the linked page rather than displaying the 2nd level. Having researched this and trawled the forums, it seems that the only way round this is to duplicate the item without the link - tapping it will then display the next level. This however looks clumsy and is not in my view an acceptable alternative.
I'm aware that this issue could maybe be tackled using media stylesheets, but the html is quite different for each version and I'm not sure that I could make it consistent. Thats why I'm hoping for a solution that works at page level.
One thing you can try with your spry to make it work for IOS is this:
The first level of menu (in ie: Home, What is Ensemble, etc, is to remove the top level link) then put them below in the dropdown.
So when you click the home, it drops down and Home is the first selection below that. Same way with all of them. If you remove the first level click and replace it like the example below:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.shtml" title="Home" >Home</a></li>
<li><a href="aboutapollo.shtml" title="About Apollo">About Apollo</a></li>
<li><a href="team.shtml" title="Apollo Team">The Team</a></li>
<li><a class="MenuBarItemSubmenu">What is Ensemble</a>
<li><a href="aboutensemble.shtml" title="What is Ensemble">What is Ensemble?</a></li>
<li><a href="inputs.shtml" title="Detect movements">Detect movements</a></li>
<li><a href="interface.shtml" title="Connect to your PC">Connect to your PC</a></li>
<li><a href="software.shtml" title="Create your theme">Create your theme</a></li>
<li><a href="outputs.shtml" title="Select your outputs">Select your outputs</a></li>
Not optimal, but it does work with IOS. I am not sure I got all the syntax correct, but you should be able to see what I did by the example (remove the top level links to a page and replace with just a generic a href.
PS: make a backup before you try this in case you don't like the way it functions
In order to make Spry dropdown pages work in iOS, you must upgrade to Spry version 2.0 (or above, if available). Otherwise you will not ever be able to get it to work with iOS.
I actually went to WebAssist (and, later Project 7) for building menus because of this problem. As a result, I don't use Spry, even though the version installed with CS5.5 is compliant with the expectations of iOS.
OK, never get it to work without removing the first link.
But under Spry 2.x and also with WebAssist and Project 7, you can have that top link. And that top link is very useful.
For example, if you have a "press" section, you make a page underneath for each article. But if you can have a link for the top menu, you can have brief paragraphs on that page for the articles you find most important, with links into the pages, thus directing the visitor to the articles you find best-suited.
Whenever I do that, I'll make a folder with the same name as the "top" page, which really helps in website organization. I know everything in a folder is a part of a drop-down menu structure.
I agree Mark, the Spry 2.x is probably a better choice... more overhead involved, but it doesn't seem to affect the load time. I have implemented it once, but I am not as familiar with it as I just loaded the widget recently. I have put it in a SSI so updated several pages will be a breeze. Looking at Nancy's (spelled it right this time) example, it looks like the same js works for vertical or horizontal, is that correct? When I have more time to experiment, I will give it a good try.
Spry Menu 2.0 supports either horizontal or vertical multi-level menus in all modern browsers including iOS and Droids.
Use your Widget Browser to style the menu. Select your format from the MENU BAR LAYOUT Panel (see screenshot).
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
Hi Jim - and everyone else - thanks for the various bits of advice.
To clarify - I've checked and I am using v2.0 - for some reason the folder is named 1.7. However, it definitely is v2.0.
Jim - your version is a good compromise but its not acceptable to my customer. Forcing the dropdown works, but when it appears you then see two duplicate menu items: the top level and the 2nd level, and they don't want this. I've experimented with quite a few different systems (superfish, as well as the pure css version), but have not been able to find one which works perfectly for Android AND iOS.
So back to my original query - does anyone know of any way of getting the OS to determine the page selection? It would solve the problem completely - and I'm really unwilling to spend any more time trialling different menu systems which always seem to end up working for one but not the other. I want something which works perfectly in both!
Which models iOS & Droid have you actually tested?
AFAIK, Spry menu 2.0 (UI 1.7) with top level links works on current iPhone/iPad/iTouch & Droids.
Same goes for Project Seven's Pop-Menu Magic-2 (commercial product).
Incidentally, you have some coding errors on your pages that need attention. UPPERCASE tags in XHTML doc types are invalid.
The inherent problem with user-agent detection is:
a) the scripts are ugly & exhaustive to include every known device on the planet and
b) as new browsers & devices come to market, you'll need to keep updating the user-agent list.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
Thanks Nancy - I'm not sure which of the various models we're using. I don't have an iPhone or iPad - they are used by my customer. I know that both are very recent models. I use an HTC smartphone, again pretty new, and I'm afraid I don't know how to find out which version of Android it uses. I obviously need to get far more involved with this but find it all a little daunting. I could do with a beginners guide to coding for mobiles!
I'm baffled by the problems we experienced with the spry menus. There is a fairly extensive forum on the subject (http://forums.adobe.com/thread/613494), and the conclusion is very definitely that the only way to display (on tap) the 2nd levels is by removing any top level links - quite a few of the forum users find this unacceptable. Very frustrating.
I see what you mean about user-agent detection. I would need to convert the pages to php, which I suppose I could do, but as you say, its a cumbersome solution. The vast majority of our hits from mobiles are from Apple products rather than Android, so for the time being I think we will have to compromise and go for iOS compatibility. The menus are just about usable on Android - just very fiddly.
Thanks also for the note about the invalid markup - I'll get that sorted,