Click here to Skip to main content
11,719,185 members (86,593 online)
Click here to Skip to main content

Another XP style panel bar for Web

, 16 Aug 2005 CPOL 133.5K 2.3K 124
Rate this:
Please Sign up or sign in to vote.
XP style panel bar for Web applications.

XP panel bar in action..

Introduction

Windows XP users are already familiar with a Panel Bar that appears on the left side in Windows Explorer. This article introduces another way to mimic this user interface in web applications. This article is inspired by another great article Windows XP Style Menu already available on CodeProject. However the idea presented in this article makes use of tables a lot to format the panel bar contents and also provides a way to alter stylesheets at run-time.

Panelbar Layout

The following figure shows the HTML layout of a single item in the panel bar. The exact same layout is followed by every other item in the panel bar.

HTML layout of panel bar...

  • The entire panel bar is wrapped in a div tag.
  • The actual panel bar is formed using two div tags. Mainly Header and Links.
  • The header is rendered as a single row table.
  • The item links are again rendered as table rows.

The entire panelbar HTML is generated at runtime using client side JavaScript. So you don't need to include any HTML as required by most of the other panel bars I have seen.

Driving script

The panel bar requires two JavaScript files. The Panelbar.js file houses the actual code for menu generation and ua.js houses the script used for browser detection. The page in which you want to show the panelbar needs to emit the following JavaScript code:

<script language="javascript">
  var objTmp;

  objTmp = createMenu("Community", "");
  createSubMenu(objTmp, "Site Map", "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "Add To Favorites", 
                        "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "CodeProject Stuff", 
                        "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "Who's Who", "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "Tell a friend", "PanelBar.htm#", 
                        "", "", "", "WKSpace");
  createSubMenu(objTmp, "Industry Contacts", 
                        "PanelBar.htm#", "", "", "", "WKSpace");

  objTmp = createMenu(".NET", "");
  createSubMenu(objTmp, "ASP.NET", "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "Managed C++", "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "SOAP & XML", "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "VB.NET", "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "C++ Web Services", 
                        "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "Compact Framework", 
                        "PanelBar.htm#", "", "", "", "WKSpace");
  createSubMenu(objTmp, "Cross Platform", "PanelBar.htm#", "", "", "", "WKSpace");

  setTheme("XPClassic.css", null, null)
  initialize(150);    
</script>

The createMenu function takes two parameters. The first one is the header text and the second is the tooltip text. Currently this parameter is ignored. In future, this can be used with the title attribute of the span tag and enclosing the header text within it.

The createSubMenu function takes the following six parameters:

  1. The reference to the header object under which the link items are to be rendered.
  2. The link text to be displayed.
  3. The link URL.
  4. The extra data to be passed to the link URL through the query string.
  5. The tooltip text to be displayed for the link.
  6. The name of the image file to be rendered before the link text.
  7. Finally, the target window or frame name in which the link should be opened.

The setTheme basically allows menu customization. It takes the following three parameters:

  1. The name of the custom CSS file.
  2. The relative path and name of the folder containing the custom theme file. The default value is CSS.
  3. The relative path and name of the folder containing the images used in the custom theme. The default value is IMAGES.

Finally, the initialize function which takes a single parameter and uses it to decide the width of the panelbar. This function is also responsible for generating the necessary HTML.

JavaScript structures

The panel bar is composed using the following JavaScript structures. The MenuBand structure contains information required to render the header portion. It also contains an array of sub items. The drawMenu member is responsible for rendering the header as well as the sub items.

/********************
 * Header structure *
 *******************/
function MenuBand(pstrDesc, pstrTip)
{
    // Properties
    this.id        = "";           //generated at runtime.
    this.label     = pstrDesc;     //Text to be displayed in header
    this.microHelp = pstrTip;      //Tooltip text
    this.isHeader  = true;
    this.open      = false;        //future use
    this.submenu   = new Array;    //array containing link items.
    this.smcount   = 0;            //count of sub items.

    //Methods
    this.addSubMenu = addSubMenu;  //function for item addition
    this.render     = drawMenu;    //function for rendering header
}

The SubMenu structure contains information required to render the individual sub item. Again it also has a drawMenu member which is responsible for rendering this sub item. This member is called from the drawMenu member of MenuBand.

/**********************
 * Sub item structure *
 *********************/
function SubMenu(pstrDesc, pstrLink, pstrLinkData, pstrTip, pstrImage, pstrTarget)
{
    // Properties
    this.parentId   = "";            //populated at runtime
    this.label      = pstrDesc;      //Item text to be displayed
    this.hlink      = pstrLink;      //Link url
    this.linkTarget = pstrTarget;    //Target window and or frame identifier
    this.linkData   = pstrLinkData;  //Exrta data to be passed through querystring.
    this.microHelp  = pstrTip;       //Tooltip text.
    this.isHeader   = false;
    this.isSelected = false;         //future use
    this.iconSrc    = pstrImage;     //Name of the image file.

    //Methods
    this.render     = drawSubMenu;   //function for rendering sub item.
}

Drawing functions

The two most important functions in the panel bar construction are drawMenu and drawSubMenu. As the name suggests, the drawMenu renders the header part and calls drawSubMenu on each sub item to render individual sub items.

/*************************************************************
 * Render header part and for each sub item invokes drawMenu.*
 ************************************************************/
function drawMenu()
{
    var iCntr = 0;
    var objMenu;
    var strId, strLbl;

    document.write("<div class=\"menuHeaderCollapsed\" id=\"" + this.id + "\"" + 
                    " onmouseover=\"mousehover(this)\"" + 
                    " onmouseout=\"mouseout(this)\"" +
                    "onclick=\"toggle(this)\">");
    document.write("<table border=\"0\" cellspacing=\"0\"" +
                    " cellpadding=\"4\" width=\"100%\">");
    document.write("<tr><td style=\"vertical-align: center;\">" + 
                   this.label + "</td></tr>");
    document.write("</table></div>");

    //start drawing sub menu
    document.write("<div style=\"display: none; visibility: hidden;\"" +
                    " class=\"menuItems\" id=\"" + this.id + "_child" + "\">");
    document.write("<table border=\"0\" cellspacing=\"0\"" +
                    " cellpadding=\"4\" width=\"100%\">");
    for (iCntr = 0; iCntr < this.smcount; iCntr++)
    {
        this.submenu[iCntr].render();
    }
    document.write("</table></div>");
}

/********************
 * Renders sub item.
 *******************/
function drawSubMenu()
{
    var strImg = "";

    document.write("<tr><td>");
    if (this.iconSrc)
        strImg = "<img src=\"" + _strCtxt + _imageFolder + "/" + 
                    this.iconSrc + " border=\"0\"\"> ";
    document.write("<a href=" + 
              getLink(this.linkTarget, (_strCtxt + this.hlink), this.linkData) + 
              "\">");
    document.write(strImg);
    document.write(this.label);
    document.write("</a>");
    document.write("</td></tr>");
}

Stylesheet

There is really nothing special about the stylesheet(s) used. The attached source contains four different stylesheets. The following stylesheet renders the Code Project panelbar:

body
{
    font-family: Verdana, Tahoma, Arial;
    font-size: 8pt;
    font-weight: normal;
    background-color: #FC9A04;
}

#panelBar
{
    background-color: #FC9A04;
    height: 100%;
    width: 100%;
    vertical-align: top;
}

.menuHeaderExpanded
{
    font-family: Verdana, Tahoma, Arial;
    font-size: 8pt;
    font-weight: bold;
    background-image: url('../Images/CPExpand.gif');
    background-position: right center;
    background-repeat: no-repeat;
    color: #FC9A04;
    height: 23px;
    cursor: hand;
    border-left: 1px solid #000000;
}

.menuHeaderExpandedOver
{
    font-family: Verdana, Tahoma, Arial;
    font-size: 8pt;
    font-weight: bold;
    background-image: url('../Images/CPExpand.gif');
    background-position: right center;
    background-repeat: no-repeat;
    color: #FC9A04;
    height: 23px;
    cursor: hand;
    border-left: 1px solid #000000;
}

.menuHeaderExpanded td
{
    color: #FC9A04;
    font-size: 8pt;
    font-weight: normal;
}

.menuHeaderExpandedOver td
{
    color: #FC9A04;
    font-size: 8pt;
    font-weight: bold;
}

.menuHeaderCollapsed
{
    font-family: Verdana, Tahoma, Arial;
    font-size: 8pt;
    font-weight: bold;
    background-image: url('../Images/CPCollapse.gif');
    background-position: right center;
    background-repeat: no-repeat;
    color: #FC9A04;
    height: 23px;
    cursor: hand;
    border-left: 1px solid #000000;
}

.menuHeaderCollapsedOver
{
    font-family: Verdana, Tahoma, Arial;
    font-size: 8pt;
    font-weight: bold;
    background-image: url('../Images/CPCollapse.gif');
    background-position: right center;
    background-repeat: no-repeat;
    color: #FC9A04;
    height: 23px;
    cursor: hand;
    border-left: 1px solid #000000;
}

