Design Chemical

Updated September 26th 2011

The jQuery Slick Menu plugin creates sticky, sliding menus from any custom WordPress menu available with WordPress 3.0. Using this plugin you can add links/menus for items that you want to highlight and always be available for your users.

The plugin can handle multiple slick menus on each page and the location of each widget menu can be easily configured using a combination of the “location” and “offset” options available in each slick menu’s widget control panel.

The menu plugin also includes the feature to open/close the sliding menu panel using external text links, which can be added to the content using shortcodes.

Also Check Out Our Premium WordPress Plugins:

• WordPress Social Stream
• WordPress Social Network Tabs
• WordPress Social Share Buttons
• WordPress Top Social Share Posts

jQuery Slick Menu Demo

http://designchemical.com/lab/demo-wordpress-jquery-slick-menu-plugin/

Download The Plugin

Download JQuery Slick Menu Widget 1.3.2 (20,810)

Installation

1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-vertical-mega-menu` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. In the widgets section, select the jQuery Slick Menu widget and add to one of your widget areas
4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use the slick menu plugin you will need the following:

A WordPress custom menu

Either use an existing menu or set one up via the menu option in WordPress admin.

Widget area

Either use an existing widget area in your WordPress theme or create a new widget area. The location is not critical since the plugin automatically removes the menu from the widget location in the page and sets it according to the location and offset settings.

For more information on how to add a new widget to your WordPress theme see our follow up WordPress tutorial – “Adding A Widget Area To Your Theme Files”.

Create Your Slick Menu

To create your sticky sliding menu go to the widget admin page and drag the “jQuery Slick Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The widget has several settings, which can be used to customise your slick menu:

Tab Text

Enter the text that you would like to use for the jquery slick menu tab.

Location

This is the location of where you want the slide out menu to appear in the browser window. There are 6 different locations to choose from:

• Top Left – menu slides down from the top of the browser window
• Top Right
• Bottom Left – menu slides up from the bottom of the browser window
• Bottom Right
• Left – menu slides out from the left of the browser window
• Right – menu slides out from the right of the browser window

See the jquery slick menu demo page for examples.

Offset

The number of pixels that the slick menu is positioned from the edge of the browser window – .e.g if location is “Top-Left” and offset is 50 the menu will be positioned along the top, 50 pixels from the left of the browser edge.

Auto-Close Menu

Check this option to automatically close any open menus when the user clicks anywhere in the browser

Animation Speed

The speed at which the sliding menu will open/close

Skin

12 different sample skins are available to either use “out of the box” or to use as examples of css for styling your own slick menu. 4 of the skins match those used in the Slick Contact Forms Plugin.

Note: For the actual menu styling inside the slick box the menu will follow your theme file styles. The skins will style the slider tab and the slick box.

Shortcodes

The plugin also includes the ability to open and close the sliding menu using external links, embedded in your website content. These can be added to the page using shortcodes:

[dcsl-link]

Default link, which will toggle the sliding menu open/closed with the link text “Click Here”

[dcsl-link text="Open Menu"]

Toggle the sliding menu open/closed with the link text “Open Menu”

[dcsl-link action="open"]

Open the menu with the default link text “Click Here”

[dcsl-link action="close"]

Close the sliding menu tab with the default link text “Click Here”

[dcsl-link action="close" text="Close Sliding Menu"]

Close the menu tab with the link text “Close Sliding Menu”

Frequently Asked Questions

For a complete list of questions and answers please check out our jQuery Slick Menu Frequently Asked Questions section.

Many issues that can crop up with installing and using the plugin with different themes have been covered in our comments section. Please check previous comments for further information/tips.

Demo jQuery Slick Menu

http://designchemical.com/lab/demo-wordpress-jquery-slick-menu-plugin/

Download The Plugin

Download JQuery Slick Menu Widget 1.3.2 (20,810)

If you liked the slick menu widget you may also like:

WordPress Floating Menu Plugin

Create floating, sticky tabs with slide out menus.

WordPress Slick Contact Forms Plugin

Add sticky or floating, slide-out, customisable contact forms to any widget area.

Feedback

If you find this plugin useful please take the time to rate it at wordpress.org.

If you have any problems, suggestions on how we can make the plugin better or would like help creating a new skin for the slick menu let us know via comments, email or our online contact form.

Updates

Version 1.3.2 – 26th September 2011

• Update: update to jquery plugin jquery.slick.2.1.js which includes callback support

Version 1.3.1 – 13th September 2011

• Fixed: Validation error

Version 1.3 – 15th June 2011

• Added: Shortcodes for adding external text links to open and close the sliding menu panel
• Added: 4 additional skins to match the Slick Contact Forms WordPress Plugin.

Version 1.2 – 31st May 2011

• Fixed: Bug with positioning left/right in Safari

Screenshots

Widget in edit mode

Widget Options For Locations of Slick Menu Tab

Tags: horizontal, jQuery, layout, menu, navigation, plugins, slider, vertical, widget, wordpress
Categories Wordpress Plugins 16449 Views