Advanced Navigation using jQuery

Continuing our expedition of jQuery, today we will build a very fancy and easy yet advanced menu using unordered list, jQuery and easing plug-in.

In this menu, we will take an image and bring it on screen with nice animation as soon as you keep your mouse over one of the menu item.

Output:

In order to accomplish this you are going to need:

  1. jQuery plug-in: you can download latest version by visiting jQuery website at http://jquery.com/
  2. Animation easing plug-in: can be downloaded from here: http://gsgd.co.uk/sandbox/jquery/easing/
  3. Hover image: you can create your own image or use div for this or download it from here http://www.devtechie.com/downloadlinks/menuhover.jpg

 

Source Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdvancedNavigation.aspx.cs" Inherits="AdvancedNavigation" %>

 

<!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 runat="server">

<title></title>

<script src="scripts/jquery-1.6.2.js" type="text/javascript"></script>

<script src="scripts/jquery.easing.1.2.js" type="text/javascript"></script>

<link href="styles/Styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

$(document).ready(function () {

$('<img id="menuHover" src="images/MenuHover.jpg"></img>').css({

width: $('#menu li:first a').width() + 20,

height: ''

 

}).appendTo('#menu').hide();

 

$('#menu a').hover(function () {

$('#menuHover').show();

$('#menuHover').animate(

{ height: $(this).height() + 20,

width: $(this).width() + 20,

top: $(this).position().top

},

     { duration: 1000, easing: 'easeOutElastic', queue: false }

);

}, function () {

var topPosition = $('#menu li:first a').position().top;

$('#menuHover').stop(true).animate(

{ height: '' },

             { duration: 500, easing: 'easeInElastic', queue: false }

         ).animate({ top: topPosition }, 500);

});

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<div>

<ul id="menu">

<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Press Release</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Articles</a></li>

<li><a href="#">Login</a></li>

<li><a href="#">Search</a></li>

</ul>

</div>

</div>

</form>

</body>

</html>

 

 

CSS:

 

#menu {    

margin: 0 0 10px 0;

padding: 0;

position: relative;

z-index: 1;

list-style-type: none;

width:100%;

}

 

#menu ul {

margin: 0;

padding: 0;

}

 

#menu li {

    display: list-item;

    margin: 0;

    padding: 0;

}

 

#menu a {

    display: inline-block;

    padding: 10px;

    text-decoration: none;

}

 

#menuHover {

top: 0;

position: absolute;

z-index: -1;

}

Tags: ,

ASP.NET | jQuery