The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.

Installing

First, you’ll need to import the script after importing jQuery. You’ll need to place this between the and section of your HTML page.

Right after importing the Javascript files, you’ll need to import the CSS for jSlickmenu. This needs to be placed in the head-section too.

Now, the menu HTML needs to be as follows:

The id from the surrounding division can be of your choice, as long as you follow it up with an ul. The unorded list contains list items, which contains links and the images. Note The alt attribute of the image will be used as title when the user hovers the image.

When that’s all set, you can execute the following JavaScript statement to enable the plugin on the just created menu:

$("#menu").jSlickmenu();

That’s it! Your menu should be fully capable of showing some amazing effects.