Shortcode for WordPress

Today, i have gone through a blog very helpful and useful for me in wordpress development for shortcode. So i thought of sharing the information to all of you guys.

I don’t know how many of you know or used short codes in WordPress. I personally feel, short codes is one of the great features that enables to perform functions withing the post. Normally we cannot execute a function on WordPress, but with short codes you can achieve that. The short codes are quite handy for template designer to let their users to execute certain actions just by using the codes. OK, so lets have a detailed look on it

What are Shortcodes basically?

Shortcodes are the easiest way to execute certain actions. It doesn’t have any rocket science, just a couple of codes can get you started with the shortcodes. So here we go

To start the explanation, let me talk about a inserting a portfolio in your WordPress blog post. Short codes normally look like this

[portfolio]

WordPress shortcode API allows you to add attributes, suppose if you want to display a particular portfolio on the post, you can use id's to categorize it. So the short code will look like this

[portfolio id="35"]

Id is not the only supported attributes, you can create your own attributes by using array

function portfolio( $atts ) {
        extract( shortcode_atts( array(
                'value' => 'something',
                'count' => 'something else',
        ), $atts ) );

So the above code says [portfolio] shortcode supports two attributes – value and count

Let me show you an example

A simple shortcode would look like this. For demonstration I am using an output “Test Message” for a short code test

Note: All the shortcodes should be placed in functions.php

function testfn() {
    return 'Test, Message';
}

Now we need to create a shortcode to return this value. WordPress has a damn simple technique to create a shortcode. Here “test” is the shortcode and “testfn” is the function that has to be called when you use “test”

add_shortcode ('test', 'testfn');

Finally add the below code in your post to out the message “Test Message”

[test]

Now let me show you a useful example of using shortcodes

Bloggers would want to display Adsense ads withing their post, but as I said earlier WordPress doesn’t support executing codes withing the post. So obviously most of the Bloggers rely on a plugin to achieve that.

Here is a little demonstration of how shortcode can be used to embed Adsense ads anywhere in the post, like the way you wanted it to be. [Tip via WPRecipes]

Go to functions.php and place this code

function displayad() {
    return ‘<div id=”adsense”><script type=”text/javascript”><!–
        google_ad_client = “pub-XXXXXXXXXXXXXX”;
        google_ad_slot = “4668915978”;
        google_ad_width = 468;
        google_ad_height = 60;
        //–>
</script>

<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”&gt;
</script></div>’;
}

add_shortcode(‘adsense’, ‘displayad’);

The adsense ad is wrapped in a div adsense to easily style up to look attractive within posts and replace your Pub ID and the dimension

Now go to edit post and insert the below code within the post to display ads with post

[adsense]

For further in Shortcode

Instant Font Resizer using Jquery

Nowadays, In all website and blogs has the font re-sizer. So many developer/designers struggling to get this. Writing so many CSS and Javascript. Here i’m going to give few simpler and instant font re-sizer. For further info: jFontsize.

Step 1. Download the Js file

Upload the js file to the server. Add the script before </head> in your index.html

<script src=”http://www.jfontsize.com/files/jquery.jfontsize-1.0.js&#8221; type=”text/javascript”/>

Step 2. Customize CSS

Add below class in your stylesheet

.jfontsize-button {
    font: bold 12px arial;
    padding: 3px;
    border: solid 1px #ccc;
}

.jfontsize-button:hover {
    text-decoration: none;
    background: #333;
    color: #fff;
    border: solid 1px #333;
}

.jfontsize-disabled, .jfontsize-disabled:hover {
    color: #aaa;
    border: solid 1px #eee;
    background: #eee;
}

Step 3.  Assigning Font resize Function

<a id=”jfontsize-minus” class=”jfontsize-button” href=”#”>A-</a>
<a id=”jfontsize-default” class=”jfontsize-button” href=”#”>A</a>
<a id=”jfontsize-plus” class=”jfontsize-button” href=”#”>A+</a>
<p class=”PUT-THE-CLASS-NAME”>
Place your content here
</p>
<script type=”text/javascript” language=”javascript”>
                        $(‘.PUT-THE-CLASS-NAME’).jfontsize({
                            btnMinusClasseId: ‘#jfontsize-minus’,
                            btnDefaultClasseId: ‘#jfontsize-default’,
                            btnPlusClasseId: ‘#jfontsize-plus’
                        });
</script>

Just replace the “PUT-THE-CLASS-NAME” as your class where you need the font resizer to work on.

For the live demo and you can download full source code

YouTube Video as Website Background – Jquery Tubular

Jquery Tubular plugin was created by Sean McCambridge, a front-end developer from Chicago, USA. This awesome plugin  you can set a YouTube video as your website/ blog’s background. Just call it on yourtag with a YouTube video ID.

To add youtube video as background in your site or blog,

1. Add the JS File of the Tubular plugin into your page and download the JS file from the link upload in the server.

2. Now call the JS in your header

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>

<script type="text/javascript" charset="utf-8">
      $().ready(function() {
                $('body').tubular('someYTid','wrapper'); // where someYTid is the YouTube ID and wrapper is your containing DIV.
        });
</script>

Replace the word someYTid in the code with ID of desired Youtube video which you can get from its URL like shown in the image below.

For more information, visit http://www.seanmccambridge.com/tubular/.

Text Area Counter Using Javascript

I have created the text area counter character counter using  javascript. I’m sharing the script to you guys.

Script:

<script type="text/javascript">
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else 
countfield.value = maxlimit - field.value.length;
}
// End -->
</script>
<textarea cols="32 " rows="10" name="message" id="message" class="inputbox required" onkeydown="textCounter(this.form.message,this.form.remLen,500);" onkeyup="textCounter(this.form.message,this.form.remLen,500);" ></textarea><br /><input type="text" class="wordlimit" value="500" readonly="readonly" name=remLen size="5" maxlength="5">

Guys try and comment on this.

QR Code in PHP

Technology keeps on growing. Nowadays in web everyone needs the QR code.

Brief on QR Code:

A QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional code) first designed for the automotive industry. More recently, the system has become popular outside of the industry due to its fast readability and comparatively large storage capacity. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be made up of any kind of data (e.g., binary, alphanumeric, or Kanji symbols)

Eg: You convey message/Address/Phone etc., through QR code

Using PHP we can develop the QR code.

<?php
function generateQRwithGoogle($chl,$widhtHeight ='150',$EC_level='L',$margin='0') {
    echo '<img src="http://chart.apis.google.com/chart?chs='.$widhtHeight.
'x'.$widhtHeight.'&cht=qr&chld='.$EC_level.'|'.$margin.
'&chl='.$chl.'" alt="QR code" widhtHeight="'.$widhtHeight.
'" widhtHeight="'.$widhtHeight.'"/>';
}
if(isset($_POST['Go'])){
$urlToEncode = $_POST['urlToEncode'];
generateQRwithGoogle($urlToEncode);
}
?>
<form method="post" action="" name="ff1" id="ff1">
<input type="hidden" name="process" id="process" value="1">
QR encode: <input type="text" name="urlToEncode" id="urlToEncode" style="width:220px;"><input type="submit" name="Go" value="Go">
</form>

Slider Control

In my recent project, client asked for the slider control for the no.. of users field as slider control. I have done that. So i thought of sharing that you guys.

Create folder “img” and save these two.

 (sldr2h_bg.gif)  and  (sldr2h_sl.gif)

Create Js file as “slider.js

function slider (a_init, a_tpl) {

	this.f_setValue  = f_sliderSetValue;
	this.f_getPos    = f_sliderGetPos;

	// register in the global collection	
	if (!window.A_SLIDERS)
		window.A_SLIDERS = [];
	this.n_id = window.A_SLIDERS.length;
	window.A_SLIDERS[this.n_id] = this;

	// save config parameters in the slider object
	var s_key;
	if (a_tpl)
		for (s_key in a_tpl)
			this[s_key] = a_tpl[s_key];
	for (s_key in a_init)
		this[s_key] = a_init[s_key];

	this.n_pix2value = this.n_pathLength / (this.n_maxValue - this.n_minValue);
	if (this.n_value == null)
		this.n_value = this.n_minValue;

	// generate the control's HTML
	document.write(
		'<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + this.n_id + 'base">' +
		'<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + this.n_id + 'slider" id="sl' + this.n_id + 'slider" onmousedown="return f_sliderMouseDown(' + this.n_id + ')"/></div>'
	);
	this.e_base   = get_element('sl' + this.n_id + 'base');
	this.e_slider = get_element('sl' + this.n_id + 'slider');

	// safely hook document/window events
	if (!window.f_savedMouseMove && document.onmousemove != f_sliderMouseMove) {
		window.f_savedMouseMove = document.onmousemove;
		document.onmousemove = f_sliderMouseMove;
	}
	if (!window.f_savedMouseUp && document.onmouseup != f_sliderMouseUp) {
		window.f_savedMouseUp = document.onmouseup;
		document.onmouseup = f_sliderMouseUp;
	}
	// preset to the value in the input box if available
	var e_input = this.s_form == null
		? get_element(this.s_name)
		: document.forms[this.s_form]
			? document.forms[this.s_form].elements[this.s_name]
			: null;
	this.f_setValue(e_input && e_input.value != '' ? e_input.value : null, 1);
	this.e_slider.style.visibility = 'visible';
}

function f_sliderSetValue (n_value, b_noInputCheck) {
	if (n_value == null)
		n_value = this.n_value == null ? this.n_minValue : this.n_value;
	if (isNaN(n_value))
		return false;
	// round to closest multiple if step is specified
	if (this.n_step)
		n_value = Math.round((n_value - this.n_minValue) / this.n_step) * this.n_step + this.n_minValue;
	// smooth out the result
	if (n_value % 1)
		n_value = Math.round(n_value * 1e5) / 1e5;

	if (n_value < this.n_minValue)
		n_value = this.n_minValue;
	if (n_value > this.n_maxValue)
		n_value = this.n_maxValue;

	this.n_value = n_value;

	// move the slider
	if (this.b_vertical)
		this.e_slider.style.top  = (this.n_pathTop + this.n_pathLength - Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';
	else
		this.e_slider.style.left = (this.n_pathLeft + Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';

	// save new value
	var e_input;
	if (this.s_form == null) {
		e_input = get_element(this.s_name);
		if (!e_input)
			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with ID='" + this.s_name + "'.");
	}
	else {
		var e_form = document.forms[this.s_form];
		if (!e_form)
			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the form with NAME='" + this.s_form + "'.");
		e_input = e_form.elements[this.s_name];
		if (!e_input)
			return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with NAME='" + this.s_name + "'.");
	}
	e_input.value = n_value;
}

// get absolute position of the element in the document
function f_sliderGetPos (b_vertical, b_base) {
	var n_pos = 0,
		s_coord = (b_vertical ? 'Top' : 'Left');
	var o_elem = o_elem2 = b_base ? this.e_base : this.e_slider;

	while (o_elem) {
		n_pos += o_elem["offset" + s_coord];
		o_elem = o_elem.offsetParent;
	}
	o_elem = o_elem2;

	var n_offset;
	while (o_elem.tagName != "BODY") {
		n_offset = o_elem["scroll" + s_coord];
		if (n_offset)
			n_pos -= o_elem["scroll" + s_coord];
		o_elem = o_elem.parentNode;
	}
	return n_pos;
}

function f_sliderMouseDown (n_id) {
	window.n_activeSliderId = n_id;
	return false;
}

function f_sliderMouseUp (e_event, b_watching) {
	if (window.n_activeSliderId != null) {
		var o_slider = window.A_SLIDERS[window.n_activeSliderId];
		o_slider.f_setValue(o_slider.n_minValue + (o_slider.b_vertical
			? (o_slider.n_pathLength - parseInt(o_slider.e_slider.style.top) + o_slider.n_pathTop)
			: (parseInt(o_slider.e_slider.style.left) - o_slider.n_pathLeft)) / o_slider.n_pix2value);
		if (b_watching)	return;
		window.n_activeSliderId = null;
	}
	if (window.f_savedMouseUp)
		return window.f_savedMouseUp(e_event);
}

function f_sliderMouseMove (e_event) {

	if (!e_event && window.event) e_event = window.event;

	// save mouse coordinates
	if (e_event) {
		window.n_mouseX = e_event.clientX + f_scrollLeft();
		window.n_mouseY = e_event.clientY + f_scrollTop();
	}

	// check if in drag mode
	if (window.n_activeSliderId != null) {
		var o_slider = window.A_SLIDERS[window.n_activeSliderId];

		var n_pxOffset;
		if (o_slider.b_vertical) {
			var n_sliderTop = window.n_mouseY - o_slider.n_sliderHeight / 2 - o_slider.f_getPos(1, 1) - 3;
			// limit the slider movement
			if (n_sliderTop < o_slider.n_pathTop)
				n_sliderTop = o_slider.n_pathTop;
			var n_pxMax = o_slider.n_pathTop + o_slider.n_pathLength;
			if (n_sliderTop > n_pxMax)
				n_sliderTop = n_pxMax;
			o_slider.e_slider.style.top = n_sliderTop + 'px';
			n_pxOffset = o_slider.n_pathLength - n_sliderTop + o_slider.n_pathTop;
		}
		else {
			var n_sliderLeft = window.n_mouseX - o_slider.n_sliderWidth / 2 - o_slider.f_getPos(0, 1) - 3;
			// limit the slider movement
			if (n_sliderLeft < o_slider.n_pathLeft)
				n_sliderLeft = o_slider.n_pathLeft;
			var n_pxMax = o_slider.n_pathLeft + o_slider.n_pathLength;
			if (n_sliderLeft > n_pxMax)
				n_sliderLeft = n_pxMax;
			o_slider.e_slider.style.left = n_sliderLeft + 'px';
			n_pxOffset = n_sliderLeft - o_slider.n_pathLeft;
		}
		if (o_slider.b_watch)
			 f_sliderMouseUp(e_event, 1);

		return false;
	}

	if (window.f_savedMouseMove)
		return window.f_savedMouseMove(e_event);
}

// get the scroller positions of the page
function f_scrollLeft() {
	return f_filterResults (
		window.pageXOffset ? window.pageXOffset : 0,
		document.documentElement ? document.documentElement.scrollLeft : 0,
		document.body ? document.body.scrollLeft : 0
	);
}
function f_scrollTop() {
	return f_filterResults (
		window.pageYOffset ? window.pageYOffset : 0,
		document.documentElement ? document.documentElement.scrollTop : 0,
		document.body ? document.body.scrollTop : 0
	);
}
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}

function f_sliderError (n_id, s_message) {
	alert("Slider #" + n_id + " Error:\n" + s_message);
	window.n_activeSliderId = null;
}

get_element = document.all ?
	function (s_id) { return document.all[s_id] } :
	function (s_id) { return document.getElementById(s_id) };

Create HTML page add the following code

<form action="multiple_slider_designs_demo.html" method="get" name="demoForm">
<table cellpadding="2" border="0">
<tr><td colspan="7">
No.. of Users
<input name="users" id="users3h" type="Text" size="3" onChange="A_SLIDERS[2].f_setValue(this.value)">
</td></tr>
<tr><td colspan="7">
<script language="JavaScript">
	var A_TPL3h = {
		'b_vertical' : false,
		'b_watch': true,
		'n_controlWidth': 120,
		'n_controlHeight': 16,
		'n_sliderWidth': 19,
		'n_sliderHeight': 16,
		'n_pathLeft' : 1,
		'n_pathTop' : 0,
		'n_pathLength' : 98,
		's_imgControl': 'img/sldr2h_bg.gif',
		's_imgSlider': 'img/sldr2h_sl.gif',
		'n_zIndex': 1
	}
	var A_INIT3h = {
		's_form' : 0,
		's_name': 'users3h',
		'n_minValue' : 0,
		'n_maxValue' : 100,
		'n_value' : 50,
		'n_step' : 1
	}

	new slider(A_INIT3h, A_TPL3h);
</script>
</td></tr>
</table>
<input name="Submit" type="Submit" value="Submit">

</form>

Output

Slider control Using PHP, slider Control using javascript

Sleek and Smooth animated menu using jQuery

Today, I’m finished my earlier so i thought to update my blog. As per my last project i used to jquery menu. Client was very happy and attracted so i thought to update that in my blog.

Images

     

In Header section of  HTML page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
jquery.easing.js
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	},
	easeInQuad: function (x, t, b, c, d) {
		return c*(t/=d)*t + b;
	},
	easeOutQuad: function (x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	},
	easeInOutQuad: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},
	easeInQuart: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	easeOutQuart: function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeInOutQuart: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	easeInQuint: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	},
	easeOutQuint: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},
	easeInOutQuint: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},
	easeInSine: function (x, t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},
	easeOutSine: function (x, t, b, c, d) {
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},
	easeInOutSine: function (x, t, b, c, d) {
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},
	easeInExpo: function (x, t, b, c, d) {
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},
	easeOutExpo: function (x, t, b, c, d) {
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	},
	easeInCirc: function (x, t, b, c, d) {
		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	},
	easeOutCirc: function (x, t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	},
	easeInOutCirc: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	},
	easeInElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	easeOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},
	easeInOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	},
	easeInBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	easeOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	},
	easeInOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	easeInBounce: function (x, t, b, c, d) {
		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
	},
	easeOutBounce: function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},
	easeInOutBounce: function (x, t, b, c, d) {
		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
});
 

Create html page add the below code

<ul class="nav" id="nav1">
   <li class="first"><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Blog</a></li>
   <li class="last"><a href="#">Tutorials</a></li>
   <li class="bg"><div class="left"></div></li>
</ul>
All the list elements are fairly simple and the list with class "bg" is the one which holds the background image for the menu. The code is same for the first and second example but for the third example we use list with class ybg instead of bg.
 <li class="ybg"></li>
CSS for Menu

ul.nav { list-style:none;  overflow:hidden;  }

ul.nav li { float:left; height:39px; background-color:#000;  padding:0 5px;  }

ul.nav li.first {
  -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
  -moz-border-radius-bottomleft:9px;  -webkit-border-bottom-left-radius:9px;
}

ul.nav li.last {
-moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}

ul.nav li.bg {
   margin:7px 0px 0px 3px; padding-right:8px; position:absolute;
   z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top;
}

ul.nav li .left { background:url(bg.png) no-repeat left top; height:39px;  }

ul.nav li a {
  padding:8px 20px;  color:#FFF; font-size:18px; font-weight:bold; display:block;
  text-decoration:none; z-index:100; position:relative;
}

ul.nav li.ybg {
  background-color:#FB0; position:absolute; z-index:50;
  left:165px; width:55px; height:4px; margin-top:6px;
}
As you can see there, I’ve used CSS3 rounded corners for the first and last elements of list(obviously doesn’t work IE). Furthermore, the list with class bg is used for the first and second menu examples where the image is used in the background and which moves around on mouse hover on menu with sleek effect. Please note that this list must be positioned absolutely.
The ybg class is used for the background effect for the third menu in the example, which first moves to the menu which has current mouse position and then starts sliding down.
After this, let’s get into jQuery code for providing the sleek effect for the hover menu.
$(document).ready(function()
{
	//for the first menu
	$('#nav1 li a').hover(function()
	{
		var offset=$(this).offset();
        var thiswidth =$(this).width()+13;
        $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
	},
	function()
	{
		$('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},600);
	}); 

	//for the second menu, it uses easing plugin
    $('#nav3 li a').hover(function()
	{
		var offset=$(this).offset();
        var thiswidth =$(this).width()+13;
        $('#nav3 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
	},
	function()
	{
		$('#nav3 li.bg').stop().animate({left:"155px",width:"60px"},600,'easeOutBounce');
	});

	//for the third menu, it uses easing plugin
    $('#nav2 li a').hover(function()
	{
		var offset=$(this).offset();
        var thiswidth =$(this).width()+13;
        $('#nav2 li.ybg').stop().animate({left:offset.left+9+"px",width:thiswidth+"px"},400,function(){
            $(this).animate({height:"28px"},150);
        });
	},
	function()
	{
		$('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
            $(this).animate({left:"165px",width:"55px"},600,'easeOutBounce');
        });
	}); 

});