The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3features 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.
HOW TO USE:
Put this code in <head> tag:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
<link rel="stylesheet" type="text/css" href="css/slickmenu.css"/>
Now, the menu HTML needs to be as follows:
Note The
OPTIONS:
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.
VIEW DEMO
DOWNLOAD
HOW TO USE:
Put this code in <head> tag:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
<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>
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();OPTIONS:
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.
VIEW DEMO
DOWNLOAD
No comments:
Post a Comment