Skip navigation
Currently Being Moderated

Menus for different operating systems

May 3, 2012 4:46 AM

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?

 
Replies
  • Currently Being Moderated
    May 3, 2012 5:02 AM   in reply to Streetwitch

    Got a link so we can take a look?

     

    Which exact version of Spry are you using? Version 1.6.1 or 2?

     
    |
    Mark as:
  • Jim Carpenter
    547 posts
    Apr 6, 2006
    Currently Being Moderated
    May 3, 2012 7:00 AM   in reply to Streetwitch

    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 class="MenuBarItemSubmenu">Home</a>

        <ul>

       <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>

        </ul>

      </li>

       <li><a class="MenuBarItemSubmenu">What is Ensemble</a>

    <ul>

    <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>

    </ul>

     

    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.

     

    Jim

     

    PS: make a backup before  you try this in case  you don't like the way it functions

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2012 10:29 AM   in reply to Jim Carpenter

    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.

     
    |
    Mark as:
  • Jim Carpenter
    547 posts
    Apr 6, 2006
    Currently Being Moderated
    May 3, 2012 10:33 AM   in reply to mhollis55

    Never able to get it to work is harsh. I have done so by removing a linked page of the top level spry menu, It has tested on iPods touchs, iPads, RIM and Android, so it can work.

     

    Jim

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2012 10:41 AM   in reply to Jim Carpenter

    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.

     

    -Mark

     
    |
    Mark as:
  • Jim Carpenter
    547 posts
    Apr 6, 2006
    Currently Being Moderated
    May 3, 2012 10:51 AM   in reply to mhollis55

    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.

     

    Thanks,

    Jim

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2012 12:30 PM   in reply to Jim Carpenter

    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).

     

    SpryWidgetBrowser.jpg

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2012 10:42 AM   in reply to Streetwitch

    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.

    http://detectmobilebrowsers.mobi/

     

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points