ASP.NET AND SQL SERVER: jQuery Menu

jQuery Menu

Categories :- Drop down menu using jquery,JQuery Mneu,JQuery Restrict to Allow Only Numbers in Textbox in Asp.net

Introduction :- In this article i am explain how i can design header using jquery in asp.net.

Description :- In my previous article i have explained how we can create jquery lightbox in asp.net .Now i have explained how we can make a stylish menu using jquery in asp.net as shown below.

Step 1 :- Create a new asp.net website.
Step 2 :- Write Click on Project explorer and add new item in your project and give a name to the asp.net web page.
Step 3 :- Write a code as shown below in .aspx page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery menu</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">
#form1 #navigation {
height: 4em;
margin: 0;
padding: 0 1em;
list-style: none;
border-bottom: 2px solid #0270BF;
}
#form1 #navigation li {
height: 100%;
float: left;
margin-right: 0.5em;
}
#form1 #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;
}
#form1 #navigation a:hover {
background: #F86000;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Product List</a></li>
<li><a href="#">Carrer</a></li>

</ul>
    </div>
    </form>
</body>
</html>

Output as shown below