The current trend of developing apps for iOS and Android devices has taken the smartphone world by a wave. Thanks to the innovative tools and methodologies that make it feasible for developers to create applications that can run flawlessly on multiple mobile platforms. With the sole aim of providing a fabulous user experience, mobile app developers have adopted a wide suite of techniques that have delivered proven results in the past. The way an app is designed has a huge impact on how the targeted users will be embracing it. Since everything on a mobile device mainly revolves around taps, it’s the responsibility of app designers to ensure that their apps are easy to navigate and use. One of the most talked about features in iOS and Android applications is the Drop down menu. This blog of mine talks about implementing fully-responsive Drop down menus in apps that are specially designed to run on iOS and Android powered gadgets including smartphones, smart tablets and many more.

What’s bothering iOS/Android app designers when it comes to including Drop-down menus?

Over the years, it has been observed that implementing drop down menus in iOS and Android can be absolutely problematic in case the application’s top-level menu item is also a clickable link. The main issue arises due to lack of a hover in touch-screen devices. In the absence of a hover, the user is forced to tap on the top-level menu item to view all the sub-items, thereby triggering the top link and making it impossible to access all the sub-menu items. For example, in case of iOS devices, things go smooth if the top-level menu doesn’t include a link because in such a scenario, on touching the top-level menu item, you can view the sub-menu items and select your preferences.

The rapidly growing urge for making Drop-down menus usable in iOS and Android powered devices

A drop-down menu serves as an excellent tool for including multi-level navigation within an iOS or Android application. While a majority of mobile app designing professionals are into the habit of designing a drop-down menu using unordered list, it is recommended to focus on making the menu usable/intuitive on devices with smaller screens and the ones which don’t contain a cursor. The term ‘usable’ here refers to ability of using hyperlinks available on parental anchors, followed by opening them via  double-tap. In addition to this, usable drop down menus are the ones which can be conveniently closed by tapping anywhere outside the drop-down menu area. 

Ditching native drop-downs for custom UI drop-downs

Although most of the iOS/Android applications are currently using native drop-downs, I would personally recommend you to opt for including custom UI drop-downs in your apps. As per a research, it has been found that selecting native drop-downs is a poor choice when it comes to incorporating smooth navigation within the mobile applications. The reason for this being that a native drop-down utilizes only about 50% of the device screen, making it difficult for users to get a detailed overview of all the sub-items available in a main category. In addition to this, the scroll area of native drop-downs is also small, resulting in less comfortable scrolling. One of the major issues encountered with native drop-down enabled apps is that the users often mistake the navigation for the search filtering options, thereby getting distracted to the fullest. On the contrary, a custom UI drop-down menu utilizes the entire screen making it feasible for the user to get a clearer picture about the elements included within the application. To put in simple words, as compared to the mere 5 items that can be displayed within a native drop-down menu, a custom UI drop-down can display up to 10 items all at once.

Choosing the right responsive navigation solution is necessary

When it comes to implementing responsive drop-down menus in iOS and Android applications, there are plenty of navigation solutions for you to choose from. Here are three of the most used techniques of adding a responsive drop-down menu in your mobile application:

1. Using media queries for implementation of a fully-responsive drop-down menu

2. Using HTML and CSS for ensuring simple drop-down navigation

3. Using a tiny jQuery plugin for adapting responsive drop-down navigation for touch-screen devices.

Using the following Javascript in your app can serve as an ultimate solution for all issues associated with the working of drop-down menus in iOS and Android applications:

if (/Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    jQuery('.main-navigation li.menu-item-has-children > a').click(function() {
        return (false);
    });
    var timeout = 449;
} else
    timeout = 7;
jQuery('.main-navigation li').hover(function() {
    var $parent = jQuery(this);
    var $dropdown = $parent.children('ul');
    $dropdown.show(0, function() {
        $parent.mouseleave(function() {
            // THIS FADE OUT DELAY IS IMPORTANT TO PREVENT RACE CONDITION IN ANDROID WHEN MENU IS STACKED
            var $this = jQuery(this);
            setTimeout(function() {
                $this.children('ul').fadeOut(7);
            }, timeout);
        });
    });
});

Final Thoughts

The basic idea of including a fully-functional drop-down menu in an iOS/Android app can turn to be bizarre problem if you aren’t aware about the right strategy to proceed ahead with the same. Here’s hoping after reading this post, a majority of your doubts regarding the functioning of drop-down menus in mobile apps would have been cleared.

This article was written by Addison Cohen, who is an iOS developer working with Appsted – iPhone development services provider. He loves sharing tech information and ideas on application programming.