Plugin Directory

Test out the new Plugin Directory and let us know what you think.
!This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

WordPress CSS Drop-down Menu

Use WordPress' nav menu system to create left/right widget flyouts, with support for Superfish

  • Upload the 'wordpress-css-drop-down-menu' folder to the /wp-content/plugins/ directory or install it from WordPress.org's Plugin directory inside your WordPress installation.
  • Activate the plugin through the 'Plugins' menu in WordPress
  • Add the required code to header.php in your WordPress theme
if (class_exists('CSSDropDownMenu'))
     $myMenu = new CSSDropDownMenu(); 
     /* Extra options here, like so: $myMenu->orientation="top"; */ 

You can place the above code anywhere in your theme, not just the header. Options available to you are:

$myMenu->orientation - Values are 'top', 'right', 'left' - default is 'top' $myMenu->name - WordPress menu id, slug, or name $myMenu->container_class - the class that is applied to the container $myMenu->theme_location - The location in the theme to be used (defined via register_nav_menu) $myMenu->menu_class - CSS class to be used for the ul element which forms the menu

These are a subset of the options given here: http://codex.wordpress.org/Function_Reference/wp_nav_menu

  • Or, add a sidebar to your theme if you don't already have one

If you want to show the widget in the header of your theme, add a sidebar to your header.php file and update your functions.php file to add a new sidebar there.

PHP for your sidebar.php file in your WordPress theme:

<?php if ( function_exists ( dynamic_sidebar('menu') ) ) : dynamic_sidebar ('menu'); endif; ?>

Example PHP for your functions file:

if ( function_exists ('register_sidebar')) { 
    register_sidebar( array(
        'name' => __('Menu', 'menu'),
        'id' => 'menu',
        'description' => __('Shows a dropdown menu in the header.', 'menu'),
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => ''
    ) );
  • The plugin defines its own menu.css in your theme's header. If you have your own menu.css file in your theme folder the plugin will check for that and load that for you automatically. It may be easier to simply copy across menu.css from the plugin folder and use that as the basis for your own. Or, browse the internet for unordered CSS list menu styles. Stu's site is a good start.

  • You can also activate the JS addon plugin to use Superfish javascript. This plugin uses its own Superfish CSS which you can find in the plugin js/superfish directory. It has been modified for use with WordPress. Place superfish.css into your own theme folder to avoid having your CSS overwritten on a plugin update! It's also possible to use other Superfish menu variants but you will need to edit and include them yourself using functions.php in your theme folder. Please also note that right/left widget items won't work with this menu type installed right now.

  • If you get 'broken image links' in IE it's because the background dropdown images in your menu.css file are set to Stu's original ones. You will need to change these.

Requires: 3.0 or higher
Compatible up to: 3.3.2
Last Updated: 5 years ago
Active Installs: 1,000+


5 out of 5 stars


Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

0,1,0 0,1,0
75,4,3 100,1,1 40,5,2 100,1,1 100,1,1 50,2,1
0,2,0 100,2,2 40,5,2
0,4,0 50,2,1
100,1,1 100,1,1