Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Bouncing Menu | jQuery Menu with Bounce Effect Example

Jan 23, 2013
Introduction

Here I will explain how to create bounce effect for Menu using jQuery or jQuery Menu with Bouncing Effect using jQuery easing plugin.

Description:
  
In previous articles I explained jQuery fancy switch on and off effects example, jQuery convert upper case to lower case,  jQuery Restrict user to enter only numeric characters and many articles relating to
jQuery, asp.net. Now I will explain how to implement bouncing effect for menu using jQuery

To implement bounce effect for menu we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Menu with Bounce Effect</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.css-zibaldone.com/js/jquery/plugins/jquery.easing.js"></script>
<script type="text/javascript">
$(function () {
$('li', '#navigation').each(function () {
var $li = $(this);
var $a = $('a', $li);
$a.hover(function () {
$a.stop(true, true).animate({
height: '3em',
lineHeight: '3em',
bottom: '1em'
}, 'slow', 'easeOutBounce');
}, function () {
$a.stop(true, true).animate({
height: '2em',
lineHeight: '2em',
bottom: 0
}, 'slow', 'easeOutBounce');
});
});
});
</script>
<style type="text/css">
#navigation {
height: 4em;
margin: 0;
padding: 0 1em;
list-style: none;
border-bottom: 2px solid #0270BF;
}
#navigation li {
height: 100%;
float: left;
margin-right: 0.5em;
}
#navigation a {
float: left;
height: 2em;
padding: 0 1em;
background: #0270BF;
color: #fff;
line-height: 2;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 2em 0 0 0;
letter-spacing: 0.1em;
position: relative;
}
#navigation a:hover {
background: #F86000;
}
</style>
</head>
<body>
<div>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>
If you observe above code I used easing plugin and its value 'easeOutBounce' to implement bounce effect for menu.

Demo


For live demo check this jQuery Menu with Bounce Effect

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

4 comments :

Unknown said...

Too good sir,I am following all your posts and i want to implement all your posts sir...thanks ones again

Anonymous said...

Really doing great job sir. what a man you are. really giving useful post for us. Thank you so much. i was searching for this css for an month. I failed to find it. Not only this. you are awesome with many articles.

محمّد سددقالی . سوفٹوارے ڈولوپر said...

Excellent.

Anonymous said...

hello sir at first its working very well. but now its not bouncing at all. what is cause. the code correct as above. but bounce is not working. pls help

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.