jQuery Drilldown Menu for Wordpress

Wordpress installation

In order to use jQuery Drilldown Menu for Wordpress, first thing you need to do is install this plugin:

1. Login into yout wordpress admin account
2. From menu go to Plugins - Add New - Upload
3. Select zip file you've downloaded and click Install Now

If you have any problems regarding plugin installation simply copy directory "createit-jquery-drilldown-menu" folder into "wp-content/plugins" directory of your wordpress installation.
More information can be found here (official documentation)

After successful plugin installation, plugin must be activated:

1. From menu go to Plugins - Installed Plugins
2. Locate "jQuery Drilldown menu" plugin and click "Activate"
3. That's it!

Before using actual widget or shortcode, we must make sure that we have at least 1 menu already created:

1. From menu go to Appearance - Menu
2. Create your menu and remember it's name - we will use it in widget or shortcode setup
3. More information can be found here (official documentation)

Plugin usage - widget

There are many ways you can embed menu to your website. One of them is called widgets. In order to use this options follow steps explained below:

1. From menu go to Appeareance - Widgets
2. Locate "jQuery Drilldown Menu" in "Available Widgets" section and drag&drop it to appropriate sidebar
3. Once activated, small arrow next to "jQuery Drilldown menu" should appear. Click it and change all the necessary settings:
   • Title - title for accordion
   • Select Menu - select one of your already created wordpress menus
   • Skin - accordion skin
   • Click or hover - activation method
   • Auto height - should menu automatically adjust height?
   • Animation speed - how fast should accordion collapse/expand
   • Animation type - how animation should look like
   • Breadcrumb position - where breadcrumb should be places:
     • Hidden - do not show search functionality
     • Top - show search input before accordion
     • Bottom - show search input after accordion
   • Breadcrumb start - first breadcrumb ('Home')
   • Search position - where search input should be placed:
     • Hidden - do not show search functionality
     • Top - show search input before accordion
     • Bottom - show search input after accordion
   • Search label - search label

After proper setup, an accordion should appear on your website.

Plugin usage - menu shortcode

Accordion menu can be easily embedded into any page or post. To use it, simply paste this code into your post (minimal setup):

[drilldown menu="Main"]
		

Available options are similar to widget's options (you can skip any of these and default values will be used instead):

• menu - select one of your already created wordpress menus
• skin - skin (default: minimal) - try classic-light, colorful or system
• event - activation method. Allowed: click or hover (default: click)
• heightAutoAdjust - should menu automatically adjust height?. Allowed: false or true. (default: true)
• speed - how fast should accordion collapse/expand. Allowed: slow, normal, fast (default: normal)
• easing - how animation should look like. Allowed: easeInOutQuint, linear, easeInOutQuad, easeOutBounce (default: easeInOutQuint)
• breadcrumb - where breadcrumb input should be placed. Allowed: '' (empty), top, bottom (default: '' ie. function disabled)
• startName - first breadcrumb (default: Start)
• search - where search input should be placed. Allowed: '' (empty), top, bottom (default: '' ie. function disabled)
• searchText - search label (default: Search)

Full shortcode:

[drilldown menu="Main" skin="minimal" event="click" heightAutoAdjust="true" speed="normal"
	easing="easeInOutQuint" breadcrumb="top" startName="Start" search="bottom" searchText="Search"]
		

Plugin usage - shortcode in layout

Sometimes you need to use shortcode inside your own template (not post area). In order to do that, use this code:

<?php echo do_shortcode('[drilldown menu="Menu"]'); ?>
		

Advanced

Skins

To create your own skin, follow these steps:

• copy any skin from plugin_dir/css/skins to plugin_dir/css/skins/MY_PLUGIN
• modify css and/or images - plugin will automatically add class name like skin-MY_PLUGIN
• that's it - widgets and shortcodes will autodetect your newly created skin

Any comments?

Did you find any bug? Or maybe see any feature that would be nice to have? Or maybe just wanna say "hi"? Mail us at [email protected], we'll be glad to talk to you!