Menu with Blend Effect using jQuery

Introduction: In this article we will explore how we make a menu with a blend effect by using jQuery. Further we are going to see that we have menu and we want to add some blend effect using jQuery it will look like a very effective whenever we hover on the menu item it will show you a different color on hover of every menu item. In this article we will use css which is a style sheet to set the property of the menu image, background related property and padding property. By using jQuery, we can make it easily so let see that how we will make it:

Step 1: Firstly we have to create a Web Application

  • Go to Visual Studio 2010
  • Create the web Application
  • Click OK.

Step_1new.gif

Step 2: Secondly you have to add a new page to the website

  • Go to the Solution Explorer.
  • Right Click o Project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

Step_2_1fig.gif

Step_2_2fig.gif

Step 3: In this step we are going to see that see from where the js reference will be added to the source page of the default2.aspx page.

Step_3fig.gif

Step 4: Now we are going to write the script code which will be inside either on the head section or in the body section it will depend upon you which way you like most to placed it.

Step_4fig.gif

Step 5: You should have to add the image let see from where you have to add it:

Step_5fig.gif

Step 6: In this step we are going to write the jQuery code for applying the blend effect.

Step_6fig.gif

Step 7: In this step we are going to write the style code for the special color properties.

Style Code:

<
style type="text/css">
  *{padding:0; border:0; margin:0;}
      #demo a{
      display:block;
      width:99px;
      height:41px;
      margin-right:3px;
      float:left;
      background-image:url('menuimg.png');
      background-repeat:no-repeat;
      cursor:pointer;
      text-indent:-9999px;
          }
     #blend{clear:left; overflow:auto; margin-bottom:20px;}
     #blend_home{background-position:0 0;}
     #blend_home:hover,#example_home.hover{background-position:0 -48px;}
     #blend_blog{background-position:-90px 0;}
     #blend_blog:hover,#example_blog.hover{background-position:-90px -48px;}
     #blend_demo{background-position:-180px 0;}
     #blend_demo:hover,#example_demo.hover{background-position:-180px -48px;}
     #blend_about{background-position:-270px 0;}
     #blend_abou:hover,#example_about.hover{background-position:-180px -48px;}
     #blend_services{background-position:-360px 0;}
     #blend_services:hover,#example_services.hover{background-position:-360px -48px;}
     #blend_contact{background-position:-450px 0;}
     #blend_contact:hover,#example_contact.hover{background-position:-450px -48px;}
</style
>

Step 8: In this step we are going to write the complete code wich is given below:

Code:

<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!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>jQuery Blend</title>
     <style type="text/css">
        *{padding:0; border:0; margin:0;}
        #demo a{
          display:block;
          width:86px;
          height:38px;
          margin-right:3px;
          float:left;
          background-image:url('menuimg.png');
          background-repeat:no-repeat;
          cursor:pointer;
          text-indent:-9999px;
              }
        #blend{clear:left; overflow:auto; margin-bottom:20px;}
        #blend_home{background-position:0 0;}
        #blend_home:hover,#example_home.hover{background-position:0 -48px;}
        #blend_blog{background-position:-90px 0;}
        #blend_blog:hover,#example_blog.hover{background-position:-90px -48px;}
        #blend_demo{background-position:-180px 0;}
        #blend_demo:hover,#example_demo.hover{background-position:-180px -48px;}
        #blend_about{background-position:-270px 0;}
        #blend_about:hover,#example_about.hover{background-position:-180px -48px;}
        #blend_services{background-position:-360px 0;}
        #blend_services:hover,#example_services.hover{background-position:-360px -48px;}
        #blend_contact{background-position:-450px 0;}
        #blend_contact:hover,#example_contact.hover{background-position:-450px -48px;}
     </style>
<
script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery.blend-min.js"></script>
<
script type="text/javascript">
     $(document).ready(function () {
         $("#blend a").blend(500);
       });
</script>
</
head>
<
body>
<
div id='demo'>
<
div id="blend" style="border: thick groove #008080">
<
h1 style="font-family: 'Comic Sans MS'; font-size: xx-large; font-weight: 200; color: #800000; background-color: #FF9999;">Menu With Blend
Effect</h1>
<
a href="#" id="blend_home">Home</a>
<a href="#" id="blend_blog">Blog</a>
<
a href="#" id="blend_demo">Demo</a>
<
a href="#" id="blend_about">About</a>
<
a href="#" id="blend_services">Services</a>
<
a href="#" id="blend_contact">Contact</a>
</
div>
</
div>
</
body
>
</html>

Step 9: In this step we are going to see the design page let see how it looks like:

Step_9fig.gif

Step 10: Let it's time to run the application by pressing F5:

Output1: It shows that how the Home element changes it's color.

Output1.gif

Output2: It shows that how the Blog element changes it's color.

output2.gif

Output3: It shows that how the Demo element changes it's color.

output3.gif

Output4: It shows that how the About element changes it's color.

output4.gif

Output5: It shows that how the Contact element changes it's color.

output5.gif

Next Recommended Readings