Tutorials - Responsive Drilldown Navigation Menu

Why should you use this?

I'm sure this will blow your mind, but a lot of people have smartphones. Even more surprising is that they use them to look at websites! In fact, according to StatCounter, more and more people are shifting towards using their smartphones instead of their desktop/laptop computers. As a result, we're seeing the web transitioning further to a responsive state, where a site has two different views for the same code base, both running seamlessly, independent on the type of device used to access said site.

These responsive sites are occurring more frequently and are replacing the traditional “mobile” websites, where an entirely different set of code and content is loaded. A few examples of sites employing the traditional “mobile website” method are Volkwagen, IGN, and YouTube. A few examples of responsive sites are Aptuitiv, Polygon, and Branch, the site you're on right now!

It can be tough to restructure a large site that contains a lot of navigation. A site with three levels of dropdown (or flyout, whichever you prefer) navigation typically does not work well in a mobile environment. This plugin is aimed at taming a large navigation menu and making it an easy task for a mobile user to navigate through a multi-level menu.

Requirements

Step One - The Set Up

First things first: get your files linked up.

<!doctype html>
<html>
<head>
    <title>My Super Awesome Website</title>
    <meta name="viewport" content="initial-scale=1.0,width=device-width" />

    <link href="/layout/css/styles.css" rel="stylesheet" type="text/css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="/layout/js/ap-drilldown-menu.js"></script>
    <script src="/layout/js/script.js"></script>
</head>
<body>

</body>
</html>

Easy enough!

Next, set up your navigation. In order to fully utilize the navigation plugin, you should have a couple levels of navigation. This isn't required, of course, but the plugin is intended at making multiple levels of navigation easy to use, so we'll create a couple levels for demonstration.

<!-- We need a toggle switch to handle the hiding and showing of the navigation. -->
<a href="#" class="ap-ddmenu-toggle"> <img src="images/toggle.png" alt="" /> </a>

<!-- The plugin requires that the top level nav has a wrapper div. -->
<div class="nav-wrap">
    <!-- Start the menu -->
    <ul class="menu">
        <li><a href="/">Home</a></li>
        <li><a href="http://branchcms.com" target="_blank">Branch CMS</a>
          <ul>
              <li><a href="#">Sub-navigation Link</a></li>
              <li><a href="#">Another sub-nav Link</a></li>
          </ul>
        </li>
        <li><a href="http://aptuitiv.com" target="_blank">Aptuitiv</a></li>
    </ul>
</div>

Good, so now your navigation is set up. Style it however you see fit. What we're really concerned about is when the screen width is that of a mobile size. So, to handle the styling for our mobile version of the navigation, we'll use a @media query.

Let's set up our desktop view, first.

/* A quick and dirty reset */
.menu, .menu ul, .menu li {
    margin: 0;
    padding: 0;
}

/* Menu styling */
.menu li {
    list-style: none;
    float: left;
    position: relative;
}

.menu li a {
    display: block;
}

.menu li ul {
    display: none;
    position: absolute;
    top: 100%; left: 0;
}

.menu li:hover ul {
    display: block;
}

.ap-ddmenu-toggle {
    display: none;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    background: #333;
}

This will make it look like a typical navigation menu instead of a regular list. Now, for the media query. For the sake of simplicity and ease of use, I tend to get my media queries from stephen.io/mediaqueries.

@media (max-device-width: 768px) {
    /* Your styles go here */
}

Now, we are targetting all devices that are a maximum of 768px wide when viewing the website. Of course, that doesn't do us much good if we aren't styling the navigation any differently for these devices. Let's change that.

@media (max-device-width: 768px) {
    .nav-wrap {
        display: none;
    }

    .ap-ddmenu-toggle {
        display: block;
    }

    .menu {
        position: relative;
    }

    .menu li:hover ul {
        display: none;
    }

    .menu li ul {
        position: absolute;
        top: 0;
        left: 100%;
    }

    .menu li {
        float: none;
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        /* We set the position to static so the child elements are positioned based on the top level. */
        position: static;
    }
}

Okay, so now our CSS is all set. As you've probably noticed, we override a few styles defined before we created the styles within the media query. Because we want our navigation to be functional on legacy browsers (I'm looking at you, IE8), we disable the hover state on <li> elements, fix the widths of all <li>s, and reposition the subnavigation <ul>s. We also show the toggle switch, so we can make the navigation show and hide.

Now we just need a way to make the navigation show when the toggle switch is clicked. That's where the plugin will come in.

Start by creating a Javascript file to invoke the plugin from. For this tutorial, I've created a script.js file, so I will be referring to this file by that name.

Within script.js, invoke the .ready() method on jQuery(document) call. Inside the closure for the .ready() method is where you'll initialize the plugin.

For example:

jQuery(function($){
    $('.navigation > ul').apDrilldownMenu();
});

Pretty simple, right? If your code is right and you have no syntax errors or CSS issues, then you should be good to go!

You can check out the options on the AP Drilldown Menu GitHub page, where the code is hosted.

If want to see an example of the navigation plugin in action, view this site on a mobile device or shrink the width of your browser window!