How to Create Mobile Responsive Navigation: The Toggle

Responsive navigation comes in many forms. Brad Frost has, on a couple of occasions, covered the various different mobile navigation patterns. While there is no single correct answer to mobile responsive navigation, the best answer almost always depends on the context. In todays article, we’ll delve into how to create a toggle menu, as well cover situations where the toggle is optimal.

Mobile readers, or more astute desktop readers, may have noticed that the toggle is the mobile nav of choice here on CSSForge (and has been since v1).

Getting Started

First, we’ll need to download a couple of required files. jQuery Dropdown from Cory LaViska is a Bootstrap-inspired jQuery plugin that removes some dependencies and makes a few adjustments to optimize for the mobile experience.

Once you’ve downloaded the jQuery Dropdown plugin, place it in your WordPress theme directory and load it after the jQuery library in the head section of your site.

Mobble is a lightweight WordPress plugin that adds conditionals to detect a variety of mobile devices and tablets. Some purists may disagree with this approach, arguing that an additional plugin will outweigh the benefits of requiring the user to download only the correct navigation menu. The idea, though, is to get into the practice of using conditionals to serve only the relevant HTML, rather than using strictly media queries with display: none;. This approach can save mobile visitors a lot of load time, especially when it comes to conditionally loading sidebars, which often have a lot of images and advertisements.

The HTML

Once you’ve installed and activated Mobble, place this code in your header.php file.

<?php if( ! is_mobile() ) { ?>
  
    <nav id="navigation" class="site-navigation" role="navigation">
      <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav>
    
<?php } else { ?>
  
    <nav class="mobile-dropdown">
        <a href="#" data-dropdown="#dropdown-1" class="mobile-nav"><span class="mobile-tab pictogram">☰</span></a>
    </nav>
  
    <section id="dropdown-1" class="dropdown">
        <ul class="dropdown-menu">
            <li class="menu-item mobile"><a href="#">News</a></li>
            <li class="menu-item mobile"><a href="#">Snippets</a></li>
                <li class="menu-item sub-menu-item mobile"><a href="#">CSS</a></li>
                  <li class="menu-item sub-menu-item mobile"><a href="#">HTML</a></li>
                <li class="menu-item sub-menu-item mobile"><a href="#">jQuery</a></li>
                <li class="menu-item sub-menu-item mobile"><a href="#">PHP</a></li>
                <li class="menu-item sub-menu-item mobile"><a href="#">WordPress</a></li>
            <li class="menu-item mobile"><a href="#">Inspiration</a></li>
            <li class="menu-item mobile"><a href="#">Tools</a></li>
            <li class="menu-item mobile"><a href="#">Tutorials</a></li>
        </ul>
    </section>
    
<?php } ?>

Let’s take a look at what the above code does. On line 1, we’re using the Mobble-introduced conditional to tell the server if the device requesting the page is not a mobile device, then deliver the standard WordPress navigation menu; found on lines 3-5.

On line 7, we introduce the else statement, which tells the server to deliver our mobile navigation menu to all visitors that are on mobile devices.

Also take note of what we’re doing on line 11, with the data-dropdown attribute. This attribute is defining the ID of the section where the dropdown menu exists, so that our jquery.dropdown.js plugin can find it.

The CSS

The required CSS here is pretty simple, and is included in the jQuery Dropdown zip file. Most of the changes here will be personal preference, aesthetic changes.

.dropdown {
    position: absolute;
    z-index: 9999999;
    display: none;
}

