To view the Demo Click here
Installing :
First, you'll need to import the script after importing jQuery. You'll need to place this between the <head> and </head> section of your HTML page.
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
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.
<link rel="stylesheet" type="text/css" href="css/slickmenu.css"/>
Now, the menu HTML needs to be as follows:
<div id="menu">
<ul>
<li><a href="[LINK]">
<img src="[IMG]" alt="[TITLE]" />
</a></li>
<!-- more menu items -->
</ul>
</div>
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.
Options :
You want to change some of the slick default effects? Of course you can! Make sure you check out the advanced demonstration too. You can change the following settings:
* speed - Any of the jQuery speed values. Speed for the animation when hovering.
* fadeopacity - Any of the jQuery opacity values. Opacity of the siblings when hovering.
* infomargin - Integer. Margin (in px) for the infobox to appear above the image.
* leftmargin - Integer. Margin (in px) for the menu items seperated from each other.
* css3rotate - Boolean. Whether the menu items should be rotated using CSS3.
* css3shadow - String. The CSS3 box-shadow property.
* css3borderradius - Integer. The size of the border radius property.
* borderneutral - Integer. Width of the border size in px when the user is not hovering.
* borderhover - Integer. Width of the border size in px when the user is hovering.
Here's an example of how the jSlickmenu can be changed with options:
$("#menu").jSlickmenu({
speed : 100,
fadeopacity : 0.1,
infomargin : 15,
leftmargin : 150,
css3rotate : false,
css3shadow : '#999 5px 10px 10px',
css3borderradius : 3,
borderneutral : 5,
borderhover : 20
});
To view the Demo Click here
