Pages

Thursday 23 May 2013

How To Create Bouncing Menu OR jQuery Menu with Bounce Effect jQuery Example in C# Asp.net

How To Create Bouncing Menu OR jQuery Menu with Bounce Effect jQuery Example in C# Asp.net


Program:

.Aspx File

<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 #B52025;
}
#navigation li {
height: 100%;
float: left;
margin-right: 0.5em;
}
#navigation a {
float: left;
height: 2em;
padding: 0 1em;
background: #B52025;
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>

Demo:

jQuery Menu with Bounce Effect

No comments:

Post a Comment