Not all screens are made equal. Constraints of a smaller device often mean figuring out fresh ways to streamline navigation. In this tutorial, learn how collapsible elements can play a role in web design for smaller screens.
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.
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
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
.toggleClass() method. With this method, the
.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: