blogspot visit counter

Sunday, 13 April 2014

jQuery Menu

jQuery Menu
Categories :- Drop down menu using jquery,JQuery Mneu,JQuery Restrict to Allow Only Numbers in Textbox in

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

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

Step 1 :-  Create a new website.
Step 2 :-  Write Click on Project explorer and add new item in your project and give a name to the web page.
Step 3 :-   Write a code as shown below in .aspx page.
<html xmlns="">
<head runat="server">
    <title>jQuery menu</title>
     <script src="" type="text/javascript"></script>
<script type="text/javascript" src=""></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');
<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;
    <form id="form1" runat="server">
     <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>


Output as shown below

Download sample code attached

 aspdotnet stylish menu_2 with example

1 comment:

  1. This comment has been removed by a blog administrator.


Related Posts Plugin for WordPress, Blogger...