Introduction
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.
<!---->
<div id="MainMenu">
<!---->
<span>
<div style="width:180">
<table cellpadding="1" cellspacing="0" class="Menu_Head">
<tr>
<td width="90%">ASP.NET</td>
<td><img src="down.gif" border="0"> </td>
</tr>
</table>
</div>
<div class="Menu_Items">
<div>
<div>
<a href="">User Controls</a>
<div class="Description">
<div class="DescTitle">User Controls articles</div>
View all articles about User Controls
</div>
</div>
<div>
<a href="">Server Controls</a>
<div class="Description">
<div class="DescTitle">Server Controls articles</div>
Tutorials show you how to write server controls
</div>
</div>
<div>
<a href="">Custom Controls</a>
<div class="Description">
<div class="DescTitle">Custom Controls articles</div>
Tutorials show you how to write advanced custom controls
</div>
</div>
<div>
<a href="">Applications</a>
<div class="Description">
<div class="DescTitle">Applications</div>
View all demo applications like guestbook, forum...
</div>
</div>
</div>
</div>
</span>
<!---->
....
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.
History