Description:- Dear Friends in my previous Article of Jquery We learn How to Zoom Out & Zoom In Using JQuery in Asp.net and JQuery Show Hide Option Theme Change & Using Buttons,Now in this article we learn How to make Bouncing Navigation Menu Bar easeOut Effect using Jquery in Asp.net.
Demo:-
Demo:-
Coding:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 $jli = $(this);var $a = $('a', $jli);$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="#">Asp.Net</a></li><li><a href="#">Jquery</a></li><li><a href="#">CSS</a></li></ul></div></body></html>
0 comments:
Post a Comment