By the end of 2011, Apple had sold more than 55 million iPads worldwide. In many markets, sales of the iPad represented over 70% of tablet computer purchases. Therefore it is important to make sure your website is fully functional when used on an iPad.
If you don’t have an iPad, one of the first things you can do is to view your website using the Safari web browser which is what iPads use by default. Safari is available for Windows, Linux and comes standard on Macs. You can download Safari for free.
Unfortunately, using Safari on your PC or Mac isn’t quite the same as using it on an iPad. One of the reasons is that “hover” events in HTML/CSS cannot be performed on an iPad. A hover event occurs when you hover your mouse over something, without clicking, causing an action, such as a menu to drop down. Interestingly, Android-based tablet computers emulate the hover action by allowing you to tap on the area which would cause something like a menu to drop down. This tapping is ignored on iPad and other Apple mobile devices.
So if you have a website which uses a standard HTML/CSS drop-down menu (constructed using HTML list elements such as <LI>) and it relies on the “hover” event to make the menu items reveal themselves, then it probably won’t work on an iPad.
There are many solutions which make the iPad behave like an Android-based tablet whereby clicking on a button will emulate a “hover” and display the full drop-down menu. Some solutions use JavaScript while others use code to try and detect if you’re using an iPad and work around it. There are many ways to accomplish this, however we began a quest to discover the quickest and simplest method of getting those drop-down menus to work on an iPad, and the solution ended up being trivial.
To make a drop-down menu appear when someone taps on the menu button, all you need to do is add
onClick=”return true”
to the “A” tag within any list item (such as <LI>) that triggers a menu to pop up. This works for cascading menus as well.
This simple workaround has no affect on people using web browsers on desktop or laptop computers – it just forces the menu to pop up on an iPad when someone taps on the menu button, which is equivalent to a click.
We have verified this all works on a couple of websites we manage that use HTML/CSS drop-down menus:
Originally, the drop-down menus on those sites failed to operate on an iPad due to the missing “hover” functionality, making it impossible to access the hidden menu items and forcing people to go through the tedious routine of returning back to the home page to access an index of the website’s contents. Once we explicitly defined a click action to emulate a hover, suddenly those drop-down menus began working (when you tap on them) just like on a desktop computer!
Due to the popularity of iPads, it is important to make sure all parts of your website work correctly on them, including those HTML/CSS drop down menus which are becoming quite popular nowadays.
Leave a Reply