menu control/navigation problem on iPad

[PPettit]

I'm working on a site that needs to be functional on both desktops and mobile devices. The only real problem I'm having so far is navigation. My boss wants me to use a drop-down style menu on the masterpage, but he doesn't like the look (and the style limitations) of the DropDownList control.

My first guess was to use the standard menu control. It produces behavior like this:
Desktop: hover over the menu control and it expands to show the other menu items.
Android phone: click on the menu control and it expands and stays open to show the other menu items.
iPad: click on the menu control and it expands to show the other menu items, but then immediately collapses before you can select one of the other items

I've looked all over and can't find a way to make the menu control stay open on an iPad. I've found lots of suggestions, but can't seem to make any of them work.

My next guess was to try a HTML/CSS list with LinkButton controls. This type of menu stays open on all the browsers I've tried, but I can't seem to work out a good way to pass the destination url of the button so that if I'm directed to my login page, I can continue on to the desired page after being authenticated.


Anyone have any suggestions or examples of something that would work? I'd prefer not to use third-party controls or javascript, but I would if there was no other way to accomplish what I'm after.

 

[jbenson001]

This is just one problem you are going to run into if you develop a web app for a desk top and also want to use it on mobile devices. If you want your app to work correctly on mobile devices, you will have to develop a separate app that is designed specifically for mobile devices. Your best bet, and what we use and many companies use for their mobile sites is JQuery Mobile. The good thing about using it, for one, is that you will have a "standard" looking mobile site. Also, you will have to ability to use JQuery code. The reality of mobile sites is that they will be javascript heavy. Another benefit is that you won't have to worry too much about cross device issues. It it works on one, it will most likely work on all mobile devices. Also, you have to take into consideration that you will have to scale your site for different screen sizes. What I mean is, one person may look at it on a phone, while another person will view it on an iPad. So you should scale your site accordingly. JQuery Mobile and HTML 5 with CSS will help with those issues.

 

[PPettit]

Thank for the reply. We were shooting for a single site with a browser/device-dictated style approach. It's turning out to be much more of a hassle than we had anticipated. The more I mess with this, the more I tend to agree with you about separate sites and alternate technologies.