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
Download The Plugin
- Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-vertical-mega-menu` folder to the `/wp-content/plugins/` directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- In the widgets section, select the jQuery Slick Menu widget and add to one of your widget areas
- Select one of the WP menus, set the required settings and save your widget
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.
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:
Enter the text that you would like to use for the jquery slick menu tab.
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.
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.
Check this option to automatically close any open menus when the user clicks anywhere in the browser
The speed at which the sliding menu will open/close
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.
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:
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”
Open the menu with the default link text “Click Here”
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
Download The Plugin
If you liked the slick menu widget you may also like:
Create floating, sticky tabs with slide out menus.
Add sticky or floating, slide-out, customisable contact forms to any widget area.
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.
We develop & support all of our plugins for free. If you use this plugin and find it useful please consider a donation as a token of your appreciation
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
Widget in edit mode
Widget Options For Locations of Slick Menu Tab