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
No comments:
Post a Comment