Click here to Skip to main content
12,296,731 members (62,200 online)
Click here to Skip to main content
Add your own
alternative version


42 bookmarked

XP collapsible menu with description

, 18 Nov 2002
Rate this:
Please Sign up or sign in to vote.
An update of my Windows XP Style Menu article, now with description supported for every link.

Sample Image - MenuWithDescription.gif


This is an update of my previous article (WindowsXP Style Menu) which creates a Windows XP look alike Panel Bar with the separation of structure, presentation and functions. Now this menu is updated to support transparent popup description for every link inside it.

Since this article uses the same code of the previous article, I just show here the structure (HTML) of the menu which you can just copy and paste to create as many submenus inside it as you need, without writing a single line of code.

The Structure (HTML)

The complete HTML is in the source code.

<!-- begin the menu -->
<div id="MainMenu">
  <!-- begin submenu -->
    <div style="width:180">
      <table cellpadding="1" cellspacing="0" class="Menu_Head">
          <td width="90%">ASP.NET</td>
          <td><img src="down.gif" border="0">&nbsp;</td>
    <div class="Menu_Items">
          <a href="">User Controls</a>
          <div class="Description">
            <div class="DescTitle">User Controls articles</div>
            View all articles about User Controls
          <a href="">Server Controls</a>
          <div class="Description">
            <div class="DescTitle">Server Controls articles</div>
            Tutorials show you how to write server controls
          <a href="">Custom Controls</a>
          <div class="Description">
            <div class="DescTitle">Custom Controls articles</div>
            Tutorials show you how to write advanced custom controls
          <a href="">Applications</a>
          <div class="Description">
            <div class="DescTitle">Applications</div>
            View all demo applications like guestbook, forum...
  <!-- end sub menu -->

The structure is quite simple, the menu starts with the first <div> tag, each submenu is nested inside it with the <span> tag. The Submenu header (title) is nested inside the <div style="width:180"> and all the links are nested inside the <div class="Menu_Items">. After every link, you should have a <div> to contain its description, it will automatically show when you move the mouse over the link.

That's it for the menu. Hope this could help you a bit.


  • 19 November 2002

    Fixed an expanding bug: clicking too fast on the expand/collapse button will result in an extra white space of the submenu. Thanks to Obliterator for pointing it out.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Singapore Singapore
No Biography provided

You may also be interested in...

Comments and Discussions

nagen pnaja31-Aug-10 2:02
membernagen pnaja31-Aug-10 2:02 
Generaldoes not work in firfox .... Pin
homano9-Nov-09 19:52
memberhomano9-Nov-09 19:52 
Questionhave you find that there is a small bug in the script program? Pin
gordengu17-Apr-07 15:29
membergordengu17-Apr-07 15:29 
you see the code is:if("none") show();
else hide();
but if you replace the code "else" with
"if("block") hide();" ,you will see that the first time you chick it ,it can't work exactly.

so where is the problem?I find that we do not know the value of style.display at first .In the DOM ,we can access it and change it ,but
we can't get the value,even use it to equal to string "block" and so on.

but this program work fine,because it's default value is none.
so...Frown | :(

QuestionFirefox doesnt work! Pin
Aboulmak9-Nov-06 22:15
memberAboulmak9-Nov-06 22:15 
QuestionDoes anyone know how to do the same thing in ASP.NET ?? Pin
conankunkid5-Oct-05 4:02
memberconankunkid5-Oct-05 4:02 
AnswerRe: Does anyone know how to do the same thing in ASP.NET ?? Pin
jay_dubal25-Feb-06 9:49
memberjay_dubal25-Feb-06 9:49 
QuestionHow to Hide all menu when loaded Pin
Patrick Olurotimi Ige9-Jul-05 21:36
memberPatrick Olurotimi Ige9-Jul-05 21:36 
GeneralNetscape Pin
scotthallett7-Apr-05 12:28
memberscotthallett7-Apr-05 12:28 
QuestionHow to auto hide another when click one? Pin
thinhhangdieu30-Sep-04 17:17
memberthinhhangdieu30-Sep-04 17:17 
AnswerRe: How to auto hide another when click one? Pin
all_i_want_is_everything2-Mar-06 3:58
memberall_i_want_is_everything2-Mar-06 3:58 
GeneralDescriptions for only certain items Pin
Shawn M. Reed23-Mar-04 4:10
memberShawn M. Reed23-Mar-04 4:10 
Generalshow active item Pin
Ruuca19-Mar-04 8:00
memberRuuca19-Mar-04 8:00 
GeneralRegarding maintaining the state Pin
Fasilak19-Mar-04 4:45
sussFasilak19-Mar-04 4:45 
GeneralRe: Regarding maintaining the state Pin
fasilak23-Mar-04 0:29
sussfasilak23-Mar-04 0:29 
QuestionHow to use it with Netscape Pin
balpo15-Apr-03 17:42
memberbalpo15-Apr-03 17:42 
AnswerRe: How to use it with Netscape Pin
Anonymous15-Apr-03 22:07
sussAnonymous15-Apr-03 22:07 
GeneralRe: How to use it with Netscape Pin
burkazoid200319-Jan-04 13:45
memberburkazoid200319-Jan-04 13:45 
Questionload on default? Pin
Anonymous19-Feb-03 20:12
sussAnonymous19-Feb-03 20:12 
AnswerRe: load on default? Pin
Keertikiran11-May-07 1:38
memberKeertikiran11-May-07 1:38 
Generalquestion with frame Pin
xslipwizx2-Feb-03 16:55
sussxslipwizx2-Feb-03 16:55 
GeneralRe: question with frame Pin
Eric Garcia11-Nov-03 17:21
memberEric Garcia11-Nov-03 17:21 
GeneralRe: question with frame Pin
jjfatts18-May-06 11:12
memberjjfatts18-May-06 11:12 
GeneralCool Pin
Steve McLenithan19-Nov-02 5:17
memberSteve McLenithan19-Nov-02 5:17 
GeneralSmall bug expanding Pin
Obliterator18-Nov-02 6:38
memberObliterator18-Nov-02 6:38 
GeneralRe: Small bug expanding Pin
tommy skaue18-Nov-02 23:32
membertommy skaue18-Nov-02 23:32 
GeneralRe: Small bug expanding Pin
Zek3vil19-Nov-02 3:47
memberZek3vil19-Nov-02 3:47 
GeneralRe: Small bug expanding Pin
tommy skaue19-Nov-02 3:53
membertommy skaue19-Nov-02 3:53 
GeneralRe: Small bug expanding Pin
Marc Heiligers26-Nov-02 0:47
memberMarc Heiligers26-Nov-02 0:47 
GeneralRe: Small bug expanding Pin
tommy skaue26-Nov-02 0:50
membertommy skaue26-Nov-02 0:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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
Web02 | 2.8.160525.2 | Last Updated 19 Nov 2002
Article Copyright 2002 by Zek3vil
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid