Home > ASP.Net, CSS, Javascript > Create Collepse and Expand Menu

Create Collepse and Expand Menu


Hi

try this example to create collepsed and Expand Menu using CSS and Javascript

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
    <title>Untitled Page</title>
    <script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();
var currentOpenItemName="";
function showHide(theid)
{
    if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide(currentOpenItemName);
    if (document.getElementById)
    {
       var switch_id = document.getElementById(theid);
        if(menu_status[theid] != 'show')
        {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
           currentOpenItemName = theid;
        }
        else
        {
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
           currentOpenItemName = "";
        }
    }
}

//-->
</script>

    <style type="text/css">
        .menu1
        {
        background-color:Olive;
 margin-left:25px;
 padding-left:20px;
 padding-top:2px;
 padding-bottom: 2px;
 display:block;
 text-decoration: none;
 color: #000000;
 height: 20px;
        width: 67px;
        border: thin solid #FF0000
        }
 .submenu
 {
  background-color:Blue;
  margin-left:25px;
 display: block;
 height: 19px;
 padding-left:20px;
 padding-top: 2px;
 color:White;
  width: 67px;
 }
 .hide
 {
 display: none;
 }
 .show
 {
 display: block;
 }
 </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="menu1" onclick="showHide('mymenu1')" >Menu 1</a>
    <div id="mymenu1" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>
 <a class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>
 <a class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>
 <a class="menu1" onclick="showHide('mymenu4')">Menu 4 </a>
    <div id="mymenu4" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>
 <a class="menu1" onclick="showHide('mymenu5')">Menu 5 </a>
    <div id="mymenu5" class="hide">
        <a href="default.aspx" class="submenu">Link One here</a>
        <a href="default.aspx" class="submenu">Link Two here</a>
        <a href="default.aspx" class="submenu">Link Three here</a>
        <a href="default.aspx" class="submenu">Link Four here</a>
    </div>

    </div>
    </form>
</body>
</html>

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, CSS, Javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: