Placed in: Home arrow Programming arrow Webdesign arrow jSlickmenu: A jQuery plugin for slick CSS3 menus comprar viagra en españa
comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
jSlickmenu: A jQuery plugin for slick CSS3 menus

After releasing several jQuery scripts, I wanted to take the whole jQuery programming to another level. For that reason, I'm proud to release my first jQuery plugin for everyone to use.

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.

jSlickMenu

As usual, you can freely use and modify this script where you want and I hope it can be of use in your next (web)project.

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. Mozillas Firefox 3.5 is getting these properties too (with the -moz- prefix). So, for now, this is just for fun - Other browsers will display the menu, but (sadly) in a whole different way.

Demo jSlickmenu   Download jSlickmenu

The plugin has been made as extensible as possible, so you can also view a demo with advanced settings. Make sure you check out the video demo and how to use the plugin.

Safari Demo

Check out this small video I placed on YouTube, showing this effect in full glory (rotation, dragging, opacity etc.) inside Safari.

How to use

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   
});

Conclusion and Download

Hopefully CSS3 will become the standard quick and users will kick out the old browsers too. This way, this technique would be pretty awesome to be used to display some awesome menu systems. With this plugin, it's simple to achieve, still the effect is pretty powerful. It's really fun too!

Demo jSlickmenu   Download jSlickmenu

What do you think of this plugin? Can it be improved? Are you using it somewhere? Please share!


Tags:  jslickmenu plugin jquery css3 menu slick

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:
Digg!Reddit!Del.icio.us!Facebook!StumbleUpon!
 
< Prev   Next >
[ Back ]