Submit your widget
HomeMenu & NavigationCSS3 Super slick jQuery menu

CSS3 Super slick jQuery menu

Created 14 years ago   Views 22283   downloads 3333    Author marcofolio
CSS3 Super slick jQuery menu
View DemoDownload
152
Share |

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 <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.

You might also like