How to Add Collapsible Elements to a Mobile Menu

Simply because of the confines of a smaller device, mobile menus can’t show all navigational items. For large sites, however, this can pose a challenge. One way to circumvent this is by adding collapsible elements to your mobile menu items.

Providing good navigation and resources for mobile users is essential for good user experience. While it is easy to find screen real estate for navigational elements in desktop browsers, designing for mobile gets challenging. One way to fit the essential elements is by using collapsible lists and in this tutorial, we'll show you how to build a collapsible mobile dropdown menu using Bootstrap.

Getting Started

Before building the structure, first, we need to place the Bootstrap link in our project. The below links include the Bootstrap CSS, Javascript and JQuery code. Copy and paste the code below and place it in the head section of your HTML file:

HTML

We have a header navigation bar with a sample logo and a hamburger menu. Inside the menu, there are 4 main menu items. The ones with dropdown are in a div container and a ul element inside the div container. All the dropdown links are list items with a plus sign on the right to indicate that they hold more items inside. The important thing to keep in mind here is that all the dropdown menus have a class of .mobile-tab. We'll be selecting this class name in the Javascript code, later on, to make the menu open and close. Right now, nothing happens when the plus sign is clicked on.

CSS

When you look at the first lines of the CSS below you'll notice that the dropdown menus (.mobile-menu ul) are set to display:none. The menu list items will initially be invisible and will be visible when the menu opens. The open menu has a class of .open and in the next section, we'll create an .open class with a Javascript function. Next, we add the plus sign for the dropdowns by selecting the dropdown menu class .tab and adding the content: '+' rule using ::after pseudo-class. Just like with the .open class, we'll create an .active class using Javascript so that when the menu is opened, the plus sign will turn into a minus sign indicating the menu can be collapsed by clicking on the minus sign.

Javascript

Now that we have both the structure and the styling ready, we can add the Javascript code. Below, we have two functions. The first one controls the mobile menu and the second one controls the dropdown menu. Both functions have a .toggleClass() method. With this method, the .hidden and .active class names are parameters. If the element selected by already has the class, then that class is removed; if an element does not have the class, then it is added. We toggle the hidden and open classes this way:

And there it is. Check out the JSFiddle example below to see how it works before committing to its use: