Jon Weatherhead

Make your site navigation menu mobile-ready. When the threshold is reached, the targeted menu will collapse into a hamburger menu.
This plugin is a zero-dependency refresh on Mean Theme’s MeanMenu plugin. This means that it does not require jQuery.
Image by <a href="https://pixabay.com/users/geralt-9301/?utm_source=link-attribution" rel="nofollow ugc">Gerd Altmann</a> from Pixabay.
<h3>How To Use</h3>
The Mean Menu is configured with the WordPress Customizer in the menu section, and there are several options for customization.
<ul>
<li>Menu target A CSS selector to the closest container where the menu resides. Leave blank for an attempt at auto-detection with ul.menu (The WP default).</li>
<li>Menu anchor A CSS selector to the container where the mean menu will reside. If you’re unsure, try <code>body</code>.</li>
<li>Bar colour The background colour of the mean menu bar.</li>
<li>Menu colour The background colour of the expanded mean menu.</li>
<li>Menu close The symbol that will be used when the menu is expanded. This can be any unicode character or HTML entity.</li>
<li>Menu open The symbol that will be used when the menu is collapsed. This can be any unicode character or HTML entity.</li>
<li>Reveal position The justification of the mean menu state symbol.</li>
<li>Reveal position offset Horizontal offset applied to the mean menu state symbol. This is intelligently applied depending on the justification, and has no effect when centered.</li>
<li>Reveal colour The background colour of the mean menu state symbol.</li>
<li>Responsive threshold The viewport threshold of when the mean menu replaced the standard menu.</li>
<li>Nav push Vertical offset applied to the expanded component of the mean menu.</li>
<li>Show children Check this to include nested levels in the mean menu.</li>
<li>Expandable children Check this to allow nested levels to be expanded and collapsed. Otherwise, nested levels will be displayed by default.</li>
<li>Submenu open Requires expandable children. The symbol that will be used when menu children are collapsed.</li>
<li>Submenu close Requires expandable children. The symbol that will be used when menu children are expanded.</li>
<li>Remove attributes Remove classes and IDs from all elements of the default menu while the mean menu is active.</li>
<li>Hide elements A CSS selector to any elements that should be hidden while the mean menu is active.</li>
<li>Single Page Site Collapses the mean menu when a menu item is clicked.</li>
<li>Container display The CSS display type of the mean menu container. inline, block, flex, etc</li>
</ul>

Mean Menu Refueled

Make your site navigation menu mobile-ready.

Robert O'Rourke

Sometimes for mobile design or more generally small-screen design it can be beneficial to save space by using a dropdown for your navigation.
This plugin provides a way to display your custom menus as dropdowns either using a widget or a function call and can be used as an include in any theme.
<h4>Usage</h4>
If you are using the plugin with a theme you can use the function <code>dropdown_menu()</code> in place of calls to <code>wp_nav_menu()</code>.
The <code>dropdown_menu()</code> function takes the same arguments as <code>wp_nav_menu()</code> with the addition of three extras:
<pre><code><?php
dropdown_menu( array(

 // You can alter the blanking text eg. "- Menu Name -" using the following
 'dropdown_title' => '-- Main Menu --',

 // indent_string is a string that gets output before the title of a
 // sub-menu item. It is repeated twice for sub-sub-menu items and so on
 'indent_string' => '- ',

 // indent_after is an optional string to output after the indent_string
 // if the item is a sub-menu item
 'indent_after' => ''

) );
?>
</code></pre>
You can extend and alter the output of the dropdowns using the output filters available in the code.
There are also plenty of styling hooks like in the standard list type menus with the addition of classes for targetting items at a certain depth in the menu (<code>.menu-item-depth-1</code> for example) aswell the usual <code>.current-menu-item</code> and <code>.current-menu-ancestor</code> classes.
<h4>Filters/Hooks</h4>
dropdown_blank_item_text
<pre><code><?php
add_filter( 'dropdown_blank_item_text', 10, 2 );
function my_dropdown_blank_text( $title, $args ) {
 return __( '- Browse -' );
}
?>
</code></pre>
If you want to show the menu title as the blank item text use the follwing code:
<pre><code><?php
add_filter( 'dropdown_blank_item_text', 'dropdown_menu_use_menu_title', 10, 2 );
function dropdown_menu_use_menu_title( $title, $args ) {
 return '- ' . $args->menu->name . ' -';
}
?>
</code></pre>
dropdown_menus_indent_string
<pre><code><?php
add_filter( 'dropdown_menus_indent_string', 10, 4 );
function my_dropdown_indent_string( $indent_string, $item, $depth, $args ) {
 return str_repeat( '&nbsp;&nbsp;', $depth );
}
?>
</code></pre>
dropdown_menus_indent_after
<pre><code><?php
add_filter( 'dropdown_menus_indent_after', 10, 4 );
function my_dropdown_indent_after( $indent_after, $item, $depth, $args ) {
 return '-';
}
?>
</code></pre>
dropdown_menus_class
Use this if you find you get class name or CSS conflicts, for example with Twitter Bootstrap.
<pre><code><?php
add_filter( 'dropdown_menus_class', create_function( '$c', 'return "my-dropdown-menu-class";' ) );
?>
</code></pre>
dropdown_menus_select_current
Use this filter to stop the output of the <code>selected="selected"</code> attribute. Useful if you prefer to show the blank option on every page.
<pre><code><?php
add_filter( 'dropdown_menus_select_current', create_function( '$bool', 'return false;' ) );
?>
</code></pre>
<h4>Can I make sure this plugin is available to my theme?</h4>
If your theme requires this plugin to be available it will work as a simple include. Just place the plugin into your theme directory and include dropdown-menus.php from your functions.php file.
If you place the plugin folder into your theme’s directory you would use the following code in your functions.php file:
<pre><code><?php
if ( ! function_exists( 'dropdown_menu' ) )
 include( 'dropdown-menus/dropdown-menus.php' );
?>
</code></pre>

Dropdown Menus

Display your WordPress menus as a dropdown select box. Great for mobile designs.

Mean Menu Refueled vs Dropdown Menus