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.
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 Email
|
|||
|
|
2 comments :
Too good sir,I am following all your posts and i want to implement all your posts sir...thanks ones again
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.