Today, we’ll be looking at the “Top primary menu” in the Twenty Fourteen theme for WordPress,<\/a> which is a fixed, top-down menu.<\/p>\n I really like this style of menu, with one exception\u2014large menus often go below the fold on mobile. One solution we are going to to explore here is making the menu accordion<\/a> style on mobile.<\/p>\n Submenu items will be collapsed until the parent container is clicked\/tapped, and then they will expand.<\/p>\n If a submenu is expanded, then a subsequent click on the active parent item will navigate to that page.<\/p>\n I highly recommend you read the entire article and get an understanding of what is going on, but if you just want the code it is on GitHub<\/a>.<\/p>\n Since we are working with an existing theme, the HTML code is predefined. Below is the HTML code for the menu on the demo site:<\/p>\n [code language=”html”] The only PHP we will have is a quick WordPress plugin<\/a> file that uses wp_enqueue_script<\/a> to load a Javascript file.<\/p>\n [code language=”php”] function TwentyFourteen_Accordion_Menu_enqueue_scripts(){<\/p>\n \/\/ enqueue theme Javascript with jQuery as a dependency }<\/p>\n \/\/ add enqueue_scripts to wp_enqueue_scripts action ?> The Javascript is pretty straight forward as well. We will detect if we are on mobile by using the visibility of the menu toggle. If it is hidden, we are not on mobile and do nothing.<\/p>\n If we are on mobile, then we hide all submenus and add a click event to top level nav items containing a submenu.<\/p>\n When one is clicked (or tapped) it gets a class of “sub-menu-active” and the submenu is toggled on.<\/p>\n When the parent menu item is clicked again we check for the active class, and if it exists we return, which follows the link.<\/p>\n [code language=”javascript”] \/\/ if we are not on mobile (menu icon is hidden) show sub items and bail \/\/ top level nav click function \/\/ store parent li to variable \/\/ if sub menu does not exist in parent li \/\/ if sub menu is already active, bail \/\/ stop link click \/\/ store current sub menu in variable \/\/ slide up non-current sub menus \/\/ remove sub-menu-active class from all first level items except current parent li });<\/p>\n \/\/ slide down current sub menu });<\/p>\n \/\/ second level nav click function \/\/ store parent li to variable \/\/ if sub menu does not exist in parent li \/\/ if sub menu is already active, bail \/\/ stop link click \/\/ store current sub menu in variable \/\/ slide up non-current sub menus \/\/ remove sub-menu-active class from all second level items except current parent li });<\/p>\n \/\/ slide down current sub menu });<\/p>\n }<\/p>\n \/\/ load menu accordion on doc ready \/\/ load menu accordion on window resize Our menu is now completely visible above the fold on mobile.<\/p>\n This was a pretty quick and easy way to extend the functionality of the menu and is a great example of a WordPress plugin. We accomplish a very specific task with code we can reuse on multiple projects without modifying the theme code.<\/p>\nThe Problem<\/h3>\n
\n![\"twenty-fourteen-top-primary-menu-iphone\"](\"\/images\/twenty-fourteen-top-primary-menu-iphone.png\")
<\/p>\nThe Solution<\/h3>\n
Shortcut<\/h3>\n
HTML<\/h3>\n
\n<nav class=”site-navigation primary-navigation” id=”primary-navigation” role=”navigation”>
\n<h1 class=”menu-toggle”>Primary Menu<\/h1>
\n<a class=”screen-reader-text skip-link” href=”#content”>Skip to content<\/a>
\n<div class=”menu-main-menu-container”>
\n<ul class=”nav-menu” id=”menu-main-menu”>
\n<li class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-278″ id=”menu-item-278″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/”>Home<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-279″ id=”menu-item-279″><a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/”>Dropdown Menu<\/a>
\n<ul class=”sub-menu”>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-280″ id=”menu-item-280″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/first-child\/”>First Child<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-282″ id=”menu-item-282″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/second-child\/”>Second Child<\/a>
\n<ul class=”sub-menu”>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-283″ id=”menu-item-283″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/second-child\/a-grandchild-page\/”>A Grandchild Page<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-284″ id=”menu-item-284″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/second-child\/a-spoiled-grandchild-page\/”>A Spoiled Grandchild Page<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-285″ id=”menu-item-285″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/second-child\/another-grandchild-page\/”>Another Grandchild Page<\/a>
\n<\/li>
\n<\/ul>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-287″ id=”menu-item-287″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/third-child\/”>Third Child<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-281″ id=”menu-item-281″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/fourth-child\/”>Fourth Child<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-286″ id=”menu-item-286″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/a-parent-page\/second-child\/another-grandchild-page\/a-wee-little-baby-page\/”>A Wee Little Baby Page<\/a>
\n<\/li>
\n<\/ul>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-357″ id=”menu-item-357″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/default-page-templates\/”>Page Templates<\/a>
\n<ul class=”sub-menu”>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-368″ id=”menu-item-368″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/default-page-templates\/”>Default Page Templates<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-358″ id=”menu-item-358″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/default-page-templates\/contributor-page-template\/”>Contributor Page Template<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-359″ id=”menu-item-359″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/default-page-templates\/full-width-page-template\/”>Full width page template<\/a>
\n<\/li>
\n<\/ul>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-289″ id=”menu-item-289″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/html-elements\/”>HTML Elements<\/a>
\n<\/li>
\n<li class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-290″ id=”menu-item-290″>
\n<a href=”http:\/\/twentyfourteendemo.wordpress.com\/image-alignment-and-styles\/”>Image Alignment and Styles<\/a>
\n<\/li>
\n<\/ul>
\n<\/div>
\n<\/nav>
\n[\/code]<\/p>\nPHP<\/h3>\n
\n<?php
\n\/**
\n* Plugin Name: TwentyFourteen Accordion Menu
\n* Description: Adds accordion functionality to the Top primary menu in the TwentyFourteen theme on mobile
\n* Version: 1.0
\n* Author: Advice Interactive Group
\n* Author URI: http:\/\/www.adviceinteractivegroup.com
\n* License: GPL2
\n* Copyright 2014 Advice Interactive Group (email : info@adviceineractive.com)
\n*
\n* This program is free software; you can redistribute it and\/or modify
\n* it under the terms of the GNU General Public License, version 2, as
\n* published by the Free Software Foundation.
\n*
\n* This program is distributed in the hope that it will be useful,
\n* but WITHOUT ANY WARRANTY; without even the implied warranty of
\n* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
\n* GNU General Public License for more details.
\n*
\n* You should have received a copy of the GNU General Public License
\n* along with this program; if not, write to the Free Software
\n* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
\n*\/<\/p>\n
\n\/\/ http:\/\/codex.wordpress.org\/Function_Reference\/wp_enqueue_script
\nwp_enqueue_script( ‘TwentyFourteen_Accordion_Menu’, plugins_url( ‘\/js\/TwentyFourteen_Accordion_Menu.js’ , __FILE__ ), array(‘jquery’), false, true );<\/p>\n
\n\/\/ http:\/\/codex.wordpress.org\/Plugin_API\/Action_Reference\/wp_enqueue_scripts
\nadd_action( ‘wp_enqueue_scripts’, ‘TwentyFourteen_Accordion_Menu_enqueue_scripts’ );<\/p>\n
\n[\/code]<\/p>\nJavascript<\/h3>\n
\nfunction TwentyFourteen_Accordion_Menu(){<\/p>\n
\nif ( jQuery(‘#primary-navigation .menu-toggle’).is(‘:hidden’) ){
\n\/\/ show sub menus
\njQuery(‘#menu-main-menu ul.sub-menu’).show();
\nreturn;
\n} else{
\n\/\/ hide sub menus
\njQuery(‘#menu-main-menu ul.sub-menu’).hide();
\n}<\/p>\n
\njQuery(‘#menu-main-menu > li > a’).click(function(e){<\/p>\n
\nvar parent_li = jQuery(this).parent(‘li’);<\/p>\n
\nif ( !jQuery(‘ul.sub-menu’, parent_li).first().length ) {
\nreturn;
\n}<\/p>\n
\nif ( parent_li.hasClass(‘sub-menu-active’) ){
\nreturn;
\n}<\/p>\n
\ne.preventDefault();<\/p>\n
\nvar current_submenu = jQuery(‘ul.sub-menu’, parent_li).first();<\/p>\n
\njQuery(‘#menu-main-menu > li > ul.sub-menu’).not(current_submenu).slideUp(function(){<\/p>\n
\njQuery(‘#menu-main-menu > li’).not(parent_li).removeClass(‘sub-menu-active’);<\/p>\n
\ncurrent_submenu.slideDown(function(){
\n\/\/ add sub-menu-active to current parent li
\nparent_li.addClass(‘sub-menu-active’);
\n});<\/p>\n
\njQuery(‘#menu-main-menu ul.sub-menu > li > a’).click(function(e){<\/p>\n
\nvar parent_li = jQuery(this).parent(‘li’);<\/p>\n
\nif ( !jQuery(‘ul.sub-menu’, parent_li).first().length ) {
\nreturn;
\n}<\/p>\n
\nif ( parent_li.hasClass(‘sub-menu-active’) ){
\nreturn;
\n}<\/p>\n
\ne.preventDefault();<\/p>\n
\nvar current_submenu = jQuery(‘ul.sub-menu’, parent_li).first();<\/p>\n
\njQuery(‘#menu-main-menu ul.sub-menu > li > ul.sub-menu’).not(current_submenu).slideUp(function(){<\/p>\n
\njQuery(‘#menu-main-menu ul.sub-menu > li’).not(parent_li).removeClass(‘sub-menu-active’);<\/p>\n
\ncurrent_submenu.slideDown(function(){
\n\/\/ add sub-menu-active to current parent li
\nparent_li.addClass(‘sub-menu-active’);
\n});<\/p>\n
\njQuery(document).ready(function($) {
\nTwentyFourteen_Accordion_Menu();
\n});<\/p>\n
\njQuery(window).resize(function(){
\nTwentyFourteen_Accordion_Menu();
\n});
\n[\/code]<\/p>\nSummary<\/h3>\n
![\"twenty-fourteen-top-primary-menu-accordion-iphone\"](\"\/images\/twenty-fourteen-top-primary-menu-accordion-iphone.png\")
<\/p>\n