.menuHeaderCollapsed td
{
    color: #FC9A04;
    font-size: 8pt;
    font-weight: normal;
}

.menuHeaderCollapsedOver td
{
    color: #FC9A04;
    font-size: 8pt;
    font-weight: bold;;
}

.menuItems
{
    font-family: Verdana, Tahoma, Arial;
    font-size: 8pt;
    background-color: #FFCC99;
    color: #000000;
    position: relative;
}

.menuItems table
{
    font-family: Tahoma, Verdana, Arial;
    font-size: 8pt;
    background-color: #FFCC99;
    color: #000000;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.menuItems a
{
    color: #000000;
    text-decoration: none;
}

.menuItems a:hover
{
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

Possible Enhancements

  • Support for browsers other than Internet Explorer 6.0 and FireFox 1.0.
  • Support for header tooltips.
  • Drawing box around sub item upon mouse hover.

Revision History

  • Feb. 11, 2005

    First release.

  • Feb. 17, 2005

    Fixed images and stylesheets to remove arrow direction bug.

  • Apr. 13, 2005

    Fixed image not getting displayed bug for subitems.

  • Aug 17, 2005
    1. Support for background images for individual panel.
    2. Support for multiple panel instances.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Prasad Khandekar
Software Developer (Senior) Freelancer
India India
I am a software professional with over 20 years of commercial business applications design and development experience.

My programming experience includes Java, Spring, .NET, Classic VB & ASP, Scripting, Power Builder, PHP, Magic & far far ago FoxPro, C, Assembly and COBOL.

From last 11 years I am mostly working with Java Technology. I am currently available to take up new assignments.

You may also be interested in...

Comments and Discussions

 
Generalfile panelbarOrig.js problem!!! Pin
trieutanvinh20-Jul-08 16:36
membertrieutanvinh20-Jul-08 16:36 
GeneralThe script is superb but should be explained in a better way. Pin
decent_john14-Sep-06 6:11
memberdecent_john14-Sep-06 6:11 
GeneralBalooney. Pin
silviudusa9-Aug-06 9:44
membersilviudusa9-Aug-06 9:44 
GeneralRe: Balooney. Pin
Prasad Khandekar10-Aug-06 4:23
memberPrasad Khandekar10-Aug-06 4:23 
GeneralRe: Balooney. Pin
silviudusa10-Aug-06 5:07
membersilviudusa10-Aug-06 5:07 
GeneralRe: Balooney. Pin
Prasad Khandekar11-Aug-06 5:50
memberPrasad Khandekar11-Aug-06 5:50 
GeneralRe: Balooney. Pin
MaxProgger22-Aug-06 22:43
memberMaxProgger22-Aug-06 22:43 
GeneralRe: Balooney. Pin
AndrewVos6-Nov-06 7:24
memberAndrewVos6-Nov-06 7:24 
QuestionOpen by default.. Pin
robyzurieta5-Apr-06 21:53
memberrobyzurieta5-Apr-06 21:53 
Hi,
how to Open first menu container by default?
please HELP.
Any help would be greatly appriciated!

robe007
AnswerRe: Open by default.. Pin
Prasad Khandekar12-Apr-06 5:21
memberPrasad Khandekar12-Apr-06 5:21 
GeneralNesting panels Pin
codegalaxy13-Feb-06 11:46
membercodegalaxy13-Feb-06 11:46 
GeneralIE 7 Problem Pin
zolf11-Feb-06 20:06
memberzolf11-Feb-06 20:06 
Questioncollapsed problem Pin
Rom20002-Jan-06 16:26
memberRom20002-Jan-06 16:26 
QuestionProblems With Menu Pin
Jim Keller15-Nov-05 16:24
memberJim Keller15-Nov-05 16:24 
AnswerRe: Problems With Menu Pin
Prasad Khandekar28-Nov-05 3:35
memberPrasad Khandekar28-Nov-05 3:35 
AnswerRe: Problems With Menu Pin
oordopjes9-Dec-05 3:17
memberoordopjes9-Dec-05 3:17 
GeneralPlease help Pin
zolf16-Oct-05 22:24
memberzolf16-Oct-05 22:24 
GeneralRe: Please help Pin
Prasad Khandekar17-Oct-05 20:06
memberPrasad Khandekar17-Oct-05 20:06 
QuestionHow do I open page in same window Pin
zolf16-Oct-05 0:27
memberzolf16-Oct-05 0:27 
AnswerRe: How do I open page in same window Pin
Prasad Khandekar17-Oct-05 20:09
memberPrasad Khandekar17-Oct-05 20:09 
QuestionTab pane Pin
zolf10-Oct-05 21:14
memberzolf10-Oct-05 21:14 
GeneralCannot view the panel bar Pin
Anonymous9-Oct-05 21:08
sussAnonymous9-Oct-05 21:08 
GeneralRe: Cannot view the panel bar Pin
Prasad Khandekar10-Oct-05 5:29
memberPrasad Khandekar10-Oct-05 5:29 
Generaltoggle on load Pin
amine kassir22-Aug-05 5:16
sussamine kassir22-Aug-05 5:16 
GeneralFails in Firefox Pin
gxdata20-Aug-05 18:32
membergxdata20-Aug-05 18:32 
GeneralRe: Fails in Firefox Pin
Prasad Khandekar21-Aug-05 21:28
memberPrasad Khandekar21-Aug-05 21:28 
GeneralRe: Fails in Firefox Pin
gxdata21-Aug-05 22:09
membergxdata21-Aug-05 22:09 
GeneralRe: Fails in Firefox Pin
Prasad Khandekar22-Aug-05 3:34
memberPrasad Khandekar22-Aug-05 3:34 
GeneralMore than one instance Pin
thanks_in_advance22-Jul-05 7:31
memberthanks_in_advance22-Jul-05 7:31 
GeneralRe: More than one instance Pin
Prasad Khandekar10-Aug-05 20:00
memberPrasad Khandekar10-Aug-05 20:00 
GeneralProgrammatically adding entries Pin
Niall Staward14-Jul-05 22:33
memberNiall Staward14-Jul-05 22:33 
GeneralOpen by default Pin
Courtenay Probert24-May-05 8:28
memberCourtenay Probert24-May-05 8:28 
GeneralRe: Open by default Pin
kipperfish1-Aug-05 2:54
memberkipperfish1-Aug-05 2:54 
GeneralRe: Open by default Pin
goranbaxy6-Nov-05 12:01
membergoranbaxy6-Nov-05 12:01 
GeneralUpto 4 Levels Pin
sivamohanreddy18-May-05 0:22
membersivamohanreddy18-May-05 0:22 
Generalgreat job, a little bug Pin
immm21-Apr-05 11:17
memberimmm21-Apr-05 11:17 
GeneralASP Page Pin
Anonymous19-Apr-05 0:48
sussAnonymous19-Apr-05 0:48 
GeneralRe: ASP Page Pin
Prasad Khandekar20-Apr-05 18:34
memberPrasad Khandekar20-Apr-05 18:34 
QuestionASP.NET Server Control? Pin
biao8113-Apr-05 15:32
memberbiao8113-Apr-05 15:32 
GeneralImages In subMenu Pin
AdamOC11-Apr-05 22:56
memberAdamOC11-Apr-05 22:56 
GeneralRe: Images In subMenu Pin
Prasad Khandekar13-Apr-05 5:29
memberPrasad Khandekar13-Apr-05 5:29 
Generalclearing variables Pin
andrew garland29-Mar-05 3:13
memberandrew garland29-Mar-05 3:13 
Generalit work good Pin
watist23-Feb-05 13:35
memberwatist23-Feb-05 13:35 
GeneralTag line in output?! Pin
Angrydot22-Feb-05 11:14
memberAngrydot22-Feb-05 11:14 
GeneralRe: Tag line in output?! Pin
david()()()()24-Mar-05 9:05
memberdavid()()()()24-Mar-05 9:05 
QuestionIs the latest .zip obfuscated? Pin
Al Ashcroft20-Feb-05 10:35
memberAl Ashcroft20-Feb-05 10:35 
AnswerRe: Is the latest .zip obfuscated? Pin
Prasad Khandekar20-Feb-05 18:32
memberPrasad Khandekar20-Feb-05 18:32 
GeneralRe: Is the latest .zip obfuscated? Pin
david()()()()24-Mar-05 8:56
memberdavid()()()()24-Mar-05 8:56 
Generalwhat tool are you used to make the javascript obfuscated ,thx Pin
off15-Apr-05 20:36
memberoff15-Apr-05 20:36 
GeneralRe: Is the latest .zip obfuscated? Pin
pmcohen11-Apr-06 9:44
memberpmcohen11-Apr-06 9:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150901.1 | Last Updated 17 Aug 2005
Article Copyright 2005 by Prasad Khandekar
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid