SlipSlapver 1.0
A CSS3 & jQuery menu bar plugin

WHAT'S THIS?

SlipSlap is a full CSS3 and jQuery plugin which creates a cool animated menu bar.
It requires no addition images and external files and is fully customable.

You can edit the CSS file to change the color values of the buttons, add or remove buttons and set their size.

COMPATIBILITY

SlipSlap was tested on Google Chrom 12, FireFox 4 + 5 and Internet Explorer 8 + 9
Some CSS3 properties aren't fully supported by IE8 and IE9 but the script is fully compatible with these versions and even older versions.

The difference will be visual with properties such as text shadow for example.

LICENCE:

SlipSlap is completely free under MIT License

HOW TO USE:

SETUP:

Include these files in the HEAD section:

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/slipSlap.js"></script>
<link href="css/slipSlap.css" rel="stylesheet" type="text/css">

The HTML:

<ul id="my_menu">
   <li><a href="#">BUTTON</a></li>
   <li><a href="#">BUTTON</a></li>
   <li><a href="#">BUTTON</a></li>
   <li><a href="#">BUTTON</a></li>
   <li><a href="#">BUTTON</a></li>
   <li><a href="#">BUTTON</a></li>
</ul>

Call Javascript:

$(window).ready(function(){
   $("#my_menu").slipSlap();
});

Or with Optional parameters:

$(window).ready(function(){
    $("#my_menu").slipSlap({
    // all of these options are... optional
    speedOver: 100, // speed of the mouseover effect
    speedOut: 100, // speed of the mouseout effect
    opacity: '1', // opacity of the menu
    spanWidth: '136', // button width
    spanHeight: '48', // button height
    SlipAmount: '12', // how far down a button slips
    easeHover: 'swing', // animation ease on hover
    easeOut: 'swing' // animation ease on out
    });
});

The CSS file is included with the ZIP file of the plugin.

DOWNLOAD


Share your thoughts
Designed & Created by The Puzzle | © 2011 All rights reserved