Placed in: Home arrow Programming arrow Webdesign arrow jSlickmenu: A jQuery plugin for slick CSS3 menus
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!Technorati!StumbleUpon!Newsvine!Furl!Ma.gnolia!
Comments
Add NewSearchRSS
Pandou - Bug on explorer   2009-06-29 22:38:49
Gravatar image It's a beautiful menu but on explorer the alt attribute is only visible for the first hover on one image.
Reply | Quote
Adrian   2009-06-30 00:14:45
Gravatar image wow great article :woohoo:
thanks for sharing!!
Reply | Quote
Utopie - Website Design Liverp - Get the same explorer bug   2009-06-30 13:04:35
Gravatar image Very like a pop up bubble script... Got the same error Pandou mentions on IE7... Hey, someones got to use it!! :whistle:
Reply | Quote
Marco - Strange   2009-07-01 09:42:20
Gravatar image Ah damn, didn't text IE properly. Strange that it does display once, but doesn't afterwards. Anyway, might have a look at it later, thanks for noticing!
Reply | Quote
Jess   2009-06-30 19:51:28
Gravatar image Very nice! And FF 3.5 displays them - although the text doesn't look very good on FF. =/ Can't wait for CSS3 and HTML5 to become standards. :)

Thank you.

Jess
Reply | Quote
Marco - Firefox rulez!   2009-07-01 09:43:58
Gravatar image Firefox 3.5 indeed displays the menu correct, except that the menu isn't rotated "back". This is because the "backrotation" variable in the plugin is currently only made for -webkit; It should have an addition to work with -moz too.

Anyway, thanks for noticing - I'll dive into it sometime and update the script!
Reply | Quote
Freelancer Crowd - heh   2009-07-01 09:29:42
Gravatar image Looks pretty impressive indeed... perhals too impressive. Would probably take years to become commercialy usable considering the users' movement towards new browsers.
Reply | Quote
Marco - Thanks!   2009-07-01 09:45:06
Gravatar image Thanks for the compliment mate :) . Like I said in the article, it's just a sweet proof of concept that could be used in the future. For now, people could use it as an "addition" to their website, but they must not forget the "oldies" on the net still using browsers that aren't capable of using this technique.
Reply | Quote
Kawsar Ali - Cool Menu   2009-07-09 20:26:32
Gravatar image This is a really cool menu. I like the animation effect when you hover. good job man
Reply | Quote
Bryan Chalker - Very slick...but doesn't make flash obsolete ;)   2009-10-16 18:58:03
Gravatar image Very nice menu. Works well. Does look slick. The comment about making Flash obsolete, though - c'mon :D You can throw so many, many more effects and such with Flash (I assume you were referring to obsolete because of the effect it does). Why the urge to make Flash obsolete? Just curious. Why not work with the best tool - or preferred one.
Reply | Quote
youssef - thank   2009-10-25 23:45:21
Gravatar image thanks for sharing
Reply | Quote
kuflu - thanks   2009-11-04 16:12:06
Gravatar image thanks cool and very good
Reply | Quote
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Unsubscribe from e-mail notifications.
 
< Prev   Next >
[ Back ]
Subscribe

Get updates from this website along with 3513 others.