Simple menu plugin for WordPress

A simple drop down menu plugin using jQuery and CSS.

Usage

• Create a menu via WP Dashboard/Appearance/Menus/create a new menu.
• Use the name of the menu you just created in the “ssd-menu” shortcode somewhere in your site content.

[your-menu menu="Your Menu"]

Hows it done?

This plugin uses the WordPress wp_nav_menu() function to generate the menu unordered list. We then just add the element we want to use as the trigger. In this case a div with the id “your-drop”:

function your_simple_menu( $atts, $content = null) {
    $m_name = $atts['menu'];
    $defaults = array(
	'theme_location'  => '',
	'menu'            => $m_name,
	'container'       => 'div',
	'container_class' => 'your-simple-menu',
	'container_id'    => '',
	'menu_class'      => 'p-menu',
	'menu_id'         => '',
	'echo'            => false,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
        );
    register_nav_menus( array($m_name => $m_name) );
    $output = '<div id="your-drop">Go To...</div>';
    $output .= wp_nav_menu( $defaults );
    
    return $output;
 }

Then we use CSS & jQuery to style and animate the menu unordered list:

CSS

#your-drop{
  background: url(icon.png) 95% 50% no-repeat;
  background-color: #343434;
  line-height: 34px;
  width: 280px;
  max-width: 100%;
  padding: 0 10px 0 10px;
  color: #FFF;
  cursor: pointer;
 }
.your-simple-menu{
   display: none;
 }
.your-simple-menu .p-menu{
   display: inline-block;
   max-width: 100%;
   margin: 0 0 5px 0;
   padding: 0;/*and so on*/
 }

jQuery

$("#your-drop").on("click", function () {
        $(this).toggleClass("active");
        $(".your-simple-menu").slideToggle();
    });

Limitations

At present the menu can only really handle a single level of navigation & a single instance per page. But with a few modifications to the CSS & jQuery it could easily be adapted. Feel free to adapt this plugin however you like.

I offer no support for this plugin and accept no liability for its use.