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.
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 (14,042)
Installation
- 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
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 (14,042)
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.
Donate
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
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
total
twitter
facebook
google +1
linkedin
stumbleupon
digg
delicious
pinterest
reddit
I’ve tried this a couple of times over, and was really careful to follow the instructions step by step the second time around. The description and demos I see are exactly what I want but something is not right…
Nothing shows up at all on the homepage unless it is in the footer. Whenever anything does show up on some of the other pages it other appears on the right side of the screen on the side bar. It also shows up as a list, and not the tab. Am I doing something wrong or is there a problem I do not know about?
Hi,
The jQuery code to create the slide out tab is not in the page. Check your theme’s footer.php file and make sure that it contains the following code:
When I set bottom (right-left) for location, menu icon does not appear with Chrome. Don’t have a problem with other locations.
Hi,
Does not appear menu with the latest Chrome browser?
[...] s’avérer pratique dans de nombreux cas. Plusieurs autres versions spécifiques existent : WordPress Slick Menu Plugin, WordPress Slick Contact Form Plugin et Slick Social Share [...]
Thank you for this nice plugin. I’m getting some errors with w3 val. when I select a color style for tab.
If you have a solution, thanks in advance…
Line 58, Column 113: cannot generate system identifier for general entity “skin”
…query-slick-menu/skin.php?widget_id=3&skin=black” type=”text/css” media=”scree…
————-
Line 58, Column 113: general entity “skin” not defined and no default entity
…query-slick-menu/skin.php?widget_id=3&skin=black” type=”text/css” media=”scree…
————-
Line 58, Column 117: reference not terminated by REFC delimiter
…y-slick-menu/skin.php?widget_id=3&skin=black” type=”text/css” media=”screen” …
————-
Line 58, Column 117: reference to external entity in attribute value
…y-slick-menu/skin.php?widget_id=3&skin=black” type=”text/css” media=”screen” …
————-
Line 58, Column 117: reference to entity “skin” for which no system identifier could be generated
…y-slick-menu/skin.php?widget_id=3&skin=black” type=”text/css” media=”screen” …
————-
Line 58, Column 112: entity was defined here
…jquery-slick-menu/skin.php?widget_id=3&skin=black” type=”text/css” media=”scre…
Hi,
Its caused by the ampersand. Update to version 1.3.1
I updated to new version and errors errors went away. Thanks a lot…
Im having issue when I view my website on iphone. It looks perfect in computer but in iphone the slider is not positioned properly as it shows the whole thing. any advise please. i am using thesis theme, is that the problem, because I tried using twenty ten and it works fine both for computers and iphone.
Hi,
Then it obviously appears to be a theme issue. Unfortunately I have no way of checking the plugin on an iPhone so unable to help. Maybe check with the theme authors
hi again
im facing another issue with the plugin
im using ajax data in panel and there is a dropdown list inside but when i select other otions from dropdown the plugin prevents changing the selected value and still i get the old value!!! when i comment the plugin initializer it works!!! even plugin prevents event binding to dropdown!!!
i like your plugin so please help me out to use it
<script type="text/javascript"> var $jq = jQuery.noConflict(); var docWidth = $jq(document).width(); function loadContent(){ var glid = $jq('#ddlGalleries :selected').val(); console.log(glid); } $jq(document).ready(function() { $jq('#ddlGalleries').change(function(){ loadContent(); }); //$jq('#divGalleries').dcSlick({ // location: 'bottom', // align: 'left', // offset: ((docWidth / 3) + 100) + 'px', // speed: 'slow', // tabText: 'Galleries', // autoClose: false //}); }); </script>Is this for the WordPress Slick Menu Plugin?
yes, actually im having the issue with both the versions 1.1 & 1.3
Do you have a link to the site?
http://chizari.com/galleries.php
actually plugin avoids any jquery activity! if you use JavaScript methods you can fire some methods bu again the value of drop-down is not changing!!!!
Actually this isnt the WordPress plugin so I can understand now why you are editing the jquery
You need to bind the change event on the select list. Change the select list jquery from:
$jq('#ddlGalleries').change(function(){ loadContent(); });to:
$jq('#ddlGalleries').live('change',function(){ loadContent(); });still i get the same value!!! can please tell me where can i get the wordpress plugin??
hi, thanks for your cool plugin.
actually i have some issues with using the plugin! i have a content page which is loading via ajax and the plugin works perfect with the caller panel but when i click on other links because the page location is not changing the plugin is still there (first issue). and the other one is when i come bach to that panel again there is secound instance of the panel!!!!! is there anyway to unload the plugin when it is not needed?!?!?
hi,
Easiest way is to create a theme page fr your target page that doesnt contain the widget area
tnx, i figured it out
I notice here on this very page you have a contact us button, but the text is vertical instead of horizontal. How can I do this with your plugin?
Hi,
you need to create the vertical text as an image and then apply it as a background to the tab using CSS
Hi,
I am loading ajax content to your slick menu. However it setups menu before it has ajax content. Is there any possibility to setup slick menu once again after loading ajax content?
Hi,
The problem will be because the AJAX content needs to bind in order to be useable by other elements. Are you able to load the content directly into the slick menu container?
Shit sorry guys. Got it working. Like an absolute idiot I didn’t think of this:
I am on the new version of WP. This has a dashboard toolbar displaying on the webpage when you’re logged in – this hides the Jquery Slick Menu. Also bottom didn’t work because of downloads tab.
When I set it to “right” it worked.
Ignore all my comments, sorry for the time waste!
Hi,
No Problem. Glad you managed to figure it out
Hey I mailed a second ago but I left the comment in the wrong place. Apologies !
I meant to also say:
I have tried this Jquery Slick Menu in a new widget area as well as the regular sidebar one
Widget area created OK
Plugin installed and activated OK
Custom menu OK (I have been using custom menu on site anyway)
Thanks and sorry for cock up
Also, wouldnt it be better to combine location and alignment in 1 variable?
top_left, top_right, bottom_left, bottom_right, left and right?
As now the alignment has no effect when location = left or right. (Unless I’m missing something)
For the WordPress version it is combined into one variable. For the jQuery plugin though the offset does have an effect on all locations. With left/right the offset is the number of pixels from the top of the browser window
Left and right don’t seem to display in safari. Is there a fix?
Hi – just uploading version 1.2 now – this will fix the Safari bug
Thanks for the quick reply, great. Just wondering, why is there a difference between the wordpress version (many styles) and the simple jquery version (no styling available)? I would assume that this could all be done via js as well (no php required).
That is just an issue of styling. The jQuery plugin version is basically just that – a jQuery plugin.
For a WordPress plugin it tends to have to be more “packaged” and include styling options
The jquery mega menu adds a bullet to the top left of the menu. I tried adding list-style: none;. Where would it be grabbing this attribute?
Hi Scott – the mega menu doesnt add any bullets except for the skins, which use an arrow on the sub-menus.
If its a standard HTML bullet then it will be caused by your theme style sheet. If its within the mega menu structure try using:
.dcjq-mega-menu ul.menu li {list-style: none;}Some themes wrap widgets with li tags so you should also check if it’s the actual container for the mega menu widget
can i use in thesis theme?
Hi – yes can be used with any theme
[...] To find out how to install and more information on customization visit the plugin page at Design Chemical [...]
[...] jQuery Slick Menu Widget creates sticky, sliding menu widgets from any standard WordPress custom menu using jQuery. [...]
[...] post: WordPress Plugin – jQuery Slick Menu Widget Posted in WordPress Tags: available-for, highlight-and, menu-available, plugin, plugin-creates, [...]
[...] the rest here: WordPress Plugin – jQuery Slick Menu Widget « Design Chemical … Posted in WordPress on Blog | Tags: 3-0-custom,create-sticky,sliding-menus Share with: [...]