.dropdown .dropdown-menu,
.dropdown .dropdown-panel {
    list-style: none;
    background: #FFF;
    border: solid 1px #DDD;
    border: solid 1px rgba(0, 0, 0, .2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    overflow: visible;
    padding: 4px 0;
    margin: 0;
    width: 100%;
}

.dropdown .dropdown-panel {
    padding: 10px;
}

.dropdown.dropdown-tip {
    margin-top: 8px;
}

.dropdown.dropdown-tip:before {
    position: absolute;
    top: -6px;
    left: 9px;
    content: '';
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #CCC;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    display: inline-block;
}

.dropdown.dropdown-tip.dropdown-anchor-right:before {
    left: auto;
    right: 9px;
}

.dropdown.dropdown-tip:after {
    position: absolute;
    top: -5px;
    left: 10px;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #FFF;
    display: inline-block;
}

.dropdown.dropdown-tip.dropdown-anchor-right:after {
    left: auto;
    right: 10px;
}

.dropdown.dropdown-scroll .dropdown-menu,
.dropdown.dropdown-scroll .dropdown-panel {
    max-height: 358px;
    overflow: auto;
}

.dropdown .dropdown-menu li {
    list-style: none;
    padding: 0 0;
    margin: 0;
    line-height: 18px;
}

.dropdown .dropdown-menu li > a,
.dropdown .dropdown-menu label {
    display: block;
    color: #555;
    text-decoration: none;
    line-height: 18px;
    padding: 3px 15px;
    white-space: nowrap;
}

.dropdown .dropdown-menu li > a:hover,
.dropdown .dropdown-menu label:hover {
    background-color: #08C;
    color: #FFF;
    cursor: pointer;
}

.dropdown .dropdown-menu .dropdown-divider {
    font-size: 1px;
    border-top: solid 1px #E5E5E5;
    padding: 0;
    margin: 5px 0;
}

Where should you use the toggle?

The toggle is an attractive, easy-to-implement solution to most mobile navigation needs. Whether on a blog or a corporate website, it can be a clean and professional-looking way to serve up navigation to mobile users.

In my opinion, the toggle shines most on sites with less than 12-15 menu items. Beyond that, it’s best to look into some of the other options, such as the select or the nav left flyout.

Jon Bellah

Jon is a Web Engineer at 10up. When he isn't tinkering and obsessing over code, Jon enjoys cycling, beer league hockey, and plotting world domination. You can find him on Twitter at @JonBellah.

You may also like...

Advertisement
  • guitahplayah

    Hi, Jon

    I use StudioPress mostly and I’m trying to get The Toggle to work but can’t figure out how to place the jQuery Dropdown plugin in the StudioPress Metro theme directory per your instructions. I’ve downloaded it; but, it appears to be in individual pieces. Can you clarify, please, how to accomplish that?

    Much thanks and appreciation,
    Doug in Mansfield, MA
    http://graphicsolutiongroup.com

    • JonBellah

      Doug,

      You can place the dropdown.js file in the themes /js/ folder. Then in your functions.php file, you can add:

      function enqueue_dropdown_script() {
      wp_enqueue_script( ‘dropdownjs’, get_stylesheet_directory_uri() . ‘/js/jquery.dropdown.js’ );
      }
      add_action( ‘wp_enqueue_scripts’, ‘enqueue_dropdown_script’, 20);

      • Douglas Arnold

        Hi, Jon

        I’ve done everything as instructed; but, can’t figure out where/how to place the header.php code (Parent theme? Child theme?); please advise. I’m really close; but, far away.

        Thank you, Doug
        http://graphicsolutiongroup.com

        • JonBellah

          To add it to your header in Genesis, you’ll want to add the code as a function and hook it into the theme.

          You can either hook it after the header and then position: absolute; it where you want it or you can replace the entire header (which I have an article about here: http://www.cssforge.com/2012/12/genesis-custom-header-for-multiple-page-layouts-and-templates/ )

          To hook the code into the theme, without replacing the header, you can do this:

          function add_dropdown_header_code() { ?>
          // Add the menu code here
          < ?php }
          add_action( 'genesis_after_header', 'add_dropdown_header_code' );

          (remove the space between the < and the ? in < ?php. Disqus was parsing it out)

          • Douglas Arnold

            Jon,

            (This Disqus Forum is stripping out code making it impossible to get this right.)

            ====

            When I code that in Dreamweaver, it give me the error:

            There is a syntax error in line 3. Code hinting may not work until you fix this error.

            Here’s what I coded per your last direction:

            function add_dropdown_header_code() { ?>

            // Add the menu code here

            <?php }

            add_action( 'genesis_after_header', 'add_dropdown_header_code' );

            I do NOT want to replace the header.

            Please advise and thank you,
            Doug

          • JonBellah

            You need to replace “// Add the menu code here” with the actual menu code from the post above. Also, see my edit to my previous comment with the updated code.

          • Douglas Arnold

            Jon,

            My site crashed. I apologize; I can’t get this to work. I am not a php person. Ready to give up.

            Doug

          • JonBellah

            Last shot, I guess:

            In your functions.php, place this:

            function add_dropdown_header_code() { ?>

            News

            Snippets

            CSS

            HTML

            jQuery

            PHP

            WordPress

            Inspiration

            Tools

            Tutorials

            < ?php }
            add_action( 'genesis_after_header', 'add_dropdown_header_code' );

          • Douglas Arnold

            Jon,

            Trying to resolve this via Disqus is really frustrating; Disqus is not the proper forum to do this. Can we try this via email?

            Thank you, Doug

          • JonBellah

            Haha, no it’s not exactly ideal for code… but, I love it for pretty much everything else. It’s a trade-off.

          • Douglas Arnold

            Jon,

            This isn’t working for me. Thank you anyway. I’ll have to try something else. It would have been nice; but, it’s fighting me every step of the way. No fun.

            Doug

          • JonBellah

            Doug,

            Sorry you couldn’t get it working. Wish there was more I could do to help.

          • Douglas Arnold

            It’s ok, Jon.

            I wish StudioPress had this stuff standard…

            Namasté, Doug