Switch Menu II Using JQuery


Introduction

In this tutorial we'll be building a cool Switch Menu using jQuery. A Switch Menu is a common UI component in many applications. A number of JavaScript libraries provide a nice and simple Switch Menu, but today we are going to take a look at how to build our own - because, well, that is what we do here at Switch On The Code!

Switch Menu

A Switch Menu is a XP style menu that you can stack on the your page to categorize your links. These menus are inline rendered so any HTML that is around them when they slide open will be "pushed" out of the way. If the user has cookies enabled the script will use a cookie to remember the last state of the menu upon his return. The fade effect is optional, and can be turned off. Now it's time to see how we will make it.

Note: To run this program download "SwitchMenuII.rar". The two files "xpmenuv21.js" and "sddm.css", contain the script and CSS.

Step 1 : First we have to create a web application.

  • Go to Visual Studio 2010.
  • New--> And select the web application.
  • Give it a name; whatever you want.
  • Click OK.

img1.gif

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

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

img2.gif
img3.gif

Step 3 : In this step we will see the code of the sddm.css file.

Style Code:

.navbar
{

.mainDiv
{
  width:185px;
}
.topItem
{
  font: bold 12px tahoma,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-up-title.jpg") no-repeat 0 0;
  background-position:center center;
  background-repeat:no-repeat;
  border: none;
  width: 185px;
  height: 25px;
  color: #215dc6;
  cursor:pointer;
  text-indent:10px;
}
.topItemOver
{
  text-indent:10px;
  font: bold 12px tahoma,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-up-title-on.jpg") no-repeat 0 0;
  background-position:center center;
  background-repeat:no-repeat;
  height: 25px;
  width: 185px;
  color: #428eff;
  cursor:pointer;
}
.topItemClose{
  text-indent:10px;
  font: bold 12px tahoma,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-down-title.jpg") no-repeat 0 0;
  background-position:center center;
  background-repeat:no-repeat;
  height: 25px;
  width: 185px;
  color: #215dc6;
  cursor:pointer;
}
.topItemCloseOver
{
  text-indent:10px;
  font: bold 12px tahoma,verdana,sans-serif;
  letter-spacing: 0;
  background: url("arrow-down-title-on.jpg") no-repeat 0 0;
  background-position:center center;
  background-repeat:no-repeat;
  height: 25px;
  width: 185px;
  color: #428eff;
  cursor:pointer;
}
.dropMenu
{
  font: bold 11px tahoma,verdana,sans-serif;   
  background-color: #d6dff7;
  color: #000;
  border: 1px solid #FFFFFF;
  border-width: 0 1px 1px 1px;
  filter:alpha(opacity=100);
  padding-top:5px;
  padding-bottom:5px;
}
.subMenu
{
   display:block;
}
.subItem
{
   margin-left:10px;
   margin-top:2px;
   height:18px;
   font: 11px tahoma,verdana,sans-serif;
   text-decoration:none;
   color: #215dc6;
}
.subItem a
{
   margin-left:23px;
   font: 11px tahoma,verdana,sans-serif;      
   text-decoration:none;
   color: #215dc6;
}
.subItemOver
{
   margin-left:10px;
   margin-top:2px;
   font: 11px tahoma,verdana,sans-serif;  
   height:18px;
   color: #428eff;
}
.subItemOver  a
{
   margin-left:23px;
   font: 11px tahoma,verdana,sans-serif;
   cursor:pointer;  
   color: #428eff;
   text-decoration:underline;
   cursor:pointer;

.drop
{
   border-left:1px solid black;
   border-right:1px solid black
}

Step 4 : In this step we will add the  "xpmenuv21.js" file to the our project. It is in "SwitchMenuII.rar".

Step 5 : In this step we will see the code of Default.aspx.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
    <link rel="stylesheet" type="text/css" href="Styles/sddm.css"
/> // Add the reference of sddm.css file.
</head>
<
body>
    <form id="form1" runat="server">
<div class="navbar">
<div class="mainDiv">
<div class="topItem" >List Menu 1&nbsp;&nbsp;&nbsp; </div>       
<div class="dropMenu" ><!-- -->
       <div class="subMenu" style="display:inline;">
              <div class="subItem"><a href="#">About Us</a></div>
               <div class="subItem"><a href="#">Featured Jobs</a></div>
              <div class="subItem"><a href="#">Contact Us</a></div>
              <div class="subItem"><a href="#">Resources</a></div>
              <div class="subItem"><a href="#">Services</a></div>
       </div
>
</div>
</
div> 
<br>
<
div class="mainDiv" >
<div class="topItem"  >List Menu 2</div>       
<div class="dropMenu" ><!-- -->
       <div class="subMenu" style="display:none;">
              <div class="subItem"><a href="#">Configuration</a></div>
              <div class="subItem"><a href="#">Technologies</a></div>
              <div class="subItem"><a href="#">Our Network</a></div>
              <div class="subItem"><a href="#">Our Client</a></div>
        </div
>
</div>
</
div>
</
div>
 <script type="text/javascript" src="Scripts/xpmenuv21.js"></script> //Add the reference of xpmenuv21.js file.
    </form
>
</body>
</
html>

Step 6 : In this step we will see the design of the Default2.aspx page, which is given below.

img4.gif

Step 7 : In this step we are going to run the Default2.aspx page by pressing F5.

IMG5.gif

Click on every "List Menu 1" Button you will see the following output.

img6.gif

Click on 'List Menu 2' Button.

img7.gif

 Resources

Up Next
    Ebook Download
    View all
    Learn
    View all