Make sure your website’s drop-down menus work on an iPad

Apple iPad
Getting those drop-down menus on your website to work on an iPad

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:

  1. Beach Stays
  2. Dogs on Holidays

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.

 

25 thoughts on “Make sure your website’s drop-down menus work on an iPad”

  1. That works to an extent but this does not allow you to link to a separate page from the that activate the drop-down menu. Such as “Choose A Beach” on “The Best Beaches” site.

  2. Your point is definitely true, however in our case we’re lucky as it doesn’t affect us, although others of course may find it an issue.

    On the Beach Stays website, we don’t want to link to a page when someone clicks on the button that activates the drop-down menu or anything that triggers another menu. We only require a link to work when someone selects a menu item that goes no further. We are operating our menus identically to that in windowing applications on computers whereby clicking on something that causes a menu to appear or a cascading menu to pop up does nothing. It’s the final menu item in the chain that causes something to happen.

  3. Yes, it’s unfortunate that the solution we have proposed doesn’t allow you to jump to a page when clicking on the top or title of the menu.

    But you do need to understand the conflict here. On a computer, a mouse hover and a click are two very different things, which is why you can associate two different actions for each. So you can expand the menu for a mouse hover and jump to a web page when you click anything – be in the menu title or the menu options which pop out.

    Now, on the iPad, there is no way to hover. As soon as you tap the screen, like you’re operating a mouse, it’s effectively doing a click. So our solution essentially converts a tap on the menu title (which would normally be a click), into a hover, and out pops the menu.

    One possible way to achieve what you want (although it would be more complex than our trivial solution) would be an arrangement such that when you tap on the menu title, it expands the menu, and then if you tap on the menu title again, it goes to the menu title’s page – i.e. just like clicking on the menu title directly on a computer.

    Personally, I think it is wrong to have a menu title that can be clicked on to go to a page if the menu also expands to several options below. Look at how the menu options operate on any computer application. You click on the menu title, and a menu pops out. You can only select from the options that expand out – you can’t get anywhere by clicking on the menu title. After all, it’s ambiguous for the menu title to lead anywhere when you have all those options expanding out. This is particularly evident when you see websites that have menus with clickable titles usually directing the title click to the first item in the pull-down menu. For example, on your flor360.com website, if you click on the menu title “Ocasiones”, it actually takes people to the first item in the pop-out menu, that being “Mostrar todos”. You basically have two things you can click on to get to that page. And people then have to work out whether there is any difference with clicking on the menu title of “Ocasiones” or going straight to “Mostrar todos”.

    1. Just seen this, as someone who is learning all the time, well: you really really helped me loads…..so thanks a lot. Very much appreciated as it’s exactly what I needed….

    1. Hi Jeyjoo, can you tell me how you made it in joomla? I have 3.3 end I saw that your menu is in the iphone seen in the left upper corner. I would like to have the same for viila-weiss.de

      looking forward for a hint. thanks a lot

  4. Android-based mobile devices didn’t seem to have a problem with drop-down menus as a tap gets interpreted a hover action in a suitable context. However, using the suggested fix doesn’t cause any problems with Android devices, so it doesn’t have any affect on them. Use with confidence!

  5. Thanks, I just hit this issue while learning about some web redesign concepts. So frustrating that one of the main methods for a web menu isn’t supported by Apple. For a company that is supposed to make things simple, you’d think they would include a method to translate this for their users, instead of breaking site navigation that uses common protocol. A great and easy solution!

    1. That’s a very good point. If you have several levels of menu items open, then tapping on the top one will certainly fold away all those secondary menus, but still leave the first drop-down menu list open. The only way to get rid of the first drop-down menu left open is to tap on the refresh/reload button so you get a new copy of the web page.

      Obviously our solution is very simple, but it has its limitations. Maybe someone can come up with some code which can be inserted into the “onClick” directive that first checks the status of the menu display and then performs the appropriate action based on that.

  6. Thanks for the article!

    We were having problems with a dropdown menu on iPads & found this article, but it didn’t quite fit our use case – our has a link inside it, so by returning true it would follow that link as normal. Also if someone then clicks (well, touches!) the again, we want it to follow the link that was there.

    To fix this, I did the following for touchscreen devices (requires jQuery):

    // Detect touch function based on http://stackoverflow.com/a/4819886
    function is_touch_device() {
    return true;
    return !!(‘ontouchstart’ in window) // works on most browsers
    || !!(‘onmsgesturechange’ in window); // works on ie10
    };

    // If touch screen device: Use a different method
    if (is_touch_device()) {
    // Dropdown nav items click
    $(“#navigation ul li.dropdown”).click(function(){
    // If it’s already shown, return true so link is followed
    if ($(this).hasClass(‘show’)) {
    return true;
    }
    // Clear any other shown items
    $(“#navigation ul li.dropdown”).removeClass(‘show’);
    // Show this item
    $(this).toggleClass(‘show’);
    // return false to prevent link click
    return false;
    });
    }

    Hopefully this helps anyone else having similar problems! I haven’t been able to test this on a huge range of devices, but should be fine :)

  7. It appears you’ve tried to do this using this bit of code:

    <a href=”#” rel=”nofollow”><span onClick=”return true”>Community Organisations</span></a>

    The “onClick” is in the wrong spot – it must be within the “a” tag as it defines what happens when someone clicks (or taps) on the item. So try using:

    <a href=”#” onClick=”return true” rel=”nofollow”>Community Organisations</a>

    And for the other menu items, the onClick=”return true” needs to go in the same place.

  8. @nickhood67 to use this in wordpress you can place it directly in the menu item’s ‘navigation label’ wrapped in a span tag – exactly like Travel Victoria’s code above, but without the ‘a’ tags (just the span part)… note, I find this solution works everywhere EXCEPT in IE – and while there are few I think using IE in a touch environment it is something I’d like to figure out…

  9. I don’t know how to place code in here – hopefully the moderator can fix my previous post to show the exact code I’m talking about…. ???? ;-) tx

Leave a Reply