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).
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.
Once you’ve installed and activated Mobble, place this code in your header.php file.
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 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.
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.