Mobile Navigation Tutorial: Part 1

Last night, I had the pleasure of being asking to speak at a local Philly ‘burbs WordPress Meetup in West Chester. My presentation focused on the future of CSS and what new features to keep an eye on as they gain more and more support across browsers and users. After the presentation, I got to talking with Tom and Marguerite about mobile navigation structure. Marguerite was a little intimidated about writing her own Javascript but I assured her that it wasn’t so hard.

This is a two part post. The first set of code, below, focuses on getting the menu on a WordPress site to show/hide when clicking a button. The second part of the series will be a little more advanced and focus on how to handle multiple menu depths. But first, lets start with the basics. Here is a quick codepen example of the code below.

HTML / WordPress Code


<a id="show_menu" class="button icon icon_menu show_menu" href="#"><span>Show Menu</span></a>
<nav id="menu_main" class="menu_main" role="navigation">
    <?php wp_nav_menu( array( 'menu' => 'main', 'menu_class' => 'list_styled list_primary_nav clearfix', 'container' => '' ) ); ?>
</nav>

The code above is a pretty standard example of code I would use for a main navigation element in the main <header> section of a page. The first element is the button we will be targeting in the Javascript and for the user interaction. It’s good to assign an ID to this element for JS performance reasons. Next is the WordPress menu function calling a menu in the menu manager with the name “main.” This is wrapped in a <nav> with an ARIA role of “navigation” for greater accessibility.

jQuery


jQuery( '#show_menu' ).on( 'click', function( e ){
    
    var el = jQuery( this );

    el.next().slideToggle( 'fast' );

    el.toggleClass( 'active' );

    e.preventDefault();

} );

The code above is a jQuery click function for that targeted button. After the function call, we assign the clicked element to a variable called “el.” After that we take “el” find the “next” element in the DOM, which is the “nav” element, and run slideToggle on it. The function slideToggle is great because it handles the state of the element for you. If the menu is down, and the button is clicked it will slide up, and if the menu is up it will slide down. After that we come back to the original “el” and toggle a class of “active” on it. This way we can style the button different ways for when the menu is active and when its closed. Finally, the short line of “e.preventDefault,” prevents whatever default action that button may have originally caused. Event or e, is a parameter of the click function and stopping it from executing will prevent the browser from jumping to the top of the page due to the herf="#" attribute on the button.

So that’s how a basic menu can work in mobile. One of the great things about jQuery is that it reads really well. The functions that jQuery uses are really easy to understand regardless a user’s JS skill set.

So what do you think? Not too hard right? What patterns do you use when coding mobile menus?

posted in: Front End Development, WordPress
tagged: , ,

Comments are closed