Switch Menu II Using JQuery

Sapna
Feb 14, 2012

9.7k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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.

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.

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    </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>