I have a website with a horizontal, drop-down menu. It shows great on a computer, but in my mobile devices (android and blackberry) the menu wraps and the drop-down boxes do not work.
Here is the site: http://www.homephysiciancare.com/index.html
Any suggestions would be greatly appreciated.
Spry drop-menus are invoked with a:hover or mouseOver triggers. These triggers don't work on Touch Screen devices because, well... they have no mouse.
If you want responsive menus that perform well in all devices, replace Spry with a more modern menu system. See links below for ideas:
Pop-Menu Magic2 by PVII (DW extension purchase)
jQuery Mega Menus
CSS3 Dropdown Menus
10 Responsive Menus
Thanks Nancy, I will look at those links.
What is confusing to me is that I have two other websites with this exact same SpryMenuBar and they both work fine in the different browsers and touch screen phones. All I did was copy and past the same files into the directory for this new site. Then I just changed the css to fit this site and I can't figure out what has gone wrong.
I figure I must be missing a file or a reference to a file, but for the life of me I cannot figure out what it is.
In Firefox on desktop, your drop menus are not working either.
You're not building a responsive site. Yet you have this in your meta tags which should probably be removed.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
Well, after spending so long looking at other dropdown menu options, I finally just started over with the one I had, and now it is working in all browsers and on my blackberry and android phone. I'll be checking it on an iphone in just a little bit.
I have no idea what I did wrong the first time and no idea what I did right this time, but I am so glad it is corrected!
Thanks to all of you for giving tips, advice and links I truly appreciate it!